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

Я написал расширение Chrome. Мое прошлое.файл 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 файл только для расширения.

19
browser-extension google-chrome google-chrome-extension javascript

4 ответов

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

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

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

24

если вы хотите загрузить файл javascript в контексте фоновой страницы и хотите избежать использования eval, вы можете просто добавить script тег к DOM вашей фоновой страницы. Например, это работает, если ваши файлы присутствуют в расширения:

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

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

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

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

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

Я не знаю, будут ли они работать, однако. Другой вариант - использовать XMLHTTPRequest (AJAX) для динамического извлечения скрипта и его оценки. Свыше однако соединение без HTTPS, вероятно, заблокировано из-за атак "человек в середине". Кроме того, вы можете заставить Chrome использовать скрипт eval из незашифрованного соединения (но не делайте этого), добавив это в manifest.json:

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

посмотреть загрузить удаленную веб-страницу в фоновом режиме: расширение Chrome для более глубокого обсуждения метода AJAX.

таким образом, ваши варианты, похоже, ограничены.

Это, конечно, загружает их всех на после:

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

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

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

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