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

nhhxz33t  于 12个月前  发布在  Go
关注(0)|答案(6)|浏览(246)

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

2lpgd968

2lpgd9681#

更新:只有使用manifest V2时,此方案才有效。

你也可以用这里描述的非常简单的方法来做到这一点:https://developer.chrome.com/extensions/background_pages#manifest

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

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

zbq4xfa0

zbq4xfa02#

如果你想在你的背景页面上下文中加载一个JavaScript文件,并且想避免使用eval,你可以只在你的背景页面的DOM中添加一个script标签。例如,如果您的文件存在于扩展名的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);
}
g6ll5ycj

g6ll5ycj3#

也许你可以尝试使用Web Workers。在background.js中,包括:

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

Web worker可以产生新的worker,甚至有一个importScript(“new-script.js”)方法。
然而,Web工作者往往非常有限。查看here以获取有关Web workers的优秀文章。
我不知道他们是否会工作,然而。另一种选择是使用XMLHTTPRequest( AJAX )动态检索脚本并对其求值。然而,在非HTTPS连接上,这可能由于中间人攻击而被阻止。或者,您可以通过将以下内容添加到manifest.json来强制Chrome从非加密连接评估脚本(但不要这样做):

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

请参阅Load remote webpage in background page: Chrome Extension以获得对 AJAX 方法更深入的讨论。
所以你的选择似乎有限。
这当然会同时加载它们:

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

qzlgjiam4#

**manifest v3**变化很大

mdn : importScripts

importScripts('script-1.js','script-2.js');

我有一个有用的示例浏览器扩展,它使用了importScripts,该扩展允许使用本地消息传递协议从浏览器启动提升和非提升程序,请参阅github : simple-nativemessaging - example directory
左心室,右心室

var err;
  try{      
        importScripts('nmhost/ext-nmhost.js');            
  }
  catch(err2){
        err    = err2;
  }
  if(err){    //handle error        
        console.error(err);            
  }

关于这个主题的进一步阅读
chrome developers : Improve extension security
chrome developers : Migrate to a service worker

b1uwtaje

b1uwtaje5#

我所做的并不是延迟加载,而是当我的Chrome扩展图标被点击时,我会先加载一些文件。在我的例子中,我希望我的util文件在其他使用它们的人之前:

chrome.browserAction.onClicked.addListener(function() {
  chrome.tabs.executeScript(null, {file: "src/utils/utilFunction1.js"});
  chrome.tabs.executeScript(null, {file: "src/utils/utilFunction2.js"});
  chrome.tabs.executeScript(null, {file: "src/main.js"});
  chrome.tabs.executeScript(null, {file: "src/otherFeature.js"});
});
bmp9r5qi

bmp9r5qi6#

找到了可能的解决方案。这里有一个RequireJS主方法require的简单实现,它使用JavaScript回调跟踪来查找加载主扩展文件的事件,并将其与扩展上下文绑定执行。https://github.com/salsita/browser-require/blob/master/require.js
它似乎工作,但这个解决方案有几个缺点:

  • 错误报告在“第1行,第1列”中报告,因为此解决方案直接将代码注入func.call-调试非常困难
  • 加载的JS文件不会出现在console / chromebug中
  • 如果当前标签使用HTTPS,Chrome将不允许evaling脚本,特别是从本地上下文(file:///),所以有时它只是不按预期工作

相关问题