Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome extension: Communication between content script and background.html

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!

like image 284
Chandeep Avatar asked Aug 01 '12 03:08

Chandeep


People also ask

How can background scripts and content scripts communicate?

Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel. A message can contain any valid JSON object (null, boolean, number, string, array, or object).

What is content script and background script in Chrome extension?

Background Script - Provides persistence and handles background events. Content Script - Scripts that run in isolation in the context of the web page. Injected Script - Scripts that are programmatically injected into the web page.

What is Chrome background HTML extension?

Background Pages. A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue. As the architecture overview explains, the background page is an HTML page that runs in the extension process.


1 Answers

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.

like image 127
Rob W Avatar answered Oct 23 '22 16:10

Rob W