在开发过程中经常会遇到 background content_script 与popup三者间的通信
**下面介绍几种常见通信实例 **
1.content_script > background 多对一
content_script
chrome.runtime.sendMessage({saveurl:_url,savedata:data,msg:"save"}, function(response) {
if(response.status){
//成功
}else{
//失败
}
});
background
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.msg){
var msg = request.msg;
switch (msg){
case 'save':
//可在此做一些服务请求
ajax({
type:'post',
contentType: 'application/json; charset=utf-8',
url:request.saveurl,
data:request.adddata,
success:function(w){
if(w.code==200){
sendResponse({status:1,msg:"保存成功!"});
}else if(w.code == 401){
sendResponse({status:0,msg:"保存失败"});
}else{
sendResponse({status:0,msg:"保存失败"});
}
return true;
},
error: function(xhr,info,e,){
sendResponse({status:0,msg:e});//例如服务器内部错误 503等
})
//如果要用sendResponse 并在content_script接到响应值那么 return true 必须设定
return true;
break;
}
}
})
该场景可用于解决 content_script的服务协议问题,例如 https网站中的 http服务请求问题,可放置在background中发请求
2.background > content_script 一对多
background
//需由popup等传入tab id 指定id后与content_script通信
this.sendErrorInfo= function(tabs,errorinfo){//错误提示
chrome.tabs.sendMessage(tabs[0].id, {msg: "error_warn", errorInfo:errorinfo});
}
content_script
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
switch(request.msg) {
case 'error_warn':
sendResponse({status:0});
return true;
break;
}
}
);
注:个人开发实践仅供参考,有不足和意见建议请在文章下方评论,多多指正和交流