google-chrome-extension - 所有类型的 Chrome 扩展脚本如何工作？

Question

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

以下是我的理解:

首先 - 有“内容脚本”，应该用于实际修改页面。

其次 - 有一个“后台脚本”，旨在像服务器一样工作，您可以从中发送和接收消息，但它不会修改页面的 DOM；因此它可以执行诸如处理存储和脚本之间的通信等任务，但不能修改页面。

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

最后，只有内容脚本才能最终实际修改页面。

我对么？

Answer 1

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

>> Architecture Overview <<

(艺术家印象)

它应该回答你的许多问题。但是，这将是一个糟糕的答案，所以我总结一下:

Background page/scripts : 每个分机只存在一页。它是不可见的，并且永远不会显示在选项卡中。通常，只要 Chrome 处于打开状态，它就会打开，但也有异常(exception)。由于它始终存在并且对 Chrome API 具有最高级别的访问权限，因此它经常用于扩展部分之间的主要逻辑/事件路由。简而言之，后台工作。

Event page/scripts : 如果没有代码运行，则卸载的背景页面的一种变体。这节省了内存，但在维护状态方面引入了复杂性。 Chrome 会记住应该监听哪些事件(通过 addListener )并在它们发生时再次加载页面。因此，事件页面。

除此之外，扩展程序可以有其他可见的页面。您可以在选项卡中打开它们(它们将具有 chrome-extension://extensionidgoeshere/page.html 地址)，它们将对 Chrome API 具有相同级别的访问权限。两种 UI 类型对于扩展来说是特殊的:

Browser/Page Action 弹窗:通过单击相应的 UI 元素打开的小窗口。不幸的是，它也非常脆弱——一旦失去焦点，它就会关闭。除此之外，它只是一个扩展页面。

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

最后，拥有一堆页面很有趣，但是如果您想与现有的页面/选项卡进行交互，则需要在其中注入(inject)脚本。

Content Scripts 是与页面一起运行的脚本；出于兼容性原因，它们 run in an isolated world .出于安全原因，他们在访问 Chrome API 方面受到严格限制。但是他们与页面共享 DOM，因此可以修改它。

页面级脚本 是您在文档中几乎找不到提到的东西(如 "DOM injected scripts" )，但它们对于打破扩展 JavaScript 和页面自己的 JavaScript 之间的障碍非常有用。 this answer 中提供了对它们的一个很好的概述。由宏伟的Rob W .

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

1 说真的，每个扩展开发新手都需要阅读它，而且这个页面并不突出文档。干得好，谷歌。