我可以在Chrome扩展的不同部分之间共享代码吗？ [英] Can I share code between different parts of Chrome Extension?

问题描述

假设我有一个函数：

  var rand = function（n）{
 return Math。 floor（Math.random（）* n）; 
} 
  

我可以在不使用copypaste的情况下在Content Script和Background Script中使用此函数吗？

谢谢。

解决方案

是的。
您可以拥有一个外部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 / javascriptsrc = JS / sharedFunctions.js >< /脚本> 
  

编辑：另外，为了与其他范围的其他部分扩展名（不幸的是，在内容脚本中不可用）。

您也可以将要共享的函数驻留在后台脚本中，并通过 chrome.runtime.getBackgroundPage（）您可以在这里阅读更多信息：
https://developer.chrome.com/extensions/runtime#method-getBackgroundPage

所以，假设你有 rand（）函数在后台脚本中声明为全局变量（这意味着它是后台窗口对象的属性），您可以在其他范围的脚本开始时执行此类操作这可以是一个类似于browserAction窗口的弹出上下文）：

  var background，newRandomNumber; 
 chrome.runtime.getBackgroundPage（function（backgroundWindow）{
 background = backgroundWindow; 
 newRandomNumber = background.rand（）; 
}）
  

通过这种方式，您还可以使用变量 background 来访问设置的任何属性或方法背景的窗口对象。请注意，此函数异步运行，这意味着只有在调用回调后才会定义变量background和newRandomNumber。

Let's say, I have a function:

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

Can I use this function in both Content Script and Background Script without copypaste?

Thank you.

解决方案

Yes. You could have an external JS file which is loaded as part of the background and the content script (like any normal JS file). Just add it to the background and content script file arrays in the manifest and it will be loaded for you.

For example if our shared function reside in sharedFunctions.js, the content script using them is in mainContentScript.js and the background code in mainBackground.js (all in the js subfolder) we can do something like this in the manifest:

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

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

Note: Make sure to load it in the right order, before other files using it.

Or you can also add it as a script tag (with a relative URL) in the background.html and in the manifest only add it to the content script's JS array. So the manifest will look like:

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

and the background.html file will have this script tag:

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

Edit: Also, For sharing with other scopes in other parts of the extension (unfortunately not available in the content script).

You can also have the functions you want to share reside in the background script and reach them via chrome.runtime.getBackgroundPage() which you can read more about here: https://developer.chrome.com/extensions/runtime#method-getBackgroundPage

So, let's say you have your rand() function declared as a global variable in the background script (which means it's a property on the background's window object), you can do something of this sort at the beginning the script in the other scope (this can be a popup context like a browserAction window):

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

This way you can also use the variable background to access any property or method set on the background's window object. Be mindful, that this function runs asynchrounusly, meaning that only after the callback is called will the variables background and newRandomNumber will be defined.

这篇关于我可以在Chrome扩展的不同部分之间共享代码吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！