Chrome扩展及应用开发 入门笔记（五）消息机制

简介

Chrome提供了4个有关扩展页面间相互通信的接口，分别是

1.  runtime.sendMessage、runtime.onMessage（可以在content_scripts中运行，所以扩展的其他页面也可以同content_scripts相互通信）

2.  runtime.connect和runtime.onConnect（不可以在content_scripts中运行为更高级的接口，在http://developer.chrome.com/extensions/extension得到有关这两个接口的完整官方文档。）

runtime.sendMessage完整的方法为：

chrome.runtime.sendMessage(extensionId, message, options, callback)

其中extensionId为所发送消息的目标扩展，如果不指定这个值，则默认为发起此消息的扩展本身；

1. Content script 给 popup.js发消息(二者之间通信)

content.js

<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="javascript">function test() {
chrome.extension.sendMessage({cmd: "fromcontentscript"}, function (response) {
alert( "fromcontentscript");
if (response.frompopup) {
alert(response.frompopup);
}

});
}

popop.js

chrome.extension.onMessage.addListener(//直接接受popup发来的消息
function(request, sender, sendResponse) {
if (request.cmd == "fromcontentscript")
sendResponse({frompopup: "popup 接受到了来自contetn script的消息"})
else
sendResponse({frompopup: "不告诉你"})
});

注：  发送方的 cmd: "fromcontentscript" 与 接收方的  request.cmd == "fromcontentscript" 对应；
         发送发收到的消息回复response.frompopup 与 接收方的响应sendResponse({frompopup: "popup 接受到了来自contetn script的消息"})
对应

2. popup.js 给 Content script  发消息（二者之间通信）

popup.js

function clearRequest() {

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, {message:"clear"}, function(response) {// popup直接给contentscript发消息
if(response.result=="ok"){
//$('#localstorage').innerHTML="";
var p = document.getElementsByTagName("p");
p[0].innerHTML="";

}
});
});

}

content.js

chrome.extension.onMessage.addListener(//直接接受popup发来的消息
function(request, sender, sendResponse) {
if (request.message == "clear") {
test();
sendResponse({result: clearLocalStorage()})
}
else
sendResponse({result: "不告诉你"})
});

3.  Content script 给 popup.js发消息(通过background作为中转)

作用： content 使用消息 setNewsArr
将数据    newsArray ，  newsArrayCookie
传递给 popUp。

content.js

chrome.extension.sendMessage({cmd: "setNewsArr",'arr':newsArray,'arrCookie':newsArrayCookie},function(response) {
});

popup.js

chrome.extension.sendMessage({cmd: "getNewsArr"},function(response) {
if(response.arr){
var len=response.arr.length;
for(var i=0;i<len;i++){
$('body').append("<br>"+response.arr[i]+'<br>');
}
}
if(response.arrCookie){//localstorage
var lenCookie=response.arrCookie.length;

for(var i=0;i<lenCookie;i++){
$('#localstorage').append("<br>"+response.arrCookie[i]+'<br>');
}

}
});//

background.js 先将content发来的内容暂存，再将其转发给popup

$(document).ready(function(){
//getCurIp();
try{
g_newsArr=JSON.parse(''+localStorage['newsArr']);// background.html 页面的localStorage['newsArr']内容
g_newsArrCookie=JSON.parse(''+localStorage['newsArrCookie']);// background.html 页面的localStorage['newsArr']内容
g_setclearLocalStorage=localStorage['setclearLocalStorage'];
}catch(c){}
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if(request.cmd=='setNewsArr'){
console.log(request.arr)
g_newsArr=request.arr;
g_newsArrCookie=request.arrCookie;
//g_newsArr+="zpp";//
localStorage['newsArrCookie']=JSON.stringify(g_newsArrCookie);

localStorage['newsArr']=JSON.stringify(g_newsArr);

}else if(request.cmd=='getNewsArr'){
sendResponse({'arr':g_newsArr,'arrCookie':g_newsArrCookie});
}
})
});

参考：
http://blog.csdn.net/greatpresident/article/details/9052801

4. popup给background发消息

popop.js

chrome.runtime.sendMessage('Hello', function(response){
document.write(response);
});

background.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
if(message == 'Hello'){
sendResponse('Hello from background.');
}
});

结果 : 点击popup时，出现 Hello from background

ps:

1]   

chrome.runtime.sendMessage({cmd: "setNewsArr2"},function(response) {
chrome.extension.sendMessage({cmd: "setNewsArr"},function(response) {

给background 发消息；

background中可以相互使用接收消息

2]  消息分类

A :一次性消息（one-time requests）
从content script发送给background：
chrome.runtime.sendMessage({cmd: "mycmd"}, function(response) {  console.log(response); });

从background向content script发送消息：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {  chrome.tabs.sendMessage(tabs[0].id, {cmd: "mycmd"}, function(response) {    console.log(response);  }); });

接受消息时一致；

B: 长效消息（long-lived connections）是现在消息的收发双方建立通道，然后通过这个通道收发消息。
连接主动方：
var port = chrome.runtime.connect({name: "con1"}); port.postMessage({cmd:

C: 扩展间消息（cross-extension messages）是在不同的扩展之间收发消息。