chrome插件开发-消息机制中的bug与解决方案

序言

最近开发chrome插件，涉及到消息传递机时按照教程去敲代码，结果总是不对。研究了大半天终于找到原因，现在记录下。

程序

插件程序参考官网 chrome官网之消息传递机制, 不能翻墙的同事也可以参考下这位牛人的文章 [chrome插件开发之消息传递机制](http://ju.outofmemory.cn/entry/74567 "chrome插件开发之消息传递机制")

感谢这些牛人的分享让我们学到了很多知识。

这篇大牛的文章中有content向background传递消息的按钮，亲测是没问题。当时没有background向content传递消息的方法，自己动手没有成功，后来就找到了chrome管网，直接复制官网程序也没成功。官网的案例程序程序如下，不能翻墙的童鞋可以看这里：

background.js

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

content.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: "goodbye"});
  });

bug

没有成功的原因看起来像是content页面的chrome.runtime.onMessage没有触发。之前看介绍说content.js等同于页面上的js，那我就想当然的以为可以在控制台调试content.js了。这样就可以省去不断打包插件的过程。

于是就出现了这样的情景

咩，竟然是undefined

怪不得onMessage不能触发。难道是浏览器版本问题，上网一通百度，stackoverflow上也有人问相同的问题，结果都没有找到答案，也没有一处说chrome弃用了onMessage方法。就是说onMessage仍然是可用的。为毛我看不到呢？

在最后放弃前我在公司的技术群上吼了一声，看其他人有没有遇到过相同的问题（本人一向低调，能自己百度的东西都不问别人）。后来老大说是我控制台环境不对所以才看不到runtime的其他方法。原来，控制台那里还可以选择插件环境，点top就可以选择。选择了插件环境后，结果真的看到了onMessage方法。

再试下chrome.runtime

问题

现在问题又来啦，既然有onMessage方法，那为啥content没有响应呢？找个原因又是花几万字都说不完的过程了。

废话少说了，要扣工资了。就是经过大量的测试和实验，终于找到了原因。

1、案例的background.js代码中currentWindow是有害的，这个导致background不能发送消息，需要去掉。我也不知道为什么，知道的大神麻烦说下。

2、chrome的background.js是只执行一次的，当你安装插件后,打开一个页面看测试结果的时候，其实background已经把消息传给了content。并且content也成功接收了。但是因为你是打开页面后才打开发开发者工具的，开发者工具不会显示之前的消息，所以开发者工具是空白的。之后你再刷新，background都不会再运行，控制台就始终是空白。看起来就好像content中onMessage方法失效了一样

新代码如下

background.js

chrome.tabs.onUpdated.addListener(
	function(tabId,info,tab){
		if(info.status=="complete")
			console.log("complete")
		chrome.tabs.sendMessage(tabId, {greeting: "inupdate"}, function(response) {
			console.log(response);
		});
	}
)

我的程序每次tab有更新的时候就运行一次background。这样你打开控制台再刷新就可以看到消息传递的结果。如果你想跟案例代码一样，让background只运行一次的话，可以改成这样。跟案例代码的区别只是去掉了currentWindow

background.js(去掉了currentWindow)

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

之前我有试过使用runtime.sendMessage发送消息。当是这样子是有问题。

原文如下

chrome.runtime.sendMessage sends a message to all open extension pages (i.e. background, popup, etc.)

chrome.tabs.sendMessage sends a message to all content scripts from the extension in a given tab

大概意思是runtime会发送消息给所有打开的扩展页面比如背景或者popup，而tabs是给被被打开的标签页的所有content发消息。两侧

content.js

content跟官网的案例基本上一样，我只是添加了一个自己的打印语句

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"});
    }
    else if(request.greeting =="inupdate"){
    	sendResponse({farewell:"getUpdate"})
    }
 });

这样子就没问题，background就可以传递消息给content了。ps下background的调试技巧。点击下这里就可以调试background页面了