Opening a message port between background and content_script for a chrome extension

Question

I'm working on a Chrome extension that involves message passing from the background script to the content script via a message port. According to the documentation I have to first query for the tab where the content script I want to connect to is running and then open a port using that Tab's ID. So my background script and content script look like the following:

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var port = chrome.tabs.connect(tabs[0].id, { name: "example" });
    port.postMessage("hello world");
});

content_script.js

chrome.runtime.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
        console.log(msg);
    });
});

And no message is printed to the console. I did some debugging first by putting break point on this line in content_script port.onMessage.addListener(function(msg) { which was never hit. This led me to believe that the port was never opened in background.js. So next, I put a break point in background.js at this line var port = chrome.tabs.connect(tabs[0].id, { name: "example" }); by using the dev tools accessed here

and it turns out that my query isn't actually returning any tabs into the callback so tabs[0].id raises an error. I'm guessing that once I get this tab query to work the message passing will start working, so does anyone have any idea what's going on here that I can't query for the current, active tab? I've seen this exact query used in many other StackOverflow responses and it's in an example in the message passing docs .

Answer 1

Please ensure the current active tab is allowing content scripts to be injected, I mean, when you call chrome.tabs.query in background page, the active tab page is not chrome://extensions page. This usually happens when you reload the extension, in this case, after you called chrome.tabs.query({active: true, currentWindow: true}) , you would get the tab with chrome://extensions url, while this page doesn't allow content scripts to be injected by default.

To avoid this, you could adjust your message passing ways:

1. You could starting the message passing from content scripts .
2. You could also add some other trigger point to start the message passing. For example, calling chrome.tabs.query when browserAction is clicked.