Chrome扩展程序中的多个JS文件 - 如何加载它们？

Question

我写了一个Chrome扩展程序.我的background.js文件非常大,所以我想将它拆分为较小的部分并在需要时加载指定的方法(某种延迟加载).

我用Firefox完成了这个:

// ( call for load specified lib )
var libPath = redExt.basePath + 'content/redExt/lib/' + redExt.browser + '/' + libName + '.js';
var service = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
service.loadSubScript("chrome://" + libPath);
// ( executing loaded file )

是否有可能在基于Webkit的浏览器中以类似的方式执行此操作？我找到了如何将多个JS文件注入匹配页面(使用manifest.json)的解决方案,但找不到包含JS文件的方法只是为了扩展.

Answer 1

您还可以通过此处描述的非常简单的方式执行此操作:https: //developer.chrome.com/extensions/background_pages#manifest

{
  "name": "My extension",
  ...
  "background": {
    "scripts": [
      "lib/fileone.js",
      "lib/filetwo.js",
      "background.js"
    ]
  },
  ...
}

您不会进行延迟加载,但它确实允许您将代码分解为多个文件并指定它们加载到后台页面的顺序.

Answer 2

如果要在后台页面的上下文中加载javascript文件并希望避免使用eval,可以只script在后台页面的DOM中添加标记.例如,如果您的文件存在于lib您的扩展程序的文件夹中,则此方法有效:

function loadScript(scriptName, callback) {
    var scriptEl = document.createElement('script');
    scriptEl.src = chrome.extension.getURL('lib/' + scriptName + '.js');
    scriptEl.addEventListener('load', callback, false);
    document.head.appendChild(scriptEl);
}

Answer 3

找到了可能的解决方案。有一个 RequireJS main 方法 require 的简单实现，它使用 JavaScript 回调跟踪来查找加载主扩展文件的事件，并与扩展上下文绑定执行它。 https://github.com/salsita/browser-require/blob/master/require.js

它似乎有效，但该解决方案有一些缺点：

• 错误报告在“第 1 行，第 1 列”中报告，因为此解决方案直接注入代码func.call- 调试非常困难
• 加载的 JS 文件没有出现在控制台/chromebug 中
• 如果当前选项卡使用 HTTPS，Chrome 将不允许评估脚本，尤其是来自本地上下文 ( file:///) 的脚本，因此有时它无法按预期工作