使用 sdk 更新 firefox 插件的 UI

Question

我正在使用 addon-sdk-1.17 编写一个简单的 firefox 插件。我在更新插件的 UI 时遇到问题。如果我执行 cfx 运行，插件看起来很正常，但如果我执行“cfx xpi”并将其加载到已经具有插件先前版本的配置文件中，那么这就是我遇到问题的地方。

一个简单的例子可以从 mozilla 的工具栏教程中看到。可以在以下位置找到：https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar

如果我打包（cfx xpi）以下代码（假设图标和 html 文件存在），它会按预期工作：

var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");

var previous = ActionButton({
  id: "previous",
  label: "previous",
  icon: "./icons/previous.png"
});

var next = ActionButton({
  id: "next",
  label: "next",
  icon: "./icons/next.png"
});

var play = ActionButton({
  id: "play",
  label: "play",
  icon: "./icons/play.png"
});

var frame = new Frame({
  url: "./frame-player.html"
});

var toolbar = Toolbar({
  title: "Player",
  items: [previous, next, play, frame]
});

但是如果我想添加一个额外的按钮并且我决定更改框架的 url，它们不会更新到工具栏。例如，将上述插件加载到我的个人资料后，如果我对 main.js 进行以下更改：

var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");

var previous = ActionButton({
  id: "previous",
  label: "previous",
  icon: "./icons/previous.png"
});

var next = ActionButton({
  id: "next",
  label: "next",
  icon: "./icons/next.png"
});

var play = ActionButton({
  id: "play",
  label: "play",
  icon: "./icons/play.png"
});

var mute = ActionButton({
  id: "mute",
  label: "mute",
  icon: "./icons/mute.png"
});

var frame = new Frame({
  url: "./new-frame-player.html"
});

var toolbar = Toolbar({
  title: "Player",
  items: [previous, next, play, mute, frame]
});

工具栏上不会加载任何一个（frame-player.html 或 new-frame-player.html），静音按钮也不会位于工具栏上。同样，这适用于“cfx run”或者如果我将插件安装到没有以前版本插件的配置文件中。

我认为我正在做一些愚蠢的事情，或者有一个简单的解决方案，但我还没有在任何地方看到这方面的文档。不知道是我忽略了什么还是什么。

Answer 1

这里的“问题”是，Firefox 会保存手动放置按钮的位置，即使在卸载扩展程序时也是如此。您可以通过点击自定义选项卡中的“恢复默认值”来重置此数据。

或者，您可以使用 CustomizableUI.jsm 强制移动框架：

var CustomizableUI = require("resource:///modules/CustomizableUI.jsm");
CustomizableUI.addWidgetToArea(frame.id, "inner-" + toolbar.id);

或者如果你想移动一个按钮：

var CutomizableUI = require("resource://modules/CustomizableUI.jsm");
var { getNodeView } = require("sdk/view/core");
CustomizableUI.addWidgetToArea(getNodeView(button).id, "inner-" + toolbar.id);