Chrome插件消息传递实例

最新推荐文章于 2023-09-19 11:52:10 发布

zhongping136

最新推荐文章于 2023-09-19 11:52:10 发布

阅读量1.9w

点赞数 5

分类专栏： Chrome 文章标签： chrome插件 extension 实例

本文链接：https://blog.csdn.net/zhongping136/article/details/16869819

版权

Chrome 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先吐槽“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

zhongping136

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
Chrome插件消息传递实例

首先吐槽“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
复制链接

扫一扫