使用chrome扩展编辑页面html

Question

在获取页面的html、查找div和添加一些html内容方面，我需要帮助。我没有得到确切和推荐的方法来做这件事。

我尝试了一些东西。

添加运行_at:document_start 的内容脚本

它所做的只是在body标记后附加div，并从我需要显示的扩展文件中获取html页面内容。

$(function () {
    var style = 'border: 0 none transparent !important; background: rgba(0, 0, 0, 0.5);';
    var frame = ' <div id="con-1-frame" style="' + style + '">n
                </div>';
    $("body").after(frame);
    $("#con-1-frame").load(chrome.extension.getURL("design.html"));
});

实现这一目标的最佳方式是什么？

提前谢谢。

Answer 1

如果您将其作为内容脚本运行，那么您所拥有的应该可以工作。您需要在manifest.json文件中声明它，类似于以下内容：

"content_scripts": [
     {
         "matches": [
             "<all_urls>"
         ],
         "js": ["contentscript.js"]
     }
],

这将被添加到你的manifest.json中，并假设：

1. 您希望它在每一页上运行——如果没有，您需要更改匹配部分
2. 内容脚本的名称为contentscript.js

有关更多信息，请尝试查看以下资源：

• https://developer.chrome.com/extensions/manifest
• https://developer.chrome.com/extensions/content_scripts

如果这不能解决你的问题，我会尝试分享你的项目结构和清单的内容，以获得更好的答案。