Chrome 消息传递机制
Chrome插件开发入门（二）——消息传递机制
由于插件的js运行环境有区别，所以消息传递机制是一个重要内容。阅读了很多博文，大家已经说得很清楚了，直接转一篇@姬小光 的博文，总结的挺好。后面附一个自己写过的demo，基本就对消息传递能够熟悉了。
在开发 Chrome 扩展时经常需要在页面之间进行通讯，比如 background 与 content script 之间，background 与 popup 之间等等，本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现。
一般情况下，我们会让 background 来控制一切，将扩展的主要逻辑都放在 background 中比较便于管理。其它页面可以通过消息传递的机制与 background 进行通讯。
理论上 content script 与 popup 之间也可以传递消息，但不建议这么做。
对于 background 和 popup 之间，其实可以直接相互调用对方的方法，也不需要消息传递。那么消息传递其实主要就是 content script 和 background 之间进行的了。
在 Chrome 扩展内部的消息传递分为两种，一种是单次的消息请求，另外一种是长连接。下面详细举例说明。
简单的单次请求（Simple one-time requests）
如果只是想简单的给扩展的其它页面发送一次消息，那么可以使用 runtime.sendMessage 或者 tabs.sendMessage 方法，它允许你发送单次的JSON序列化后的数据，可以从 content script 发送给扩展页面，反之亦然。也可以选择性地传入一个处理响应的回调函数。
从 content script 发送请求代码如下：
contentscript.js
================
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});从扩展页面发送给 content script 也很类似，只是需要指定发送给那个 tab，下面的例子即为向选中的 tab 发送消息：
background.html
===============
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});注：官方例子中的 getSelected 方法已经被废弃了，可以使用 chrome.tabs.query({active:true}, function(tab) {}) 来替代。
在消息接收完毕时，需要设置一个 runtime.onMessage 事件监听器来处理消息，这部分在 content script 和扩展页面种都是一样的：
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});注意：如果有多个页面同时监听 onMessage 事件，那么只有第一个调用 sendResponse() 的页面可以成功返回响应信息，其它的都会被忽略。
小技巧：当事件监听器返回时函数就不可用了，不过如果让函数 return: true 的话，可以让该函数异步响应，直到调用 sendResponse 后才结束，具体说明请见文档。
长连接（Long-lived connections）
有时候我们需要在 content script 和扩展页面之间保持一个长期的通讯信道，那么你可以分别使用 runtime.connect 和 tabs.connect 来建立长连接信道。可以选择性地给信道命名，方便你区分不同类型的连接。
每个连接建立完成后都会返回一个 runtime.Port 对象，用来在连接之间发送和接收消息。
下面的例子展示了如何从 content script 建立连接，并发送和接收消息：
contentscript.js
================
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
if (msg.question == "Who's there?")
port.postMessage({answer: "Madame"});
else if (msg.question == "Madame who?")
port.postMessage({answer: "Madame... Bovary"});
});从扩展页面建立连接也很类似，只是要指定要连接到哪个tab。最简单地可以把上面的连接的代码改成 tabs.connect 即可。
为了能够处理连接请求，需要设置一个 runtime.onConnect 事件监听器，在 content script 和扩展页面中中都是一样的。当扩展的某一部分调用了 “connect() ”，该事件即被触发，然后就可以使用 runtime.Port 对象来发送和接收消息了。响应连接的代码大致如下所示：
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.joke == "Knock knock")
port.postMessage({question: "Who's there?"});
else if (msg.answer == "Madame")
port.postMessage({question: "Madame who?"});
else if (msg.answer == "Madame... Bovary")
port.postMessage({question: "I don't get it."});
});
});或许有时你还想知道连接何时关闭，那么你可以监听 runtime.Port.onDisconnect 事件，当通讯的任意一端调用 runtime.Port.disconnect，或者包含该端口的页面已被卸载。onDisconnect 事件可以保证在每个端口上只触发一次。
另外，消息传递还包括不同扩展之间的消息传递，还有 Chrome 与本地程序之间的消息传递，这里就不介绍了，感兴趣的同学可以直接查看官方文档。
—————————————–分割线——————————————-
demo:
几个最基本的文件
在这里，先假设大家对chrome插件开发的最基本知识已有所掌握。例如什么是manifest.json,什么是background.html等。
manifest.json
{
"name": "A browser action with a popup that changes the page color.",
"version": "1.0",
"permissions":["tabs","<all_urls>"],
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["jquery-1.7.1.js","injectscript.js"]
}
],
"manifest_version": 2
}background.html
<!DOCTYPE html>
<html>
<head>
<title>bg</title>
<script type="text/javascript" src="http://blog.chenqiushi.com/2014/03/31/chrome%e6%8f%92%e4%bb%b6%e5%bc%80%e5%8f%91%e5%85%a5%e9%97%a8%ef%bc%88%e4%ba%8c%ef%bc%89-%e6%b6%88%e6%81%af%e4%bc%a0%e9%80%92%e6%9c%ba%e5%88%b6/bg.js"><script>
</head>
<body>
hello
<body>
</html>这里引用了一个后台处理程序，bg.js，后面会讲到。
扩展程序发送请求数据到内容脚本，内容脚本给出回应
扩展程序后台脚本bg.js
(function(){
chrome.browserAction.onClicked.addListener(function(tab) {
// 扩展向内容脚本发送消息
chrome.tabs.sendMessage(tab.id,{
greeting: "hello to content script!"
}, function(response) {
console.log(response.farewell);
});
});
})();内容脚本injectscript.js
(function(){
console.log("injected");
var resOK = {
farewell: "content script send response back..."
};
var resError = {
farewell: "content script hasError!"
};
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Request comes from extention " + sender.tab.url);
if (request.greeting === "hello to content script!"){
sendResponse(resOK);
}else{
sendResponse(resError);
}
});
})();扩展程序向内容脚本发送一条消息hello to content script!,内容脚本接收到这条消息后去判断是不是那句话，如果是，就返回resOK对象，如果不是，就返回resError对象。
这时，扩展程序收到内容脚本的一条回应，至此，此番通话就结束了。
看一下结果截图
内容脚本发送请求数据到扩展程序，扩展程序给出回应
扩展程序后台脚本bg.js
(function(){
var resOK = {
farewell: "extension send response back..."
};
var resError = {
farewell: "extension hasError!"
};
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log("Request comes from content script " + sender.tab.url);
if (request.greeting === "hello to extention!"){
sendResponse(resOK);
}else{
sendResponse(resError);
}
});
})();内容脚本injectscript.js
(function(){
console.log("injected");
chrome.extension.sendMessage({greeting: "hello to extention!"}, function(response) {
console.log(response.farewell);
});
})();内容脚本向扩展程序发送一条消息hello to extention!,扩展程序接收到这条消息后去判断是不是那句话，如果是，就返回resOK对象，如果不是，就返回resError对象。
这时，内容脚本收到扩展程序的一条回应，至此，此番通话就结束了。
特别应该注意的是:扩展程序向内容脚本发送请求数据时用的是chrome.tabs.sendMessage，反过来，用的是chrome.extension.sendMessage。
看一下结果截图
如果以后还有一些chrome插件的学习总结，还会写在这里。
demo地址：
点击下载demo
The post Chrome插件开发入门（二）——消息传递机制 appeared first on Blog | Qiushi Chen.
Chrome 消息传递机制的更多相关文章
- Chrome插件开发入门（二）——消息传递机制
Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...
- Storm内部的消息传递机制
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 一个Storm拓扑,就是一个复杂的多阶段的流式计算.Storm中的组件 ...
- 我理解的Hanlder--android消息传递机制
每一个学习Android的同学都会觉得Handler是一个神奇的东西,我也一样,开始我以为我懂了Handler的机制,后来发现自己是一知半解,昨天想想,我能否自己实现一个Handler,让子线程与Ac ...
- Handler消息传递机制
引言: 出于性能优化考虑,Android的UI操作并不是线程安全的,这意味着如果有多个线程并发操作UI组件,可能导致线程安全问题. 为了解决这个问题,Android制定了一条简单的规则:只允许UI线程 ...
- Android学习之Handler消息传递机制
Android只允许UI线程修改Activity里的UI组件.当Android程序第一次启动时,Android会同时启动一条主线程(Main Thread),主线程主要负责处理与UI相关的事件,如用户 ...
- ios 消息传递机制
引用文章 一.KVO 1.当对象中的某个属性值发生了改变,可以对这些值的观察者做出通知. 2.接受者(会接收到值发生改变的消息) 必须知道发送者(值将发生改变的那个对象). 3.接收者同样还需要知道发 ...
- iOS开发——OC篇&消息传递机制（KVO／NOtification／Block／代理／Target－Action）
iOS开发中消息传递机制(KVO/NOtification/Block/代理/Target-Action) 今晚看到了一篇好的文章,所以就搬过来了,方便自己以后学习 虽然这一期的主题是关于Fou ...
- Android异步消息传递机制源码分析
1.Android异步消息传递机制有以下两个方式:(异步消息传递来解决线程通信问题) handler 和 AsyncTask 2.handler官方解释的用途: 1).定时任务:通过handler.p ...
- （Android数据传递）Intent消息传递机制 “Intent”“数据传递”
Intent类的继承关系: 需要注意的是,该类实现了Parcelable(用于数据传递)和Cloneable接口. Intent是一种(系统级别的)消息传递机制,可以在应用程序内使用,也可以在应用 ...
随机推荐
- SQL 在表中随机取数据
在一张10万行产品表(Product)中,随机取10条数据的几种方式: SET STATISTICS IO ON SELECT TOP 10 ID FROM dbo.Product(NOLOCK) W ...
- jquery1.0源码【1-60行】构造函数及全局$变量
一.jquery源码1-60行 该部分代码主要完成jquery对象的创建,以及全局变量$与jQurey类的映射: /* * jQuery - New Wave Javascript * * Copyr ...
- SAM4E单片机之旅——21、DMAC之USART回显
DMAC也可以和外设进行数据交互.之前我们曾使用PDC进行USART的数据回显,这次就使用DMAC完成相同的工作.而且由于DMAC有内部的缓冲区,实现起来更为简单. 一. USART设置 因为之前已经 ...
- Nodejs断言测试
var assert = require('assert');/*node中,我们可以使用assert模块来测试代码.equal()和notEqual()分别作相等性和不等性的判断,第一个参数是期望值 ...
- Android开发学习总结(一)——搭建最新版本的Android开发环境
Android开发学习总结(一)——搭建最新版本的Android开发环境(转) 最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是 ...
- Google 以图搜图 - 相似图片搜索原理 - Java实现
前阵子在阮一峰的博客上看到了这篇<相似图片搜索原理>博客,就有一种冲动要将这些原理实现出来了. Google "相似图片搜索":你可以用一张图片,搜索互联网上所有与它相 ...
- fork函数
在Unix/Linux中用fork函数创建一个新的进程.进程是由当前已有进程调用fork函数创建,分叉的进程叫子进程,创建者叫父进程.该函数的特点是调用一次,返回两次,一次是在父进程,一次是在子进程. ...
- js删除所有子元素
没有removeAll的API,但也十分容易实现: var lis = $("#yetai_tbody").find("tr"); $(lis).each(fu ...
- 【ASP.NET 进阶】定时执行任务
原理:利用全局应用程序类 Global.asax 和 System.Timers.Timer 类定时处理任务. 示例效果图: 其 Global.asax 类代码如下: using System; u ...
- OpenSSH后门获取root密码及防范
OpenSSH后门获取root密码及防范 相对于Windows操作系统,Linux操作系统的密码较难获取.而很多Linux服务器都配置了Openssh服务,在获取root权限的情况下,可以通过修改或者 ...