Могу ли я поделиться кодом между различными частями Chrome Extension?

Question

Допустим, у меня есть функция:

var rand = function(n) {
    return Math.floor(Math.random() * n);
}

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

Спасибо.

Answer 1

Да. Вы можете иметь внешний файл JS, который загружается как часть фона и сценарий содержимого (как любой обычный файл JS). Просто добавьте его в фоновые массивы и массивы файлов сценария содержимого в манифесте, и он будет загружен для вас.

Например, если наша общая функция находится в sharedFunctions.js, скрипт содержания, использующий их, находится в mainContentScript.js и фоновый код в mainBackground.js (все в js подпапка) мы можем сделать что-то подобное в манифесте:

 "background": {
   "scripts": [ "js/sharedFunctions.js", "js/mainBackground.js" ]
 },

 "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["js/sharedFunctions.js", "js/mainContentScript.js"]
    }
 ]

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

Или вы можете также добавить его в качестве тега сценария (с относительным URL) в background.html и только в манифесте добавить его в массив JS сценария содержимого. Таким образом, манифест будет выглядеть так:

 "background": {
   "page": "background.html"
 },
 "content_scripts": [
     {
       "matches": ["*://*/*"],
       "js": ["js/sharedFunctions.js", "js/mainContentScript.js"]
     }
  ]

и файл background.html будет иметь следующий тег сценария:

 <script type="text/javascript" src="js/sharedFunctions.js"></script>

Изменить: Кроме того, для совместного использования с другими областями в других частях расширения (к сожалению, недоступно в скрипте содержимого).

Вы также можете использовать функции, которыми вы хотите поделиться, в фоновом скрипте и получать к ним доступ через chrome.runtime.getBackgroundPage() о котором вы можете прочитать больше здесь: https://developer.chrome.com/extensions/runtime

Итак, допустим, у вас есть rand() Функция, объявленная как глобальная переменная в фоновом скрипте (что означает, что это свойство объекта окна фона), вы можете сделать что-то подобное в начале скрипта в другой области (это может быть контекст всплывающего окна, такой как окно browserAction).):

var background, newRandomNumber;
chrome.runtime.getBackgroundPage(function(backgroundWindow){
 background = backgroundWindow;
 newRandomNumber = background.rand();
})

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

Answer 2

Да, вы можете, поместив его в отдельный файл JS и загрузив его в оба.

Скажи, у тебя есть файл utils.js которые содержат все такие функции.

Затем вы можете загрузить фоновую страницу следующим образом:

"background": {
  "scripts": [ "utils.js", "background.js" ]
},

И скрипт контента вот так:

"content_scripts": [
  {
    "matches": ["..."],
    "js": ["utils.js", "content.js"]
  }
],

Или, если вы используете программную инъекцию, объедините вызовы так:

chrome.tabs.executeScript(tabId, {file: "utils.js"}, function(){
  chrome.tabs.executeScript(tabId, {file: "content.js"}, yourActualCallback);
});