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

问题描述 投票:22回答:5

我写了一个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文件的方法。

javascript google-chrome google-chrome-extension browser-extension
5个回答
28
投票

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

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

您将不会进行延迟加载,但是可以将代码分成多个文件,并指定将它们加载到后台页面的顺序。


16
投票

[如果您想在背景页面的上下文中加载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);
}

2
投票

也许您可以尝试使用网络工作者。在您的background.js中,包括:

var worker = new Worker('new-script.js');

Web worker可以产生新的worker,甚至可以使用importScript(“ new-script.js”)方法。

但是,网络工作者往往非常有限。在here中找到有关Web worker的精彩文章。

但是,我不知道它们是否会起作用。另一个选项是使用XMLHTTPRequest(AJAX)动态检索脚本并进行评估。但是,在非HTTPS连接上,这可能由于中间人攻击而被阻止。另外,您也可以通过将Chrome浏览器添加到manifest.json,将其从非加密连接强制转换为评估脚本(但不要这样做):

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": ["http://badpractic.es/insecure.js"]

有关AJAX方法的更深入讨论,请参见Load remote webpage in background page: Chrome Extension。>>

所以您的选择似乎受到限制。

这当然可以一次全部加载它们:

{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js","background2.js","background3.js"] //and so on
  },
  ...
}

1
投票

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


0
投票

我所做的不是延迟加载,而是在单击chrome扩展名图标后,我先加载了一些文件。就我而言,我希望我的效用文件先于其他利用它们的人:

© www.soinside.com 2019 - 2024. All rights reserved.