如何将内容脚本附加到webextensions中的选项卡

Question

首先，我感谢您的帮助和支持。

如果我想将内容脚本附加到我没有其ID的选项卡上。单击扩展名按钮时，将打开选项卡，如下所示。

function openIndexPage() {
   browser.tabs.create({
     "url": "data/index-page.html"
   });
} //end openIndexPage

browser.browserAction.onClicked.addListener(openIndexPage);

如何将内容脚本附加到index-page.html？我无法使用普通的HTML <script></script>来附加它，因为它需要访问存储。你能帮我解决这个难题吗？

Answer 1

您无法从扩展程序将内容脚本注入HTML页面，也无需这样做。

从您的扩展程序中加载的HTML页面，如选项卡，窗口，选项页面，弹出窗口等，都会加载到后台上下文中。这与您的后台脚本运行的上下文相同。但是，与此类HTML页面关联的脚本（即在<script>标记引用的单独JavaScript文件中）运行在该页面的范围内。他们可以访问您的后台脚本可用的所有chrome.* / browser.* API。如果他们愿意，他们可以在背景环境中获得对其他范围的引用。如果您想了解有关此类脚本之间进行通信的更多信息，请参阅：Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)

因此，不需要将内容脚本加载到这些页面中。页面中运行的脚本已经可以访问该页面的DOM和所有特权扩展API。此类脚本不仅限于内容脚本可用的API。

附注：内容脚本附加到选项卡的内容，而不是选项卡

内容脚本本身不会附加到选项卡。它们被注入到当前显示在选项卡中的内容中。这可以通过具有匹配URL的 manifest.json content_scripts条目，或通过调用tabs.executeScript()将其注入指定选项卡来实现。如果将不同的内容加载到选项卡中，则会销毁内容脚本。因此，它附加到内容，而不是实际的标签。换句话说，当选项卡更改为新URL时，它不会自动重新加载，除非该URL与 manifest.json content_scripts条目匹配，或者再次调用tabs.executeScript()。