Chrome extension是Web开发领域非常方便的工具。无论是使用它们向简单的请求添加头，还是从DOM获取重要的数据，扩展都可以帮助提供额外的功能，让生活变得更加轻松。我开始为我在工作中想到的用例开发Chrome浏览器扩展。这时我发现了我们将一些数据从网页传递到扩展程序的方法。缺乏简化的指南促使我写了这篇文章。
我们确实有Chrome API文档，而且确实非常详细。但我认为我更多的是一个视觉学习者，能够可视化我们如何在扩展脚本之间传递消息有助于简化整体开发。
消息传递:脚本之间的交互
顾名思义，扩展就像是您试图访问的现有网页上的一个层。浏览器就像一个容器。
主要包括以下脚本
弹出脚本——扩展DOM的本地JavaScript文件
后台脚本——提供持久性并处理后台事件。
脚本-在网页环境中独立运行的脚本。
注入脚本——以编程方式注入网页的脚本。
一般如果只需要处理DOM内容，开发扩展相对简单。
脚本已经可以使用原来的HTML了，你只需要把它传递给弹出脚本就可以了。
但是，如果您需要访问页面的变量和函数，这个过程可能会很棘手。
内容脚本无法访问页面上下文中可用的变量和函数，例如window对象，因为它们往往运行在特殊的JavaScript环境中。他们只能访问页面的DOM，不能访问变量和函数。
为了访问页面的变量和函数，我们通过将脚本附加到DOM来注入脚本。这使得浏览器假定它运行在网页的上下文中。这反过来提供了对局部变量和函数的注入脚本访问。
由于Chrome扩展的架构是事件驱动的，一旦注入的脚本可以访问页面的变量和函数，它们就可以将它们传递给内容脚本。
然后，脚本将这些对象传递给后台页面。
最后，弹出脚本可以使用扩展API调用后台页面，并将其传递给扩展DOM。
现在，我们将构建一个简单的性能观察器扩展，它从页面的全局窗口对象读取性能数据，并映射基本指标供用户查看。那么让我们进入代码。
每个Chrome扩展都需要一个清单文件。它基本上是一个JSON格式的文件，提供了一组元数据，这样浏览器就可以识别需要被授予的权限以及扩展可能的操作范围。
这是我们申请的列表。
需要注意的一些重要属性如下
后台-获取将在后台页面运行的脚本数组。
Content-scripts-包括一系列我们希望作为web页面上下文的一部分运行的内容脚本。
web _ accessible _ resources——一组打包的资源，预计将在网页的上下文中使用。例如，我们打算在页面中嵌入一个图像或者要注入的自定义脚本。
权限——在这种情况下，允许你的扩展访问某些Chrome API，比如标签。
内容脚本
脚本可以很容易地访问网页的DOM。我们使用内容脚本将自定义脚本inject-script.js添加到DOM中。
同时，脚本继续监听自定义脚本向上游发送的任何消息。
一旦我们收到来自注入脚本的消息，我们将快速检查收到的数据，并验证我们的扩展是否已安装。之后，我们只需要使用Chrome的运行时API将接收到的数据转发到后台页面即可。
注射脚本
窗口脚本可以像访问对象一样访问全局变量和函数。我们只映射我们需要的属性。
使用此窗口，来自自定义脚本的消息被安全地传递到内容脚本。在这种情况下，setInterval函数用于动态更新我们正在观察的属性。
背景脚本
后台脚本使用运行时API来监听由内容脚本传输的任何消息。然后以充当标识符窗口的方式更新背景页面的对象。
弹出脚本
弹出脚本是我们最终从自定义脚本中读取数据的地方。它也是我们编写任何必要的JavaScript操作的地方。
GetBackgroundPage使用扩展的API方法来检索背景页。使用Tabs API的方法查询活动页签的id tabs.query，以便正确提取相关数据。
这样，我们最终可以有效地接收和映射扩展中需要的数据(在我们的例子中)。
存储库中提供了UI样式和其他修饰代码，以供进一步参考。
以上就是关于Chrome如何从页面的上下文中传递消息 的全部内容了，大家都看懂了吗？更多精彩教程，请继续关注本站其他内容！
免费浏览器
