接上一篇，我们知道了如何定义chrome的各种入口和页面。那么如何处理页面和入口之间的通信。由于定义的页面和入口比较多，各个之间的沟通就显得尤为重要。这里只介绍contentscript、popup、options、serviceworker、devtools之间的通信。弹出到内容脚本弹出页面和内容脚本之间的通信非常简单。它可以用于popup.js.chrome.tabs.sendMessagechrome.tabs.sendMessage(tab_id,params,(ret)=>{console.log('callonce')console.log(ret)});只需在内容脚本中声明事件侦听器即可。如下。chrome.runtime.onMessage.addListener((event,sender,callable)=>{console.log('receivedamessagefrompopup')callable('sendamessagetopopup')})完成调用。当然你可以使用sender中的参数来制作事件有什么区别呢？对于结构，你可以阅读这篇文章。注意内容脚本中的监控都是监控。popuptoserviceworkerpopup-servicework也是通过上面的监听事件进行的。如下。首先监听background.js中的事件chrome.runtime.onMessage.addListener((event,sender,callable)=>{console.log(event)callable('Replytothemessage')})然后直接使用以下方法在popup.js中调用.chrome。runtime.sendMessage('调用一次后台',(ret)=>{console.log(ret)})这样就可以通过事件传递消息了。ServiceWorker内容的内容也和popup.js一样。直接使用铬。运行。发信息打电话。如下chrome.runtime.sendMessage('contentcalledonce',function(){console.log('callsucceeded')})devtools给serviceworker注意。由于devtools的特殊性，只能调用serviceworker。可以像popup一样调用。其他情况下，如果需要调用其他情况，比如devtools调用content中的内容，则需要中转。使用建立长链接的方法。首先，serviceworker保留长链接。如下.//background.jsvarlast_port=null;chrome.runtime.onConnect.addListener(function(port){last_port=port;})chrome.runtime.onMessage.addListener((event,sender,callable)=>{varcmd=event.cmd||''if(cmd=='to_content'){last_port.postMessage('callfromdevtools')}else{callable(event)}})content.js必须连接到serviceworker。如下varconnect=chrome.runtime.connect()connect.onMessage.addListener(function(msg){console.log('longlinkcall')console.log(msg)})最后修改panel.jschrome.runtime。sendMessage({'cmd':'to_content'},function(){console.log('调用成功')})完成调用。这种方法比较hacky。同样，其他的也可以这样处理。最后是演示代码
