Chrome extension: Communication between content script and background.html

Question

I am new to Chrome extensions. I am trying to communicate between the content script and the background.html page. The background.html sends a request, "hello", to the content script and the content script should respond back with "hello background" alert. But it's just not happening. My background.html code is:

function testRequest() {        
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {greeting: "hello"});
    });    
}

content.js code:

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting == "hello")
        alert("hello background");
    }
);

popup.html code:

<!doctype html>
<html>
    <head></head>
    <body>
        <form>
            <input type="button" value="sendMessage" onclick="testRequest()" />
        </form>    
    </body>
</html>

manifest.json:

{
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
    },
    "background": {
        "page": "background.html"
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*",
        "notifications",
        "contextMenus"
    ],
    "content_scripts": [
        {
            "matches": ["http://*/*","https://*/*"],
            "js": ["content.js"]
        }
    ],
    "name": "FirstExtension",
    "version": "1.0"
}

Please help!

Rob W Rob W · Accepted Answer · 2012-08-01T09:17:47

sendRequest/onRequest is replaced with sendMessage/onMessage in Chrome 20. *Message is not just an alias for *Request, it's a different API.

If you want to support Chrome <20 (many Ubuntu users are still at Chromium 18, because the PPA is not updated), use onRequest and sendRequest. Otherwise, use the *Message methods.

Another problem is that your function is located in the background page, and the call is made in the pop-up. These are different scopes, if you want to call a background page method from the popup, use chrome.extension.getBackgroundPage():

chrome.extension.getBackgroundPage().testRequest();

Final note: You're using manifest version 1 and inline event handlers. This practice is deprecated, for more information, see http://code.google.com/chrome/extensions/manifestVersion.html.

Chrome extension: Communication between content script and background.html

1 Answers