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.
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):
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
No, there is no direct equivalent in the Add-on SDK. However, the widget module that you are probably using can display any HTML content and not just an icon. And you can script that HTML content, e.g. to show some text when necessary. I tried it with the following lib/main.js:
var {data} = require("self");
var icon = require("widget").Widget({
id: "my-widget",
label: "My Widget",
contentURL: data.url("icon.html"),
contentScriptFile: data.url("icon.js"),
onClick: function()
{
icon.port.emit("setBadgeText", "123");
}
});
It uses icon.html file to display the icon and sends a setBadgeText message to the attached content script whenever the text on top of the icon needs to change. Here is the data/icon.html file I tested with:
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#badgeText
{
position: absolute;
bottom: 0px;
right: 0px;
font: 8px Sans-Serif;
color: #FFFFFF;
background-color: #C00000;
border: 1px solid #800000;
}
</style>
</head>
<body>
<img src="http://www.mozilla.org/favicon.ico">
<div id="badgeText" hidden="true"></div>
</body>
</html>
I didn't invest too much effort to make the text look like Chrome's badge text, you can probably improve the styling. The text is hidden by default (I used the HTML5 hidden attribute for simplicity). And the data/icon.js content script isn't too complicated either:
self.port.on("setBadgeText", function(text)
{
var element = document.getElementById("badgeText");
element.textContent = text;
element.hidden = (text == null);
});
It receives the setBadgeText message and sets the text in the HTML document accordingly. It will also hide the badgeText element if it receives null as badge text.
It is not documented in MDN, but action and toggle button also accepts icon property as base64 encoded image. By knowing this fact it is easy to create, for example, page-worker, and to use html canvas element to draw tooltip over an image icon, and to return that with canvas.toDataURL() method.
