1

我有一个加载/注入 contentscript.js 的 Chrome 扩展程序此脚本将 html 和 css 附加到网页。

目前我已将 html 和 css 写入我的 contentscript。我想要的是将 css 本身以及我的新元素的主体放在单独的文档中，主要是因为它看起来比将 html 和 css 作为 .js 文档中的文本更好。

然后在 contentscript 我会做类似的事情

node = the_html_doc.html
document.getElementsByTagName("body")[0].appendChild(node);

但是我如何从我的内容脚本中访问这样一个单独的文档？它需要在所有选项卡中都可用（我使用 activeTab 权限），而不仅仅是清单“匹配”中的 url。

4

2 回答 2

2

更好的解决方案是使用后台脚本。我所做的是创建一个名为的文件，该文件background.html只存储模板。然后我background.js设置了后台脚本 ( ) 以与我的内容脚本 ( content.js) 进行通信。内容脚本将向后台脚本发送一条消息，command指示它需要一个模板。利用 jQuery，我可以轻松地选择模板并将其返回到我的内容脚本，然后可以将其注入页面。

这是代码（一点点）：

背景.html

<div id="template-1"></div>
<div id="template-2"></div>
...

背景.js

chrome.runtime.onMessage.addListener(function(cmd, sender, sendResponse){
    c = JSON.parse(cmd);
    if(c.cmd == "GET_TEMPLATE"){
       //respond with the template referenced by c.selector
       sendResponse($(c.selector).outerHTML);
    }
});

内容.js

var command = {cmd:"GET_TEMPLATE", selector:"#template-1"};
chrome.runtime.sendMessage(JSON.stringify(command), function(response) {
    //and here you should get your template
    console.log(response);
    //you can start using jQuery like $(response) to alter it
});

这种方法对我来说完美无缺。我不仅在这里使用命令，而且现在在任何地方都使用它们，它与消息传递配合得很好。

于 2013-05-24T16:38:13.130 回答
0

您可能可以使用web_accessible_resources清单设置，然后在您的内容脚本中，您可以只注入一个link指向chrome.extension.getURL(<filename>)CSS 值的元素，并注入一个具有 idscript类型的元素text/html，然后获取该节点的内容并使用这些为您的appendChild电话。

于 2013-05-23T05:22:53.830 回答