chrome插件教程4-处理页面和入口之间的通信
接上篇文章, 我们知道了如何定义chrome的各种入口和页面. 那如何来处理页面和入口之间的通信呢. 由于定义的页面和入口更多. 各种之间的通信尤为重要. 这里只介绍content script,popup, options, service worker, devtools之间的通信.
popup to content script
popup页面到content script之间通信很简单. 可以在popup.js中使用.chrome.tabs.sendMessage
chrome.tabs.sendMessage(tab_id, params, (ret) => {
console.log('调用一次')
console.log(ret)
});
在content script中声明事件监听就可以了. 如下.
chrome.runtime.onMessage.addListener((event, sender, callable) => {
console.log('收到popup的消息')
callable('给popup发一次消息')
})这样就完成调用了. 当然. 你可以通过sender里面的参数来进行区别是什么事件. 结构的话可以看这篇文章. 注意content script里面的监听是所有的监听.
popup to service worker
popup-servicework也是通过上面的监听事件来进行. 如下. 首先在background.js中监听事件
chrome.runtime.onMessage.addListener((event, sender, callable) => {
console.log(event)
callable('回复一下消息')
})然后在popup.js里面直接使用如下的方式即可调用.
chrome.runtime.sendMessage('调用后台一次', (ret) => {
console.log(ret)
})这样就能通过事件来进行消息传递了.
content to service worker
content也是如同popup.js一样. 直接使用chrome.runtime.sendMessage来进行调用. 如下
chrome.runtime.sendMessage('content调用一次', function() {
console.log('调用成功')
})devtools to service worker
注意. 由于devtools的特殊性. 只能调用service worker. 可以通过同popup一样的方式来进行调用.
其他情况
如果需要调用其他的情况, 例如devtools调用content里面的内容. 则需要进行中转. 使用建立长链接的方式. 首先. service worker的保留长链接. 如下.
// background.js
var last_port = null;
chrome.runtime.onConnect.addListener(function(port) {
last_port = port;
})chrome.runtime.onMessage.addListener((event, sender, callable) => {
var cmd = event.cmd || ''if(cmd == 'to_content') {
last_port.postMessage('来自devtools的调用')
}else{
callable(event)
}
})content.js得连接service worker. 如下
var connect = chrome.runtime.connect()connect.onMessage.addListener(function(msg) {
console.log('长链接调用')
console.log(msg)
})最后. 修改panel.js
chrome.runtime.sendMessage({'cmd': 'to_content'}, function() {
console.log('调用成功')
})即可完成调用. 这种方式比较hack. 同理，其他也是可以通过这种方式进行处理的.
最后
【chrome插件教程4-处理页面和入口之间的通信】演示代码
推荐阅读
- 2.6|2.6 Photoshop操作步骤的撤消和重做 [Ps教程]
- Mac安装Chromedriver
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- jQuery插件
- VueX--VUE核心插件
- www和https://又被Chrome地址栏隐藏了
- 用npm发布一个包的教程并编写一个vue的插件发布
- 20180322【w4复盘日志】
- 狗狗定点大小便视频教程下载地址
- SwiftUI|SwiftUI iOS 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)