在Firefox附加SDK中是否有Chrome的'setBadgeText'等价物？
Chrome的方法会chrome.browserAction.setBadgeText在扩展程序图标上叠加文字.如果您想显示总未读邮件,这很方便.
开发Firefox Addon SDK扩展时是否有等效方法,或者在运行时更改图标的最佳方法是什么？
从SDK版本1.11开始,我在Firefox Add-on SDK API中找不到类似的方法.
注意:由于删除了widget模块,因此Firefox 38+中的答案不再适用.请使用ui模块中的一个按钮.
我已将chrome.browserActionAPI 移植到Firefox,并将其作为Jetpack模块发布,请参阅https://github.com/Rob--W/browser-action-jplib
如果您熟悉chrome.browserActionAPI,则使用此模块并非易事.即使您以前从未创建过Firefox附加组件,也可以在几分钟内开始使用:
- 安装附加SDK(Mozilla的说明).
- 激活SDK(通过运行
addon-sdk)并创建样板文件(cfx init). - 下载我的浏览器动作Jetpack库(说明).
- 编辑您的加载项
package.json,并添加"browser-action"为依赖项.
此时,您已设置所有先决条件.剩下的就是创建浏览器操作.
例
此附加组件在位置栏附近添加了一个浏览器操作,该操作会在单击时显示弹出窗口.当您在此弹出窗口的输入字段中键入内容时,选项卡的标题将更改为字段的值.
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>
这是结果的简短截屏视图(注意:工具提示颜色稍微偏离; 用byzanz记录):
在firefox 36您可以添加徽章(文本)到您的插件的按钮..
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
不，附加 SDK 中没有直接等效项。但是，您可能使用的widget模块可以显示任何 HTML 内容而不仅仅是图标。您可以编写该 HTML 内容的脚本，例如在必要时显示一些文本。我尝试了以下方法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");
}
});
它使用icon.html文件来显示图标，并setBadgeText在图标顶部的文本需要更改时向附加的内容脚本发送消息。这是data/icon.html我测试过的文件：
<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>
我没有投入太多精力让文本看起来像 Chrome 的徽章文本，您可能可以改进样式。默认情况下，文本是隐藏的（为了简单起见，我使用了HTML5hidden属性）。内容脚本也data/icon.js不太复杂：
self.port.on("setBadgeText", function(text)
{
var element = document.getElementById("badgeText");
element.textContent = text;
element.hidden = (text == null);
});
它接收setBadgeText消息并相应地设置 HTML 文档中的文本。badgeText如果该元素null作为徽章文本接收，它也会隐藏该元素。
| 归档时间： |
|
| 查看次数： |
1917 次 |
| 最近记录： |