首页 文章

使用sdk更新firefox插件的UI

提问于
浏览 次
1

我正在使用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”或者如果我将插件安装到没有以前版本的插件的配置文件中 .

我假设我正在做一些愚蠢的事情，或者有一个简单的解决方案，但我没有在任何地方看到这方面的文档 . 不确定我是否只是忽略了什么或什么 .

firefox-addon firefox-addon-sdk xul

1 回答

  • 1

    这里的“问题”是，即使卸载了扩展程序，Firefox也会保存手动放置按钮的位置 . 您可以通过点击cutomization选项卡中的“Restore Defaults”重置此数据 .

    或者，您可以使用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);
    回复于

相关问题