从后台脚本传递到内容脚本的Chrome扩展消息无法使用 [英] Chrome extension message passing from background script to content script is not working

问题描述

我正在尝试使用Chrome插件创建消息传递。
我的代码如下：

manifest.json：

 <$ c 
name：发送消息测试，
version：1.0，
manifest_version：2，
description：发送从contentcript.js发送到background.js的消息并发送回复，
background：{
scripts：[background.js]，
persistent：false 
}，
browser_action：{
default_title：这是工具提示，
default_popup：popup.html
}，
 //permissions：[tabs]，
content_scripts：[{
matches：[http：// * / *，https：// * / *]，
js：[contentscript.js] 
}] 
} 
  

popup.html：

 < script type =text / javascriptsrc = popup.js>< /脚本> 
< div style =width：200px> 
< button id =button>为所有div< /按钮> 
< / div> 
  

popup.js：

  window.onload = function（）{
 document.getElementById（button）。onclick = function（）{
 // alert（in popup.js）; 
 chrome.extension.sendMessage（{
 message：来自弹出窗口
}）; 
} 
} 
  

contentscript.js

  chrome.runtime.onMessage.addListener（function（request，sender）{
 alert（Contentscript收到来自后台脚本的消息：' + request.message +'）; 
返回true; 
}）; 
  

background.js：

  var backgroundScriptMessage =紫色的洗碗机; 
 
 chrome.extension.onMessage.addListener（function（request，sender）{
 alert（后台脚本收到来自contentscript的消息：'+ request.message +'） ; 
 returnMessage（request.message）; 
}）; 
 
函数returnMessage（messageToReturn）{
 chrome.tabs.query（{active：true}，function（tabs）{
 var joinedMessage = messageToReturn + backgroundScriptMessage; 
 alert（后台脚本发送消息给contentscript：'+ joinedMessage +'）; 
 chrome.tabs.sendMessage（tabs [0] .id，{greeting：hello}）; 
}）; 
} 
  

当我在chrome扩展中解压插件并点击生成的图标时，我看到2个提醒

1. 后台脚本收到来自contentscript的消息：'来自弹出窗口'


2. 后台脚本收到来自contentscript的消息：'来自弹出式'紫猴洗碗机

以及第三个弹出窗口内容不会显示。我试图寻找错误，但没有运气。是否有人有解决方案？

解决方案

查询当前活动选项卡时，不要忘记添加 currentWindow ：true $ <$
$ b

 函数returnMessage（messageToReturn）{
 chrome.tabs.query（{ active：true，currentWindow：true}，function（tabs）{
 var joinedMessage = messageToReturn + backgroundScriptMessage; 
 alert（后台脚本发送消息到contentscript：'+ joinedMessage +''） ; 
 chrome.tabs.sendMessage（tabs [0] .id，{greeting：hello}）; 
}）; 
} 
  

请使用 runtime.onMessage 代替 extension.onMessage 。

顺便说一句，您还可以使用 sender .tab.id 在 runtime.onMessage 侦听器中获取发件人选项卡ID，那么您将不需要查询选项卡状态。

I am trying chrome plugin creation Message Passing. My code is as follows:

manifest.json:

{
    "name": "Sending Messages Test",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Send a Message to background.js from contentscript.js and send reply",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_title": "That's the tool tip",
        "default_popup": "popup.html"
    },
    // "permissions": ["tabs"],
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["contentscript.js"]
    }]
}

popup.html:

<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
    <button id="button">Color all the divs</button>
</div>

popup.js:

window.onload = function() {
  document.getElementById("button").onclick = function() {
    // alert("in popup.js");
    chrome.extension.sendMessage({
      message: "coming from popup"
    });
  }
}

contentscript.js

chrome.runtime.onMessage.addListener( function(request, sender) {
    alert("Contentscript has received a message from from background script: '" + request.message + "'");
    return true;
});

background.js:

var backgroundScriptMessage = " purple monkey dishwasher";

chrome.extension.onMessage.addListener(function(request, sender) {
    alert("Background script has received a message from contentscript:'" + request.message + "'");
    returnMessage(request.message);
});

function returnMessage(messageToReturn) {
    chrome.tabs.query({active: true}, function(tabs) {
      var joinedMessage = messageToReturn + backgroundScriptMessage;
      alert("Background script is sending a message to contentscript:'" + joinedMessage +"'");
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

When I unpack the plugin in chrome extensions, and click on the generated icon, I see 2 alerts

1. Background script has received a message from contentscript:'coming from popup'
2. Background script has received a message from contentscript:'coming from popup' purple monkey dishwasher

and the third popup which is present in the contentscript is never shown. I tried searching for the error but no luck. Does anybody has a solution?

解决方案

When querying current active tab, don't forget to add currentWindow: true

function returnMessage(messageToReturn) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var joinedMessage = messageToReturn + backgroundScriptMessage;
          alert("Background script is sending a message to contentscript:'" + joinedMessage +"'");
      chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"});
    });
}

And please use runtime.onMessage instead of extension.onMessage.

BTW, you can also use sender.tab.id to get sender tab id in runtime.onMessage listener, then you will not need to query tabs state.

这篇关于从后台脚本传递到内容脚本的Chrome扩展消息无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！