8

Chrome 的方法chrome.browserAction.setBadgeText将文本覆盖在扩展图标的顶部。例如，如果您想显示未读邮件总数，这很方便。

开发Firefox Addon SDK扩展时是否有等效的方法，或者在运行时更改图标的最佳方法是什么？

从 SDK 1.11 版开始，我在 Firefox Add-on SDK API 中找不到类似的方法。

4

4 回答 4

7

注意：由于删除了小部件模块，此答案在 Firefox 38+ 中不再有效。请改用ui 模块中的按钮之一。

我已将chrome.browserActionAPI 移植到 Firefox，并将其作为 Jetpack 模块发布，请参阅https://github.com/Rob--W/browser-action-jplib

如果您熟悉chrome.browserActionAPI，使用此模块再简单不过了。即使您以前从未创建过 Firefox 插件，也可以在几分钟内开始：

  1. 安装附加 SDK（来自 Mozilla 的说明）。
  2. 激活 SDK（通过运行addon-sdk）并创建样板文件（cfx init）。
  3. 下载我的浏览器操作 Jetpack 库（说明）。
  4. 编辑您的附加组件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 记录）：

截屏

于 2013-05-28T08:50:51.337 回答
6

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

于 2015-02-13T12:17:25.647 回答
3

不，附加 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

于 2012-12-07T13:06:01.883 回答
0

它没有在 MDN 中记录，但操作和切换按钮也接受icon 属性作为 base64 编码图像。通过了解这一事实，很容易创建例如 page-worker，并使用 html canvas 元素在图像图标上绘制工具提示，并使用canvas.toDataURL()方法返回它。

于 2015-05-15T01:49:49.807 回答