所有类型的Chrome扩展程序如何运作?

Gil*_*ger 7 google-chrome-extension

我是Chrome扩展程序的新手,想了解所有类型的脚本/页面是如何工作的.

这是我的理解:

首先 - 有"内容脚本",应该用于实际修改页面.

第二 - 有一个"后台脚本",设计用作发送和接收消息的服务器,但它不会修改页面的DOM; 因此它可以执行诸如处理存储和脚本之间的通信但不修改页面之类的任务.

最后 - 有"弹出脚本",它们与内容脚本和后台脚本分开,但您仍然可以在它们之间发送/接收消息.
弹出脚本不能直接修改页面(与后台脚本相同),它们只能向其他两个发送消息.
你根本不在清单文件中声明它们,你可以直接在弹出的html文件中使用它们.

最后,只有内容脚本最终才能真正修改页面.

我对么?

Xan*_*Xan 12

一个Chrome扩展文档链接来统治它们,一个链接找到它们,
一个链接将它们全部带到黑暗中bind()它们1:

>>架构概述<<

(艺术家的印象) (艺术家的印象)

它应该回答你的许多问题.但是,这将是一个糟糕的SO答案,所以我的摘要:

后台页面/脚本:每个扩展名仅存在一个页面.它是不可见的,永远不会显示在选项卡中.通常情况下,只要Chrome处于打开状态,它就会打开,但也有例外情况.由于它始终存在并且具有最高级别的Chrome API访问权限,因此它经常用于扩展部分之间的主要逻辑/事件路由.总之,后台工作.

事件页面/脚本:如果没有代码在运行,则会卸载后台页面的变体.这节省了内存,但引入了维护状态的复杂性.Chrome会记住应该收听哪些事件(通过addListener)并在页面发生时再次加载页面.因此,事件页面.

除此之外,扩展可以有其他可见的页面.您只需在标签中打开它们(它们就会有chrome-extension://extensionidgoeshere/page.html地址),并且它们对Chrome API具有相同级别的访问权限.两种UI类型特别适用于扩展:

浏览器/页面操作弹出窗口:通过单击相应的UI元素打开的小窗口.不幸的是,它也非常脆弱 - 它一旦失去焦点就会关闭.除此之外,它只是一个扩展页面.

选项页面:有两种口味.版本1选项页面只是在调用扩展选项时打开的选项卡; 版本2选项页面可以选择显示在内部的特殊框中chrome://extensions/.同样,除此之外,它只是一个具有扩展权限的页面.

最后,拥有一堆页面很有趣,但如果你想与现有的页面/标签进行交互,你需要在其中注入脚本.

内容脚本是与页面一起运行的脚本; 出于兼容性原因,它们运行在一个孤立的世界.出于安全原因,他们在访问Chrome API方面受到严重限制.但是他们与页面共享DOM,因此可以修改它.

页面级脚本是您在文档中几乎找不到的(作为"DOM注入脚本"),但它们对于扩展扩展JavaScript和页面自己的JavaScript之间的屏障非常有用.宏伟的Rob W这个答案中给出了一个很好的概述.

定义了所有相关的扩展部分后,文档页面还简要提到了如何在它们之间进行通信.有关此方面的更深入了解,请参阅此答案(再次由Rob W提供)和Messaging文档.


1严肃地说,每个开始的扩展开发人员都需要阅读它,而且这个页面并不突出文档.干得好,谷歌.

  • @Utkanos是的,这是可能的.内容脚本需要注册chrome.runtime.onMessage.addListener,弹出脚本需要向chrome.tabs.sendMessage(currentTabID ...)发送消息 (2认同)