Chrome扩展程序中的RequireJS

Question

我正在构建Chrome扩展程序,为Wikipedia文章添加了一些JavaScript.据我所知,使用RequireJS的唯一方法是添加该行

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

但是,在我的Chrome扩展程序中,我无权访问HTML以添加此行.有什么建议？

Answer 1

您可以通过内容脚本从Chrome扩展程序访问页面的DOM ,但内容脚本只能访问内容脚本本身创建的JavaScript对象.

有许多方法可以包含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,也可以从Internet上的托管位置加载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

这是如何,你可以在后台页面中做到这一点.

在清单文件中:

"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>

请参阅此问题:使用Require.js而不使用data-main

您也可以使用此想法在内容页面中执行此操作.

顺便问一下好问题.我喜欢Adam Ayres的答案.