Firefox 扩展不显示图标答案

【问题标题】：Firefox extension not showing iconsFirefox 扩展不显示图标
【发布时间】：2016-01-01 16:42:02
【问题描述】：

我已经实现了示例 mozilla firefox 扩展以在工具栏上显示 firefox 图标（操作按钮），它将打开“http://www.mozilla.org/”。它在 jpm run 中运行良好，然后我使用 jpm xpi 创建了它的包并创建了 xpi 文件。然后我将它安装在我的firefox浏览器中并成功安装但没有工作。 无法在工具栏上添加firefox图标（操作按钮）（控制台没有错误）。

下面是代码。

index.js

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("http://www.mozilla.org/");
}

package.json

{
  "title": "Sample",
  "name": "sample",
  "version": "0.0.1",
  "description": "Sample AddOn",
  "main": "index.js",
  "author": "Sample",
  "engines": {
    "firefox": ">=30.0a1",
    "fennec": ">=30.0a1"
  },
  "license": "MIT"
}

我已经使用-https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29实现了这一点

请帮忙。

谢谢

【问题讨论】：

您使用的配置文件是否设置为从不记住历史记录（选项 -> 隐私 -> 历史记录），或者在 private browsing mode 中设置。如果是这样，请参阅Firefox add-on works with “jpm run”, but not whith .xpi file generated with “jpm xpi”。

标签： firefox firefox-addon firefox-addon-sdk firefox-developer-tools

【解决方案1】：

为了使图标可见，您必须在您的扩展程序中创建一个data 目录并将您的图标放在那里。

【讨论】：

感谢您的回复，我认为 JPM 不需要 Id。但无论如何我已经用Id尝试过，但仍然存在同样的问题。我不确定这个问题是否与 JPM 有关，因为我没有使用 CFX。请指教。
你说得对，jpm 不需要id。我用 jpm 运行你的代码，再次没有错误，扩展对我来说很好。您确定您在尝试jpm xpi 时没有收到任何错误吗？
是的，jpm xpi 没有错误。 jpm run 也可以正常工作，但是当我在 Firefox 中安装 xpi 文件时，没有任何反应意味着它不显示图标。你能把你生成的xpi文件发给我吗？ - pateljb90@gmail.com
现在我明白了你的问题，我编辑了我的答案。请让我知道问题是否仍然存在。如果还是有问题，我会发给你xpi
是的，我确实创建了目录“数据”，并在该文件夹中添加了图标。你可以把xpi发给我。谢谢。

【解决方案2】：

您错过了本课中的一项... 您需要在扩展根目录中创建“数据”目录，并且所有内容都必须放在此文件夹中。在我的示例中，我像这样使用它：

var button = this.buttons.ActionButton({
            id: "show-panel",
            label: "Show Panel",
            icon: {
                "16": "./icon/x16.png",
                "32": "./icon/x32.png",
                "64": "./icon/x64.png"
            },
            onClick: function(state) {
              // ...
            }
        });

我的结构看起来像： MyExtensionName/data/icon/[.png,.ico]

但您也可以使用扩展程序的内部链接：

resource://extensionname/...

icon: {
  "16": "resource://extensionname/data/icon/x16.png",
  "32": "resource://extensionname/data/icon/x32.png",
  "64": "resource://extensionname/data/icon/x64.png"
}

【讨论】：