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

时间:2014-10-07 16:07:48

标签: javascript google-chrome-extension

我正在处理包含许多内容脚本的Chrome扩展程序。他们中的大多数使用相同的功能,所以我想在内容脚本之间共享这些功能;但我似乎无法弄明白该怎么做 内容脚本是沙箱,因此无法访问相同的window对象。似乎应该有一个明显的解决方案,但我还没有找到它。

1 个答案:

答案 0 :(得分:4)

实际上并非如此:内容脚本无法与加载它们的页面的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');会提醒"你好约翰!"正如所料。
  5. 这就是为什么大多数开发人员(我也喜欢)喜欢做这样的事情:

    "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.jsscript1.js
    • 的命名空间
    • 等......

    澄清

    Google文档说明

      

    内容脚本在称为孤立世界的特殊环境中执行。他们可以访问注入页面的DOM,但不能访问页面创建的任何JavaScript变量或函数。它将每个内容脚本视为在其运行的页面上没有执行其他JavaScript。反过来也是如此:页面上运行的JavaScript无法调用任何函数或访问内容脚本定义的任何变量。

    这意味着

    • 内容脚本无法与注入页面的命名空间进行交互。
    • 内容脚本无法与另一个扩展程序在同一页面中注入的内容脚本的命名空间进行交互。

    <强>但是

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