Question

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

Background script has received a message from contentscript:'coming from popup'
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?

Answer 1

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 extension message passing from background script to content script is not working

1 个答案: