Multiple JS files in Chrome Extension - how to load them?

Question

I've wrote a Chrome Extension. My background.js file is quite large, so I want to split it to smaller parts and load specified methods when required (some kind of lazy-loading).

I've done this with 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 ) 

Is there any possiblity to do it similar way in Webkit-based browsers? I've found solutions for how to inject multiple JS files into matching pages (using manifest.json) but cannot find way to include JS file just for extension.

Answer 1

UPDATE : This solution works only if you are using manifest V2.

You can also do this the extremely easy way that is described here: https://developer.chrome.com/extensions/background_pages#manifest

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

You won't be doing lazy loading, but it does allow you to break your code up into multiple files and specify the order in which they are loaded onto the background page.

Answer 2

If you want to load a javascript file in the context of your background page and want to avoid using eval, you can just add a script tag to your background page's DOM. For instance, this works if your files are present in the lib folder of your extension:

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); }