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!
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).
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With