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

最初

演示代码