首页 - 编程开发 - 其他语言 - JavaScript

Chrome插件消息传递实例

2020-08-12 02:08:17 苏内容

阅读：4479

首先吐槽“360极速浏览器应用开发平台”的开发文档，在消息传递(http://open.chrome.360.cn/extension_dev/messaging.html)一节中，翻译极其低劣：

Sending a request from the extension to a content script looks very similar, except that you need to specify which tab to send it to. This example demonstrates sending a message to the content script in the selected tab.

传递一个请求到扩展很容易，你需要指定哪个标签发起这个请求。下面这个例子展示了如何指定标签发起一个请求。

similar翻译成容易，发送到tab翻译成标签发起。

代码更新也不及时，chrome.tabs.getSelected和chrome.extension.sendRequest这两个函数在新版Chrome已经废弃(参考资料[1])。

学习过程中偷懒不看英文，结果反而被绕个大圈子。

1、开发文档

Chrome的消息传递，可以在Web（通过content script）和扩展之间进行，任意一方都可发送或接收消息。

Web（通过content script）发送消息如下：


chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});

通过chrome.runtime.sendMessage函数发送消息，其中{greeting: "hello"}是消息对象（大括号的用法见参考资料[2]）；function(response) {...}是回调函数，处理接收方发回的消息。
插件发送消息需要确定接收的Tab，如下：


chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});

以上代码指定当前tab为消息的接收者。
接受端需要通过runtime.onMessage事件处理消息：


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"});
});

事件处理通过function(request, sender, sendResponse){...}完成，以上代码处理消息时在控制台记录发送者的消息，回复“goodbye”消息。

2、完整示例
示例完成content script和插件的消息传递，具体包括：
1、content script发送消息，backgroud接收消息；
2、popup发送消息，content script接收消息。

manifest.json


{
	"manifest_version": 2,
	"name": "Say Hello",
	"description": "This extension say hello to you.",
	"version": "1.0",
	"permissions": ["tabs", "<all_urls>"],
	"browser_action": {
		"default_icon": "icon.png",
		"default_popup": "popup.html"
	},
	"background": {
		"page": "background.html"
	},
	"content_scripts": [{
		"matches": ["<all_urls>"],
		"js": ["contentscript.js"]
	}]
}

contentscript.js


chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
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: "I'm contentscript,goodbye!"});
	}
});

background.html


<!doctype html>
<html>
	<head>
		<title>
			Getting Started Extension's Popup
		</title>
		<script src="background.js">
		</script>
	</head>
	<body>
		<p>
			Hello!
		</p>
		<div id="r">
		</div>
	</body>
</html>

background.js


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: "I'm backgroud,goodbye!"});
});

popup.html


<!doctype html>
<html>
	<head>
		<title>
			Getting Started Extension's Popup
		</title>
		<script type="text/javascript" src="jquery.js">
		</script>
		<script src="popup.js">
		</script>
	</head>
	<body>
		<p>
			Hello!
		</p>
		<div id="r">
		</div>
	</body>
</html>

popup.js


chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});

其他

代码下载：点击打开链接

注释稍后补上

参考资料
[1]Content脚本与扩展的其他页面脚本的消息传递 http://blog.csdn.net/greatpresident/article/details/9052801
[2]Javascript中大括号“{}”的多义性http://www.cnblogs.com/snandy/archive/2011/02/28/1966894.html

扩展阅读

[Chrome] KeePass实现Chrome浏览器自动填充密码方法二
[插件] Chrome插件消息传递实例
[插件] 广告屏蔽插件Adblock Plus：所谓的“大公司付费放行广告”
[消息] CTreeView的右键/左键的消息响应GetiIem Point
[Chrome] Chrome插件开发Cannot read property 'download' of undefined
[Chrome] 用chrome插件下载文件，并自定义文件名
[Chrome] Laravel 5.5 - The page has expired due to inactivity in Google Chrome