关于chrome: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.jsvar 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. 同理，其余也是能够通过这种形式进行解决的.

最初

演示代码