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

保护者一

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

马克·博内利

实际情况并非如此:内容脚本无法与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.jsscript1.js
  • 等等...

澄清说明

当Google文档说

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

这意味着

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

但是

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Perl脚本中重复使用提示代码

来自分类Dev

如何在PowerShell脚本中重复使用/导入脚本代码?

来自分类Dev

如何在多个实例中重复使用此代码?

来自分类Dev

在注入的脚本和Google Chrome扩展程序代码/内容脚本之间传递消息的最安全方法是什么?

来自分类Dev

Chrome扩展程序内容脚本未触发代码

来自分类Dev

Chrome扩展程序内容脚本未触发代码

来自分类Dev

并非始终创建Chrome扩展程序通知-是否要重复使用?

来自分类Dev

如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

来自分类Dev

如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

来自分类Dev

如何使此代码可重复使用

来自分类Dev

如何自动测试Chrome扩展程序中的内容脚本?

来自分类Dev

Chrome扩展程序:如何全局捕获/处理内容脚本错误?

来自分类Dev

如何选择何时启动Chrome扩展程序的内容脚本?

来自分类Dev

如何取消Chrome扩展程序内容脚本中的事件绑定?

来自分类Dev

使用背景页面和内容脚本的Chrome扩展程序

来自分类Dev

在chrome扩展程序中,如何使用内容脚本注入Vue页面

来自分类Dev

如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

来自分类Dev

如何使用Chrome扩展程序(内容脚本)覆盖拖动事件侦听器?

来自分类Dev

如何在chrome扩展内容脚本中确定CSS范围

来自分类Dev

Chrome扩展程序中内容脚本和弹出脚本之间的消息传递

来自分类Dev

如何在SwiftUI中集成函数,以便使用输入字典创建可重复使用的代码

来自分类Dev

如何在xaml中创建可重复使用的窗口内容?

来自分类Dev

如何在Jenkins Groovy Post Build插件中重复使用groovy脚本?

来自分类Dev

JS范围问题:如何在此脚本中重复使用位置数据?

来自分类Dev

在Chrome扩展程序中停止内容脚本

来自分类Dev

如何在Chrome扩展程序中从localstorage读写div的内容?

来自分类Dev

如何在Chrome扩展程序中从localstorage读写div的内容?

来自分类Dev

如何使用Chrome扩展内容脚本中的Dropbox API?

来自分类Dev

如何在Chrome扩展程序中动态运行后台脚本?

Related 相关文章

  1. 1

    如何在Perl脚本中重复使用提示代码

  2. 2

    如何在PowerShell脚本中重复使用/导入脚本代码?

  3. 3

    如何在多个实例中重复使用此代码?

  4. 4

    在注入的脚本和Google Chrome扩展程序代码/内容脚本之间传递消息的最安全方法是什么?

  5. 5

    Chrome扩展程序内容脚本未触发代码

  6. 6

    Chrome扩展程序内容脚本未触发代码

  7. 7

    并非始终创建Chrome扩展程序通知-是否要重复使用?

  8. 8

    如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

  9. 9

    如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

  10. 10

    如何使此代码可重复使用

  11. 11

    如何自动测试Chrome扩展程序中的内容脚本?

  12. 12

    Chrome扩展程序:如何全局捕获/处理内容脚本错误?

  13. 13

    如何选择何时启动Chrome扩展程序的内容脚本?

  14. 14

    如何取消Chrome扩展程序内容脚本中的事件绑定?

  15. 15

    使用背景页面和内容脚本的Chrome扩展程序

  16. 16

    在chrome扩展程序中,如何使用内容脚本注入Vue页面

  17. 17

    如何使用Chrome扩展程序内容脚本将具有相同域的多个网站进行匹配

  18. 18

    如何使用Chrome扩展程序(内容脚本)覆盖拖动事件侦听器?

  19. 19

    如何在chrome扩展内容脚本中确定CSS范围

  20. 20

    Chrome扩展程序中内容脚本和弹出脚本之间的消息传递

  21. 21

    如何在SwiftUI中集成函数,以便使用输入字典创建可重复使用的代码

  22. 22

    如何在xaml中创建可重复使用的窗口内容?

  23. 23

    如何在Jenkins Groovy Post Build插件中重复使用groovy脚本?

  24. 24

    JS范围问题:如何在此脚本中重复使用位置数据?

  25. 25

    在Chrome扩展程序中停止内容脚本

  26. 26

    如何在Chrome扩展程序中从localstorage读写div的内容?

  27. 27

    如何在Chrome扩展程序中从localstorage读写div的内容?

  28. 28

    如何使用Chrome扩展内容脚本中的Dropbox API?

  29. 29

    如何在Chrome扩展程序中动态运行后台脚本?

热门标签

归档