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.

回答1:

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.

回答2:

The popup.js script will launch the file when you load the popup.html (DOMContentLoaded). But surely, the content will be injected script is not yet in any web page, since you have not had time to not had time to open it and that "matches": ["http:// * / *"], is ok. Changes the background content script by background script and I think it will work.

来源：https://stackoverflow.com/questions/16066317/message-passing-in-chrome-extension-not-working

标签

javascript

google-chrome

google-chrome-extension

event-listener

message-passing