Chrome 扩展中的 RequireJS

Question

我正在构建一个 Chrome 扩展，它将一些 JavaScript 添加到维基百科文章中。据我所知，使用 RequireJS 的唯一方法是添加行

<script data-main="scripts/bla" src="scripts/require-jquery.js>

但是，在我的 Chrome 扩展中，我无权访问 HTML 来添加此行。有什么建议吗？

Answer 1

您确实可以通过内容脚本，但是内容脚本只能访问由内容脚本 本身。

有多种方法可以包含来自 Chrome 扩展程序的脚本，如何包含它取决于您计划使用它做什么。

如果您希望将其显示在浏览器或页面操作 您可以将其从清单中作为内容脚本包含进来，也可以使用脚本标记引用它来自亲戚的 popup.html插件中的资源。

来自清单：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

来自 popup.html：

<script data-main="scripts/bla" src="scripts/require-jquery.js>

如果您希望将其显示在后台页面中，您可以可以使用插件中相关资源的脚本标签从后台页面引用它。

来自background.html

<script data-main="scripts/bla" src="scripts/require-jquery.js>

如果您希望将其包含在浏览器页面本身中，那么您需要在页面的DOM 上使用动态脚本注入。您可以通过内容脚本访问页面的 DOM。请注意，如果您使用此技术加载 JavaScript，您的插件 JavaScript（从后台页面、内容脚本或弹出脚本）将无法访问它。

您可以使用 chrome.extension.getURL 方法从扩展程序加载 requirejs，也可以从互联网上的托管位置加载 requirejs。

var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.setAttribute("async", true);
script.setAttribute("src", chrome.extension.getURL("require-jquery.js"));  
//Assuming your host supports both http and https
var head = document.head || document.getElementsByTagName( "head" )[0] || document.documentElement;
head.insertBefore(script, head.firstChild)

Answer 2

以下是在后台页面中执行此操作的方法。

在 manifest.json 中：

"background": {
    "scripts": [ "scripts/require.js","scripts/main.js"]
}, 

在 main.js 中：

require.config({
    baseUrl: "scripts"
});

require( [ /*...*/ ], function(  /*...*/ ) {
    /*...*/
});

而不是这个：

<script data-main="scripts/bla" src="scripts/require.js></script>

您应该使用这个：

<script src="scripts/require-jquery.js"></script>
<script src="scripts/main.js"></script>

请参阅这个问题 - 在没有 data-main 的情况下使用 Require.js

您也可以使用此原理在内容页面中执行相同的操作。

顺便说一句，好问题。我喜欢亚当·艾尔斯的答案。

Answer 3

下面的编辑对于普通的 require.js 仍然适用，但通过分叉 RequireJS

Github 找到了解决方法：https://github。 com/jeroendelau/requirejs
Bower：bower install requirejs-for-browser-extensions

原始帖子

将其注入到内容脚本中是迄今为止最难的。并且上述答案不完整或不正确。

背景和弹出窗口：
遵循 @nafis 之前的回答，他们将使用

内容脚本
这是一个非常棘手的问题，api 描述中的这一部分是关键：

执行环境
内容脚本在称为隔离世界的特殊环境中执行。它们可以访问所注入页面的 DOM，但不能访问该页面创建的任何 JavaScript 变量或函数。它看起来每个内容脚本都好像没有其他 JavaScript 在其运行的页面上执行。反之亦然：页面上运行的 JavaScript 无法调用任何函数或访问内容脚本定义的任何变量。

直觉上这应该是正确的
manifest.json

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["requirejs.js", "myscript.js"]
    }
  ],
  ...
  "web_accessible_resources": [
     "js/*"
  ],
 ...
}

myscript.js

require(["myFancyModule"], function (FM) {
   ...
});

这不起作用

问题是 requirejs 将通过在标头中注入

1. 由于页面中未加载 requirejs，依赖项无法加载
   没有
2. 如果网站所有者已经添加了 requirejs，则可能会发生冲突
3. 您可以决定将 require.js 注入页面，正如 @Adam 所建议的那样，但在这种情况下，您的扩展功能都
   会起作用的。存储、消息传递、跨站请求都不是
   因此

，为了使它们能够工作，需要将 requirejs 加载的模块注入到扩展环境中。可以使用 requirejs 插件来更改加载行为。

由于这种工作方式，该解决方案非常不优雅，并且它阻止您在脚本下的调试器中看到脚本。但如果你绝望的话，它会起作用。

myscript.js

/**
 * Inject the plugin straight into requirejs
 */
define("Injector", {
  load: function (name, req, onload, config) {

    //Load the script using XHR, from background
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", function () {

      //Find depenencies in the script, and prepend the
      //Injector! plugin, forcing the load to go through this
      //plugin.
      var modified = getDeps(oReq.response)

      //have requirejs load the module from text
      //it will evaluate the define, and process dependencies
      onload.fromText(modified);
    });
    oReq.open("GET", req.toUrl(name) + ".js");
    oReq.send();

    //Find dependencies and prepend Injector!
    function getDeps(script)
    {
      //extract the define call, reduced to a single line
      var defineCall = script.match(/define([\s\S])*?{/m)[0].split("\n").join("");
      //extract dependenceis from the call
      var depsMatch = defineCall.match(/\[([\s\S]*?)\]/);

      //if there are dependencies, inject the injectors
      if (depsMatch)
      {
        var deps = depsMatch[0];
        var replaced = deps.replace(/(\'|\")([\s\S]*?)\1/g, '$1Injector!$2$1');
        return script.replace(/define([\s\S]*?)\[[\s\S]*?\]/m, 'define$1' + replaced);
      }
      //no dependencies, return script
      return script;
    }
  }
});

/**
 * Call all your dependencies using the plugin
 */
require(["Injector!myFancyModule"], function (FM) {
      chrome.storage.local.get({something});
});

Answer 4

要在内容脚本中使用它，您只需将其作为您的第一个依赖项包含在manifest.json中即可：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["requirejs.js", "myscript.js"]
    }
  ],
  ...
}

它不会污染全局命名空间（窗口）所以不用担心；它仅适用于扩展脚本。

另外，在manifest.json中，您必须通过将它们命名为“web_accessible_resources”来命名requirejs能够使用的文件，以便轻松地将它们全部放在一个文件夹中（例如js/），以便您可以使用通配符：

{
  "name": "My extension",
  ...
  "web_accessible_resources": [
     "js/*"
  ],
  ...
}

然后在您的脚本（例如 myscript.js）中使用 requirejs 只需使用 chrome.extension.getURL 请求依赖项，如下所示：

requirejs([chrome.extension.getURL('js/library')], function(library) {
     ...
}