I made a Firefox Extension, but I want to create a toolbar button that allow the user enable/disable the extension, but I cant find any documentacion on how do this.
I’m newbie on developing firefox extension, can anyone help me?
Thank you.
If your extension disables itself (which only SDK add-ons and below can actually do) it pretty much commits suicide. If it is disabled it is by the very definition of it not able to enable itself again.
What you can do is enable and disable the extensions functionality.
How that can work depends on the kind of add-on you are writing. Is it a “new” WebExtension or an “old” SDK based add-on?
Sorry for the confusion. My extension is a webextension.
It has a manifest file a a jar file that makes the magic. The extension change words in the visited website, it’s a satire thing. I want to add a button so the user can choose if saw the website in its original way or using the plugin, so I want to learn how that work. Thanks.
Ok. To manipulate web contents you need to use content scripts. Those can be included/applied in tow ways:
- delcarative, with the
content_scriptskey in themanifest.json - programmatic, using
browser.tabs.executeScript().
The declarative approach makes sense if your changes should apply to the majority of the page loads, the programmatic otherwise.
I would think the programmatic approach would be more suitable in your case.
Here is something I haven’t tested, but that should mostly work (it’ll most likely contain typos, but the concept works):
/ui/turn-on.html:
<script src="./turn-on.js" data-main="./"></script>
/ui/turn-on.js:
browser.runtime.sendMessage({ name: 'turn-on', }, () => window.close());
/ui/is-on.png: some icon indicating that the extension is active
/ui/-off.: same three files, only replace on with off
/background.js:
browser.runtime.onMessage.addListener(message => { swich(message.name) {
case 'turn-on': enable(); break;
case 'turn-off': disable(); break;
} });
function enable() {
browser.browserAction.setIcon({ path: '/ui/is-on.png', });
browser.browserAction.setPopup({ popup: '/ui-turn-off.js', });
browser.webNavigation.onCommitted.addListener(onTabLoad);
}
function enable() {
browser.browserAction.setIcon({ path: '/ui/is-off.png', });
browser.browserAction.setPopup({ popup: '/ui-turn-on.js', });
browser.webNavigation.onCommitted.removeListener(onTabLoad);
}
function onTabLoad(details) {
browser.tabs.executeScript(details.tabId, {
file: '/content.js',
allFrames true,
});
}
disable(); // enable or disable by default
/content.js:
// do your magic
1 Like
Wow, thank you. Let me check this very carefull and see if I’m able to make it works.
I think my problem is here, I’m under declarative style:
{
"manifest_version": 2,
"name": "Gordo Comunista",
"version": "1.0",
"description": "La funcion principal de la extension es reemplazaz el nombre del presidente por Gordo Comunista Feo en cualquier website que visites. Idea Original de Jesus Roldan Z. Version para Firefox por Rafa.",
"icons": {
"48": "icons/nicolas.png"
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["background.js"]
}
]
}It seems you found out what was wrong yourself:
https://github.com/rafael1138/Gordo-Comunista/blob/master/Working%20Next%20Update/manifest.json#L23
I change it, but nothing happens.
Please be much more precise. Nothing happens when? What do you expect to happen instead? Is there any console output?
No, there is no console output, I fix some paths in the code, now I see the button, but without any image, and see the text caption, but when I pressed nothing changes, and I dont know why is not showing the add on on the plugin, right now I Have all like this:
manifest.jason:
{
“manifest_version”: 2,
“name”: “Gordo Comunista”,
“version”: “1.0”,
“description”: “La funcion principal de la extension es reemplazaz el nombre del presidente por Gordo Comunista Feo en cualquier website que visites. Idea Original de Jesus Roldan Z. Version para Firefox por Rafa.”,
“icons”: {
“48”: “icons/nicolas.png”
},
“permissions”: [
“activeTab”
],
“browser_action”: {
“default_icon”: “/icons/no-nicolas.png”,
“default_title”: “Gordo Comunista”,
“browser_style”: true
},
“background”: {
“scripts”: [
“background.js”
]
}
}
background.js
browser.runtime.onMessage.addListener(message => { swich(message.name) {
case 'turn-on': enable(); break;
case 'turn-off': disable(); break;
} });
function enable() {
browser.browserAction.setIcon({ path: 'is-on.png', });
browser.browserAction.setPopup({ popup: 'turn-off.js', });
browser.webNavigation.onCommitted.addListener(onTabLoad);
}
function disable() {
browser.browserAction.setIcon({ path: 'is-off.png', });
browser.browserAction.setPopup({ popup: 'turn-on.js', });
browser.webNavigation.onCommitted.removeListener(onTabLoad);
}
function onTabLoad(details) {
browser.tabs.executeScript(details.tabId, {
file: 'gc.js',
allFrames true,
});
}
enable(); // enable or disable by defaultOn the first glance I see tow problems:
- there is a
:missing afterallFrames - the paths you are using are inconsistent, where are e.g. your icons? In the root dir, in an
uidir or in aniconsdir?
It would be better if you update your code on GitHub instead of pasting parts of it here.
Anyway. I’ll sleep now.
Right now I put all files & paths in the root, to make sure. I already update the Github, sorry for that.
How the add-on call turn-on and turn-off js?
How the add-on call turn-on and turn-off js?
The click on the button loadsturn-off.html, which in turn loads the.jsfile.
This code works:
background.js:
browser.runtime.onMessage.addListener(message => { switch(message.name) {
case 'turn-on': enable(); break;
case 'turn-off': disable(); break;
} });
function enable() {
browser.browserAction.setIcon({ path: 'is-on.png', });
browser.browserAction.setPopup({ popup: 'turn-off.html', });
browser.webNavigation.onCommitted.addListener(onTabLoad);
}
function disable() {
browser.browserAction.setIcon({ path: 'is-off.png', });
browser.browserAction.setPopup({ popup: 'turn-on.html', });
browser.webNavigation.onCommitted.removeListener(onTabLoad);
}
function onTabLoad(details) {
browser.tabs.executeScript(details.tabId, {
file: 'gc.js',
allFrames: true,
});
}
enable(); // enable or disable by default
manifest.json:
{
"manifest_version": 2,
"name": "Gordo Comunista",
"version": "1.0",
"description": "La funcion principal de la extension es reemplazaz el nombre del presidente por Gordo Comunista Feo en cualquier website que visites. Idea Original de Jesus Roldan Z. Version para Firefox por Rafa.",
"icons": {
"48": "is-off.png"
},
"permissions": [
"activeTab",
"webNavigation",
"<all_urls>"
],
"browser_action": {
"default_icon": "is-off.png",
"default_title": "Gordo Comunista",
"browser_style": true
},
"background": {
"scripts": [
"background.js"
]
}
}
1 Like
Now works, Thanks men. I’m going to put you in the credits. Do you want an specific way to put your name on it?
Now works, Thanks men. I’m going to put you in the credits.
You’re Welcome!
1 Like
How do you want me to put you in the credits? Just this nickname? Another nickname? A website? Let me know please. Thank you again.
If you want to, and have a place to put it, you could link my amo user https://addons.mozilla.org/user/NiklasGollenstede. But you don’t have to credit me. I am glad I could help.