Chrome浏览器如何从页面的上下文中传递消息- Chrome浏览器从页面的上下文中传递消息的方法

栏目:谷歌浏览器教程   来源:chrome之家   发布时间:2022-06-08   更新时间:2022-07-25

Chrome extension是Web开发领域非常方便的工具。无论是使用它们向简单的请求添加头,还是从DOM获取重要的数据,扩展都可以帮助提供额外的功能,让生活变得更加轻松。我开始为我在工作中想到的用例开发Chrome浏览器扩展。这时我发现了我们将一些数据从网页传递到扩展程序的方法。缺乏简化的指南促使我写了这篇文章。

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如何从页面的上下文中传递消息 的全部内容了,大家都看懂了吗?更多精彩教程,请继续关注chrome之家!

原文链接:https://www.chromezj.com/course/878.html  转载请标明

chrome之家下载站,原版谷歌浏览器

轻松下载,快速安装,安全无毒,兼容所有

立即体验
返回顶部