Menu
Chrome's method chrome.browserAction.setBadgeText overlays text on top of the extensions icon. This is handy if you want to display total unread mails for example.
Is there an equivalent method when developing a Firefox Addon SDK extension, or what is the best way to change the icon at runtime?
As of version 1.11 of SDK I can't find similar method in Firefox Add-on SDK API.
906
Note: This answer does not work any more in Firefox 38+ due to the removal of the widget module. Use one of the buttons from the ui module instead.
I've ported the chrome.browserAction API to Firefox, and published it as a Jetpack module, see https://github.com/Rob--W/browser-action-jplib
If you're familiar with the chrome.browserAction API, using this module can't be easier. Even if you have never created a Firefox add-on before, you can get started within a few minutes:
addon-sdk) and create the boilerplate files (cfx init).package.json, and add "browser-action" as a dependency.At this point, you've set up all prerequisites. What remains is the creation of the browser action.
This add-on adds a browser action near the location bar, which shows a popup on click. When you type something in the input field within this popup, the tab's title is changes to the field's value.
lib/main.js// lib/main.js
var badge = require('browserAction').BrowserAction({
default_icon: 'images/icon19.png', // optional
default_title: 'Badge title', // optional; shown in tooltip
default_popup: 'popup.html' // optional
});
badge.onMessage.addListener(function(message, sender, sendResponse) {
require('sdk/tabs').activeTab.title = message;
});
data/popup.html<!-- (Example) Please avoid inline JavaScript/CSS in your production code -->
<body style="width:200px;">
Demo: This is a popup page.<br>
Uses <code>extension.sendMessage</code> to notify the background page,
which in turn changes the current tab's title to below value <br>
<input onkeyup="extension.sendMessage(this.value);" style="display:block;">
</body>
Here's a short screencast of the result (note: tooltip color is slightly off; recorded with byzanz):
167
In firefox 36 you can add badges (text) to your addon's buttons ..
var { ToggleButton } = require("sdk/ui/button/toggle");
var button = ToggleButton({
id: "my-button1",
label: "my button1",
icon: "./icon-16.png",
onChange: changed,
badge: 0,
badgeColor: "#00AAAA"
});
function changed(state) {
button.badge = state.badge + 1;
if (state.checked) {
button.badgeColor = "#AA00AA";
}
else {
button.badgeColor = "#00AAAA";
}
}
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#Badged_buttons
33
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
