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

Скажем, у меня есть функция:

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

Могу ли я использовать эту функцию как в содержании Script, так и в Background Script без copypaste?

Спасибо.

Ответ 1

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

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

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

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

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

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

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

а файл background.html будет иметь этот тег script:

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

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

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

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

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

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

Ответ 2

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

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

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

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

И содержимое script выглядит следующим образом:

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

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

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