如何在Chrome扩展程序的内容脚本之间重复使用代码？

Question

我正在开发具有许多内容脚本的Chrome扩展程序。它们大多数使用相同的功能，因此我想在内容脚本之间共享这些功能。但是我似乎不知道该怎么做。
内容脚本是沙盒化的，因此无法访问同一window对象。似乎应该有一个明显的解决方案，但我一直找不到。

Answer 1

实际情况并非如此：内容脚本无法与window加载它们的页面对象进行交互，但是它们共享相同的隐藏window对象。因此，如果将两个不同的内容脚本加载到同一页面中，则两个内容脚本都将使用相同的隐藏window内容。

这是一个示例，请自己尝试，然后执行以下操作：

• 样本manifest.json：

  {
      "manifest_version": 2,
  
      "name": "My extension",
      "permissions": ["*://*/*"],
  
      ...,    
  
      "content_scripts": [
          {
            "matches": ["*://*/*"],
            "js": ["one.js", "two.js"]
          }
      ]
  }
  

• one.js具有以下功能的脚本：

  function sayHello(name) {
      alert("Hello " + name + "!");
  }
  

• two.js使用该功能的脚本：

  sayHello('John');
  

这里会发生什么？

这很容易告诉：

1. 加载页面时，将注入内容脚本
2. 该one.js脚本注入第一和定义sayHello功能
3. 现在two.js，注入的其他任何内容脚本one.js都可以使用该功能
4. 呼叫sayHello('John');将提醒“约翰你好！” 如预期的那样。

这就是为什么大多数开发人员（我也是）喜欢做这样的事情的原因：

"content_scripts": [
    {
      "matches": ["*://*/*"]
      "js": ["jquery.min.js", "script.js"]
    }
]

因为这是包括jQuery并将其与内容脚本一起使用的简便方法。

显然，window即使内容脚本是使用chrome.tabs.executeScript()功能从后台页面注入的，它们也将共享同一对象。

要回答您的问题：

您可以轻松地创建一个包含所有实用程序和最常用功能的脚本，因此您将随时准备在第一个脚本之后注入的任何其他内容脚本中使用它们。

所以，基本上，做这样的事情：

"content_scripts": [
    {
      "matches": ["*://*/*"]
      "js": ["script1.js", "script2.js", "script3.js", ...]
    }
]

意思是：

• script1.js 被注射
• script2.js 被注入并继承 script1.js
• script3.js注入和继承的命名空间script2.js和script1.js
• 等等...

澄清说明

当Google文档说：

内容脚本在称为隔离世界的特殊环境中执行。他们有权访问所注入页面的DOM，但不能访问该页面创建的任何JavaScript变量或函数。看起来每个内容脚本都好像在其上运行的页面上没有其他JavaScript在执行。反之亦然：在页面上运行的JavaScript无法调用任何函数或访问由内容脚本定义的任何变量。

这意味着：

• 内容脚本不能与它们注入到的页面的名称空间进行交互。
• 内容脚本不能与另一个扩展名在同一页面中注入的内容脚本的名称空间进行交互。

但是：

• 他们可以与页面的DOM进行交互。
• 它们可以与通过相同扩展名注入到同一页面上的其他内容脚本的名称空间进行交互。