javascript - 在 firefoxaddonsdk 中使用第三方 api

Question

我正在尝试在我的扩展中使用 ericvold 的工具栏按钮模块。当我使用 Add-on Builder 在线尝试时，它工作正常。但是当我在我的计算机上使用 Add-on SDK 时，它似乎有一些问题并且似乎没有添加任何东西。

我遵循的步骤是:

• 从 github 以 zip 格式下载工具栏.

• 解压缩并将其添加到附加 SDK 中的我的包中，然后运行 ​​cfx docs。

• 将 index.html(第三方 api)中列出的文档复制到 main.js 中。

• 在我的 packages.json 中添加依赖项(还下载并添加了 vold utils)。

它仍然没有显示工具栏。

我的代码是这样的:

exports.main = function(options) {
  // create toolbarbutton
  var tbb = require("toolbarbutton").ToolbarButton({
    id: "TBB-TEST",
    label: "TBB TEST",
    onCommand: function () {
      tbb.destroy();
    }
  });

  if (options.loadReason == "install") {
    tbb.moveTo({
      toolbarID: "nav-bar",
      forceMove: false // only move from palette
    });
  }
};

Answer 1

这是一个你可以查看的 github 仓库:

https://github.com/canuckistani/toolbar-template

这是基本的附加组件，具有指向 Erik Vold 的工具栏和实用程序库的 git 子模块，并实现了一个非常简单的工具栏按钮。

const data = require("self").data;
const tabs = require("tabs");

exports.main = function(options) {

    var btn = require("toolbarbutton").ToolbarButton({
        id: 'my-toolbar-button',
        label: 'Add skull!',
        image: data.url('favicon.png'),
        onCommand: function() {
            if (typeof(tabs.activeTab._worker) == 'undefined') {
                let worker = tabs.activeTab.attach({
                    contentScript: 'self.port.on("sayhello", function() { alert("Hello world!"); })'
                });
                tabs.activeTab._worker = worker;
            }
            tabs.activeTab._worker.port.emit("sayhello");
        }
    });

    if (options.loadReason === "install") {
        btn.moveTo({
          toolbarID: "nav-bar",
          forceMove: false // only move from palette
        });
  }
};

要查看它是如何工作的，只需安装 xpi 文件:

https://github.com/canuckistani/toolbar-template/raw/master/toolbar.xpi

注意:此示例适用于 SDK verison 1.7，由于 exports.main() 的更改，它可能不适用于 SDK master 分支。