耳机|Chrome插件开发消息通信注入脚本和后台之间的通信

耳机|Chrome插件开发消息通信注入脚本和后台之间的通信

文章图片

耳机|Chrome插件开发消息通信注入脚本和后台之间的通信

文章图片

耳机|Chrome插件开发消息通信注入脚本和后台之间的通信

文章图片

耳机|Chrome插件开发消息通信注入脚本和后台之间的通信

最近在学习插件开发过程中经常需要后台当做一个中转站 , 对当前页面进行注入不同的脚本 , 或者别的需求 。
在MDN和百度了一些资料还是找到了超级简单的方式 。
注入脚本发送API chrome.runtime.sendMessage首先MDN中可以查到相关扩展发送信息的函数=》runtime.sendMessage()
但是啊还是要去查ChromeAPI , 因为实际操作后发现和MDN中的还是不一样的 。
这是个专门在插件中发送信息的函数 , 有4个参数 。

1 可选项 , 可以发送给其他扩展程序 , 需要提供其他扩展程序的id(可以在插件管理面板中进行查看)

2 消息
3 其他设置 , 暂时用不到
3 回调函数 , 用来接收response的
需要注意的是 , 这个chrome.runtime.sendMessage只能用于注入脚本向后台发送 , 那么后台如何发送信息给注入脚本以及如何接收信息呢?
接收监听器 chrome.runtime.onMessage.addListener在Chrome官方文档中也提供了接收消息的api , 而且不管是后台发送给注入脚本的 , 还是注入脚本发送给后台的所用的都是一个监听事件 。

chrome.runtime.onMessage.addListener只需要一个回调函数就行 , 但是这个函数必须有三个参数 。
1 消息 , 用于接收消息

2 一个对象 , 包含关于发送消息或请求的脚本上下文的信息
3 response 这个需要用到是接收者对请求者的反应
后台发送消息 chrome.tabs.sendMessage为啥后台发送给页面和注入脚本发送给后台的函数不一样呢 , 这是因为一个插件只有一个后台啊 , 但是需要对指定的页面做出反应肯定需要tabs的api啊!!

当然基本上和注入脚本的chrome.runtime.sendMessage也没啥区别啊 , 就是把插件号可选项改成了页面号必选项 。
我们可以使用chrome.tabs.query选择出当前页面的id , 现在所有需要的函数都已经准备完成了 。
实际操作
注入脚本:


后台脚本:

效果:
【耳机|Chrome插件开发消息通信注入脚本和后台之间的通信】