Firefox附加SDK中是否存在Chrome 's ' setBadgeText'的等价物？-Java 学习之路

Chrome的方法 chrome.browserAction.setBadgeText 覆盖了扩展程序图标顶部的文字 . 如果您想要显示总未读邮件，这很方便 .

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

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

4 回答

7
Note ：由于删除了widget模块，因此Firefox 38中的答案不再适用 . 请改用one of the buttons from the ui module .

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

如果您熟悉 chrome.browserAction API，则使用此模块并非易事 . 即使您以前从未创建过Firefox插件，也可以在几分钟内开始使用：
- 安装附加SDK（instructions from Mozilla） .
- 激活SDK（通过运行 addon-sdk ）并创建样板文件（ cfx init ） .
- 下载我的浏览器动作Jetpack库（instructions） .
- 编辑加载项的 package.json ，并添加 "browser-action" 作为依赖项 .
此时，您已设置所有先决条件 . 剩下的是创建浏览器操作 .

示例

此附加组件在位置栏附近添加了一个浏览器操作，该操作会在单击时显示弹出窗口 . 当您在此弹出窗口的输入字段中键入内容时，选项卡的 Headers 将更改为字段的值 .

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
```

<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>
```
这是结果的简短截屏视图（注意：工具提示颜色略有偏差; recorded with byzanz）：
回复于 2024-04-26T10:58:20+08:00

在 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

回复于 2024-04-26T10:58:20+08:00

不，Add-on SDK中没有直接的等价物 . 但是，您可能使用的widget module可以显示任何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>

我没有't invest too much effort to make the text look like Chrome'的徽章文字，你可以改进造型 . 默认情况下隐藏文本（为简单起见，我使用了HTML5 hidden attribute） . data/icon.js 内容脚本也不太复杂：

self.port.on("setBadgeText", function(text)
{
  var element = document.getElementById("badgeText");
  element.textContent = text;
  element.hidden = (text == null);
});

它接收 setBadgeText 消息并相应地设置HTML文档中的文本 . 如果它收到 null 作为徽章文本，它也会隐藏 badgeText 元素 .

回复于 2024-04-26T10:58:20+08:00

3

它没有在MDN中记录，但是操作和切换按钮也接受icon property作为base64编码的图像 . 通过了解这一事实，可以轻松创建（例如）页面工作者，并使用html canvas元素在图像图标上绘制工具提示，并使用 canvas.toDataURL() 方法返回该工具提示 .

回复于 2024-04-26T10:58:20+08:00

Firefox附加SDK中是否存在Chrome 's ' setBadgeText'的等价物？

4 回答

示例

lib / main.js

data / popup.html

相关问题