如何在firefox上创建工具栏?

时间:2014-01-26 22:43:55

标签: firefox sdk firefox-addon toolbar

我需要在Firefox上创建两个工具栏:一个在顶部水平,另一个在浏览器右侧垂直。但是firefox的sdk lib没有资源去做。任何消化?

3 个答案:

答案 0 :(得分:1)

这可能会有所帮助,非常简单的指南可以轻松阅读:

http://www.borngeek.com/firefox/toolbar-tutorial/

答案 1 :(得分:1)

从版本1.15开始,Addon SDK允许您创建工具栏并为其添加按钮。我不认为可以创建垂直工具栏,只能创建水平工具栏。

关于如何在Addon SDK official repository中执行此操作有一个很好的示例:

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";

const { Toolbar } = require("sdk/ui/toolbar");
const { Frame } = require("sdk/ui/frame");
const { Button } = require("sdk/ui/button");

let button = new Button({
  id: "button",
  label: "send!",
  icon: "./favicon.ico",
  onClick: () => {
    frame.postMessage({
      hello: "content"
    });
  }
});

let frame = new Frame({
    url: "./index.html",
    onAttach: () => {
      console.log("frame was attached");
    },
    onReady: () => {
      console.log("frame document was loaded");
    },
    onLoad: () => {
      console.log("frame load complete");
    },
    onMessage: (event) => {
      console.log("got message from frame content", event);
      if (event.data === "ping!")
        event.source.postMessage("pong!", event.source.origin);
    }
});

let toolbar = new Toolbar({
  items: [frame],
  title: "Addon Demo",
  hidden: false,
  onShow: () => {
    console.log("toolbar was shown");
  },
  onHide: () => {
    console.log("toolbar was hidden");
  }
});

此外,an older SO thread解释了如何在旧版本的Addon SDK和基于XUL的插件上执行此操作。

答案 2 :(得分:0)

上述代码仅适用于Firefox Australis(升级版本29.0)。您可以使用像toolbarwidget-jplib by Rob--W这样的Jetpack模块。

因此,您可以在导航栏上添加小部件:

require("toolbarwidget").ToolbarWidget({
toolbarID: "nav-bar", // <-- Place widget on Navigation bar
id: "mozilla-icon",
label: "My Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico"
});