Chrome扩展之通信

Chrome扩展通信

chrome扩展的5种js

Chrome插件提供的2种额外的通信方式

1. chrome.tabs.sendMessage和chrome.runtime.sendMessage 用于简单的一次性请求;
2. chrome.tabs.connect和chrome.runtime.connect，用于长时效连接。

通信接口使用限制

chrome.runtime.onMessageExternal 接口用于扩展间通信，与chrome.tabs.sendMessage 用法类似。

一次性请求

一次性请求类似于HTTP请求，包含一次请求和一次返回，且如果接收方不在线，就会出现请求失败；

扩展程序（popup、background）向content-script一次性通信

//popup.js发送
function sendToContentScript(message, callback){
   
	chrome.tabs.query({
   active: true, currentWindow: true}, tabs => {
   
		chrome.tabs.sendMessage(tabs[0].id, message, callback);
	});
}
sendToContentScript({
   cmd:'test', value:'popup_to_content'}, res => {
   
	console.log(res)   *// {res:'content_to_popup'}*
} );

// content_script.js接收
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   
	console.log(request)   *// {cmd:'test', value:'popup_to_content'}*
	if(request.cmd === 'content_to_bg'){
   
		sendResponse({
   res:'content_to_popup'})
	  // 若异步使用sendResponse，需添加return true*
	}
})

双方通信直接发送的都是JSON对象，不是JSON字符串，所以无需解析，很方便（当然也可以直接发送字符串）

content-script主动向扩展程序（background、popup）一次性通信

// content_script.js发送
chrome.runtime.sendMessage({
   cmd: 'test', value:'content_to_bg'}, res => {
   
	console.log(res);     //{res:'bg_to_content'}
});

// background.js接收
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   
	console.log(request);   // {cmd: 'test', value:'content_to_bg'}
	sendResponse({
   res:'bg_to_content'})
});

注意事项：

• content_scripts向popup主动发消息的前提是popup处于打开状态，否则需要利用background作中转；
• 使用chrome.runtime.sendMessage后无论是否需要回应，接收方都需调用sendReponse反馈，若不调用则发送方就会报错：
• 如果background和popup同时监听，那么它们都可以同时收到消息，但是只有一个可以sendResponse，一个先发送了，那么另外一个再发送就无效；

页面脚本（包括inject-script）和content-script之间一次性通信

由于inject-script和content-script内均可获取到原始页面的window对象，故可通过window.postMessage来进行通信。该方法还可规避跨域的限制,可以在任意页面之间进行通信。

//inject-script
window.postMessage({cmd:"test",value:"inject_to_content"},"*")

//content-script
window.addEventListener("message", e => {
	console.log(e.data)    //{cmd:"test",value:"inject_to_content"}
})

长时效连接

长连类似 WebSocket，建立连接后会一直保持，双方可以随时互发消息。

chrome.tabs.connect和chrome.runtime.connect 长时效连接通信示例

扩展程序和web页面之间建立长连接，只需要从一端建立就可以了。
在popup或js或background发起连接请求：

//popup.js或background.js 发起连接需要指定发送到某个标签页
chrome.tabs.query({
   active: true, currentWindow: true}, tabs => {
   
	const port = chrome.tabs.connect(tabs[0].id, {
   name: 'popup'});
	//向指定tabd页发起连接请求
	port.postMessage({
   cmd: 'popup-connect',value:'extension'});
	port.onMessage.addListener(msg => {
   
		if(msg.cmd === 'connected') {
   
			//do something
			port.postMessage({
   cmd: 'done'});
		}
	});
});

在content-script发起连接和监听消息：

// content-script直接建立长链接
const port = chrome.runtime.connect({
   name: 'content'});
port.postMessage({
   cmd: 'cnt-connect'});
port.onMessage.addListener(msg => {
   
	if(msg.cmd === 'connected'){
   
		//do something
		port.postMessage({
   cmd: 'done'});
	}
});

任意一端监听连接请求：

chrome.runtime.onConnect.addListener(port => {
   
	if(port.name == 'popup') {
   
		port.onMessage.addListener(msg => {
   
			if(msg.cmd== 'popup-connect') port.postMessage({
   cmd: 'connnected'});
		});
	}else if(port.name === 'content'){
   
		......
	}
});

postMessage和messageChannel 长时效连接通信

• 同一MessageChannel实例下的port1和port2两个对象可以通过postMessage和onmessage方法相互发送和接收消息;
• port1和port2是MessagePort实例，MessagePort继承了Transferable接口，可在不同可执行上下文之间传递。
• window.postMessage(message, targetOrigin, [transfer]),第三个参数可以用来传递Transferable对象

//inject-script
const {
   port1,port2} = new MessageChannel();
window.addEventListener("load", () => {
   
port1.onmessage = (e) => {
   
	console.log(e)
}
window.postMessage('来自inject_script的信息', '*', [port2]);
});

//content-script
window.addEventListener('message', e=>{
   
  e.port[0].postMessage('来自content-script的信息')
});