在Firefox附加SDK中是否有Chrome的'setBadgeText'等价物?

时间:2012-08-08 16:53:46

标签: firefox-addon-sdk

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

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

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

4 个答案:

答案 0 :(得分:7)

注意:由于移除了小部件模块,此答案在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附加组件,也可以在几分钟内开始使用:

  1. 安装附加SDK(instructions from Mozilla)。
  2. 激活SDK(通过运行addon-sdk)并创建样板文件(cfx init)。
  3. 下载我的浏览器动作Jetpack库(instructions)。
  4. 修改您的加载项package.json,并添加"browser-action"作为依赖项。
  5. 此时,您已设置所有先决条件。剩下的就是创建浏览器操作。

    实施例

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

    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>
    

    以下是结果的简短截屏视图(注意:工具提示颜色稍微关闭; recorded with byzanz):

    screencast

答案 1 :(得分: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

答案 2 :(得分:3)

不,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>

我没有投入太多精力使文字看起来像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文档中的文本。如果badgeText元素作为徽章文字收到null,它也会隐藏{。}}元素。

答案 3 :(得分:0)

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