I’m learning how to make Firefox extensions by following the beastify example in the documentation, but, I’m unable to modify such example for meet this requirement:
Send a string to the “popup.html”. This string is actually a HTML code I want to render in a
div.
Here is the manifest.json:
{
"manifest_version": 2,
"name": "Ejemplo",
"version": "1.0",
"description": "Inspeccionar elementos de youtube.com.",
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify",
"icons": {
"48": "icons/border-48.png"
},
"applications": {
"gecko": {
"id": "manhunter45a45@example.com"
}
},
"permissions": [
"tabs",
"activeTab"
],
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Obtain YouTube Info",
"default_popup": "popup/results.html"
},
"content_scripts": [
{
"matches": [
"https://*.youtube.com/"
],
"js": [
"Ejemplo.js",
"jquery-1.9.1.min.js",
"/code/functions.js"
]
}
],
"background": {
"scripts": [
"/code/prepare.js",
"/code/popup.js"
]
}
}
“results.html” <= this is the HTML popup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="myDiv"><i>Loading...</i></div>
<script src="../code/prepare.js"></script>
</body>
</html>
prepare.js - code from the documentation:
function onError(error) {
console.error(`Error: ${error}`);
}
function sendMessageToTabs(tabs) {
for (const tab of tabs) {
browser.tabs
.sendMessage(tab.id, { greeting: "Hi from background script" })
.then((response) => {
console.log("Message from the content script:");
console.log(response.response);
})
.catch(onError);
}
}
browser.browserAction.onClicked.addListener(() => {
browser.tabs
.query({
currentWindow: true,
active: true,
})
.then(sendMessageToTabs)
.catch(onError);
});
browser.tabs
.executeScript({ file: "/code/popup.js" })
.then(sendMessageToTabs)
.catch(onError);
popup.js:
function onError(error) {
console.error(`Error: ${error}`);
}
function sendMessageToTabs(tabs) {
for (const tab of tabs) {
browser.tabs
.sendMessage(tab.id, { greeting: "Hi from background script" })
.then((response) => {
console.log("Message from the content script:");
console.log(response.response);
})
.catch(onError);
}
}
browser.browserAction.onClicked.addListener(() => {
browser.tabs
.query({
currentWindow: true,
active: true,
})
.then(sendMessageToTabs)
.catch(onError);
});
browser.tabs
.executeScript({ file: "/code/popup.js" })
.then(sendMessageToTabs)
.catch(onError);
`popup.js`:
(() => {
browser.runtime.onMessage.addListener((request) => {
console.log("Message from the background script:");
console.log(request.greeting);
document.getElementById("myDiv").innerHTML = request.greeting;
return Promise.resolve({ response: "Hi from content script" });
});
})();
I already got the data to send, but, when I click on the add-on icon and the “popup” shows, no browser.tab nor anything is called. I don’t know what else I’m missing here.