Web 扩展是否需要显式加载内容脚本？答案

【问题标题】：Does a web extension need to explicitly load content scripts?Web 扩展是否需要显式加载内容脚本？
【发布时间】：2017-09-14 14:23:32
【问题描述】：

我正在尝试编写一个简单的 Web 扩展。目前我正在学习各种教程并尝试了解架构。

与特定选项卡的交互是通过注入网站源代码的 content_scripts 完成的。在我看来，好像 content_scripts 是自动加载的： https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts

MDN 上的tutorial 更清楚地说明了这一点：

此脚本将加载到与给定模式匹配的页面中在 content_scripts manifest.json 键中。脚本可以直接访问到文档，就像页面本身加载的脚本一样。

我的扩展程序应该在每个文本选择上提供一个上下文菜单。作为一个起点，我找到了一个有用的 chrome 示例扩展。你可以在这里https://developers.chrome.com/extensions/samples找到它，它被称为“说话选择”

此扩展程序正在使用 tts 引擎读取选定的文本。但是源代码的一部分令人困惑：它们具有在选项卡中运行 content_scripts 的显式功能。此代码在其后台脚本之一中作为 Init() 函数的一部分执行：

function loadContentScriptInAllTabs() {
  chrome.windows.getAll({'populate': true}, function(windows) {
    for (var i = 0; i < windows.length; i++) {
      var tabs = windows[i].tabs;
      for (var j = 0; j < tabs.length; j++) {
        chrome.tabs.executeScript(
            tabs[j].id,
            {file: 'keycodes.js', allFrames: true});
        chrome.tabs.executeScript(
            tabs[j].id,
            {file: 'content_script.js', allFrames: true});
      }
    }
  });
}

据我所知，代码在浏览器启动后立即执行。这不是多余的吗？

他们的 manifest.json 应该负责 content_script 的执行，这里是相关代码：

"content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "all_frames": true,
      "js": [
        "keycodes.js",
        "content_script.js"
      ]
    }
  ],

将脚本注入每个打开的选项卡的正确方法是什么？

【问题讨论】：

标签： javascript google-chrome google-chrome-extension firefox-addon-webextensions

【解决方案1】：

简答：Chrome 需要，但 Firefox 不需要。

Chrome does not load 在扩展加载时将内容脚本写入匹配页面（包括扩展更新，而不仅仅是初始加载）。

因此，如果您希望在扩展加载时打开选项卡中的内容脚本功能（而不是未来的导航），则需要此代码（或类似代码）。

您可以使用chrome.tabs.query 对这段代码进行一些现代化改造。

Firefox 在这方面与 Chrome 不兼容：它确实在加载时自动将内容脚本注入到所有匹配的内容中。所以你应该使用一些浏览器检测和/或只注入一次的保护代码。

我希望他们没有将其作为重大更改引入。至少提供一个清单键来选择易于转换的行为是有意义的。

注意：在扩展重新加载场景中，来自旧实例的内容脚本继续存在（但扩展 API 将失败）；你有责任优雅地处理它。

【讨论】：

感谢您的快速回答。并且您包含到上一个答案的链接非常有用

【解决方案2】：

您可以将内容（前台）页面显式加载到任何选项卡中，或者创建一个选项卡然后加载内容页面。从后台脚本执行此操作。除了需要活动选项卡权限外，您不需要清单文件中的条目。

browser.tabs.executeScript(null,{file:"/content.js"}).then(NextAction);
function NextAction(Array of last evaluated statement of foreground script in each frame)
   {...}

【讨论】：