Несколько JS-файлов в Chrome Extension - как их загрузить?

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) 

Есть ли Possiblity делать это подобным образом в Webkit на основе браузеров? Я нашел решения о том, как добавлять несколько JS-файлов в соответствующие страницы (используя manifest.json), но не может найти способ включить JS-файл только для расширения.

Answer 1

Найдено возможное решение. Theres простая реализация основного метода RequireJS, который использует трассировку обратного вызова JavaScript для поиска события для загрузки основного файла расширения, а binds выполняет его с расширением контекста. https://github.com/salsita/browser-require/blob/master/require.js

Это похоже на работу, но это решение имеет несколько минусов:

• сообщение об ошибках приведено в «строке 1, столбец 1», так как это решение вводит код непосредственно в func.call - отладка очень трудно
• Loaded JS файлы не отображаются в консоли/chromebug
• Если текущая вкладка использует HTTPS Chrome запретит evaling скриптов, особенно это из локального контекста (file:///), так что иногда просто не работают, как ожидалось

Answer 2

Возможно, вы можете попытаться использовать веб-работников. В вашем background.js, включают в себя:

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

веб-работники могут порождать новые рабочие, и даже есть метод importScript ("новый-script.js").

Работники веб-сайтов могут иметь тенденцию быть очень ограниченными. Проверьте here за отличную статью о веб-работниках.

Я не знаю, будут ли они работать. Другой вариант использует XMLHTTPRequest (AJAX) для динамического извлечения сценария и оценки его. Однако через соединение, отличное от HTTPS, это, вероятно, заблокировано из-за нападений «человек в середине». В качестве альтернативы, вы можете заставить Chrome для Eval сценария из незашифрованного соединения (НО НЕ DO IT), добавив в manifest.json:

"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 
    }, 
    ... 
} 

Answer 3

Если вы хотите загрузить 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 4

Вы также можете сделать это чрезвычайно простой способ, который описан здесь: https://developer.chrome.com/extensions/background_pages#manifest

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

Вы выиграли не делайте ленивой загрузки, но это позволяет вам разбить код на несколько файлов и указать порядок, в котором они загружены на фоновую страницу.