Chrome浏览器扩展通过消息传递机制实现不同组件间的数据交换与通信,支持短时和长连接两种模式。
1、 此前多篇文章中,我们已陆续介绍了浏览器操作、后台页面以及内容脚本的相关内容。
2、 消息主要分为三类:一次性请求、长期连接和扩展间通信,对应文档中提到的 one-time requests、long-lived connections 和 cross-extension messages。这三种类型分别适用于不同场景,满足扩展程序在运行过程中与内容脚本或其他扩展进行数据交互的需求。
3、 一次性请求指仅执行一次的临时性消息操作。
4、 通过消息传递机制,内容脚本向后台脚本发送数据请求。
5、 通过背景页向内容脚本发送消息,实现跨域通信与数据传递。
6、 接收方编码
7、 });
8、 长效连接是指通信双方先建立稳定通道,之后通过该通道持续收发消息,实现高效、实时的信息交互。
9、 主动连接方
10、 });
11、 被动连接方
12、 });
13、 });
14、 扩展间消息是指在不同浏览器扩展程序之间相互传递信息的功能。
15、 官方文档中的代码示例如下所示
16、 调整前几节代码,展示一次性请求的实现机制。
17、 核心思路为:
18、 cs1.js获取新闻列表后,将其发送至background进行处理,background接收并存储于内部变量中。
19、 每次弹出窗口时,向后台获取已保存的列表数据并展示在弹出界面中。
20、 cs1.js发送新闻列表的相关代码如下
21、 }
22、 });
23、 在background.js中编写处理消息的逻辑代码
24、 }
25、 })
26、 在popup.js中获取新闻列表的代码实现
27、 }
28、 }
29、 });
30、 重新加载插件,访问CSDN首页,数秒后点击插件图标即可。
