Search code examples
javascriptgoogle-chromegoogle-chrome-extensionevent-listenermessage-passing

Message passing in chrome extension not working

I'm new to chrome extensions and I'm having a bit of trouble getting started.

First of all my overall goal is to be able to click a button in my popup and have something in the DOM change. If I understand correctly, the way to do this is to load a content script and send this content script a message. This is what I have from looking at the Chrome developers page, but I don't see anything in the console log:

manifest.json

{
    "manifest_version": 2,

    "name": "Test",
    "version": "1.0",

    "permissions": [
        "tabs", "http://*/*"
    ],

    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["content.js"]
        }
    ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

popup.html

<html>
  <body>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function () {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.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"});
    });

A lot of this code is directly from the docs, so I have no idea what I'm doing wrong.

Solution

  • I just copied your code onto my machine and ran it as-is and it works as you expect. I think you may be confused about where the console.log output you're expecting will appear, though.

    Open any web page and open the console for that page. Click your browser action, the popup shows up, and sure enough the line from a content script:chrome-extension://fndmlopghajebfadeabnfnfmhalelokm/popup.html appears.

    You don't see your goodbye line appear there, though – because that's being logged out from popup.js, not the tab's content script. Let's open an inspector for the popup and look for the goodbye message there. Right-click the browser action icon and select the "Inspect popup" menu item. Your (empty) popup shows, and a new inspector window appears; select the Console tab and you'll see the goodbye message there.

    For additional info, see the Chrome Extension Debugging tutorial.

    PS. chrome.tabs.getSelected is deprecated; you should use chrome.tabs.query instead. And I agree with 方 觉 – you ought to consider using programmatic injection to make your DOM changes instead.