Question

我有一个Chrome扩展程序，可以加载/注入一个contentcript.js这个脚本会将html和css附加到网页上。

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

然后在内容中我会做类似

的事情

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

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

Answer 1

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

这是代码（位片）：

<强> background.html

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

<强> background.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);
    }
});

<强> content.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
});

这种方法对我来说完美无缺。我不仅在这里使用命令，而且我现在到处都使用它们，它适用于消息传递。

Answer 2

您可以使用web_accessible_resources清单设置，然后在内容脚本中，您只需注入一个link元素，该元素指向CSS的chrome.extension.getURL(<filename>)值，然后注入带有ID的script类型的text/html元素，然后获取该节点的内容并将其用于appendChild调用。

Chrome扩展程序：从内容脚本访问单独的html文档

2 个答案: