Menu
I'm a newbie at Chrome extensions, and of course I stuck on every step, but this is specially hard. Maybe it is a silly mistake, but here is what I am trying to do:
Send a simple message from the content script to the background page and handle it as a variable. So I have this in my content script:
$(document).ready(function() {
var d = document.domain;
chrome.extension.sendMessage({dom: d});
});
And in my background script this:
chrome.extension.onMessage.addListener(function(request) {
alert(request.dom);
});
So, the alert works fine. But it "goes" to the page I am browing and not the HTML extension, this means, instead of poping up when clicking on my extension button, it will appear as it was coded into the content script when the page loads.
Please, any help would be appreciated.
468
My Demo extension is as follows
Files & Roles
a) manifest.json (Documentation)
b) myscript.js (Content Script See Documentation)
c) background.js (Background HTML File See Documentation)
d) popup.html (Browser Action Popup See Documentation)
e) popup.js (Receptor of Modified value from Background Page)
manifest.json
Registered all files to manifest(Viz background,popup,content scripts) with permissions
{
"name":"Communication Demo",
"description":"This demonstrates modes of communication",
"manifest_version":2,
"version":"1",
"permissions":["<all_urls>"],
"background":{
"scripts":["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myscript.js"]
}
],
"browser_action":{
"default_icon":"screen.png",
"default_popup":"popup.html"
}
}
myscript.js
Used sendMessage() API for communicating with background page
var d = document.domain;
chrome.extension.sendMessage({
dom: d
});
background.js
Added Event Listeners for Content and popup.js using onMessage() and onConnect() Listeners
var modifiedDom;
chrome.extension.onMessage.addListener(function (request) {
modifiedDom = request.dom + "Trivial Info Appending";
});
chrome.extension.onConnect.addListener(function (port) {
port.onMessage.addListener(function (message) {
if (message == "Request Modified Value") {
port.postMessage(modifiedDom);
}
});
});
popup.html
Sample browser action HTML Page registering popup.js to avoid Inline Scripting
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body></body>
</html>
popup.js
Used Port\Long Lived Connection for communicating with background page for fetching results
var port = chrome.extension.connect({
name: "Sample Communication"
});
port.postMessage("Request Modified Value");
port.onMessage.addListener(function (msg) {
console.log("Modified Value recieved is " + msg);
});
Hope this helps, let me know if you need more information
194
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
