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. 同理，其他也是可以通过这种方式进行处理的.

最后

演示代码