Question

我希望工具栏中有一个文本输入字段，看起来像搜索输入，并由FF扩展控制。

我正在使用sdk / widget：

在主js文件中我有

var reason = require("sdk/widget").Widget({
  label: "Progress Block - reason",
  id: "text-entry",
  contentURL: data.url("reason.html"),
  width: 120
});

原因html文件

<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <style type="text/css" media="all">
        </style>
    </head>
    <body>
            <input type="text" style="width: 105px; height: 16px;">
    </body> 
</html>

使用此样式输入字段非常小，但至少FF显示它 - 不显示样式滚动条。

没有风格 - 我想要像搜索字段这样的东西，我有滚动条： without any style

添加宽度样式后： with only width style

发布样式： with style

在扩展程序控制的工具栏中创建格式正确的文本输入的正确方法是什么？

Answer 1

我会插入一个CustomizableUI.jsm类型自定义的文本字段并构建该东西。

这是如何制作自定义类型customizazbleui.jsm的东西：https://gist.github.com/Noitidart/10902477

我试图找到如何创建搜索栏，虽然它也是通过customizableui.jsm完成但我无法在mxr上找到它。

编辑：

这是如何：

const {Cu} = require("chrome");
Cu.import('resource:///modules/CustomizableUI.jsm');
CustomizableUI.createWidget({
    id: 'myCUITextbox',
    type: 'custom',
    removable: true,
    defaultArea: CustomizableUI.AREA_NAVBAR,
    onBuild: function(aDocument) {
        var node = aDocument.createElement('toolbaritem');
        node.setAttribute('id', this.id);

        var props = {
          title: 'Search',
          align: 'center',
          class: 'chromeclass-toolbar-additional panel-wide-item',
          flex: 100
        };
        for (var p in props) {
          node.setAttribute(p, props[p])
        }

        var textbox = aDocument.createElement('textbox');
        node.appendChild(textbox);

        //node.style.listStyleImage = "url(" + (aProvider.icon32URL || aProvider.iconURL) + ")";
        return node;
    }
});

如果你想删除do：

CustomizableUI.destroyWidget('myCUITextbox');

Answer 2

小部件api已被弃用，您不应该使用它。如果您查看浏览器控制台，您将看到SDK警告中有关此弃用的消息。

相反，您应该使用Firefox 29中引入的较新的UI元素，如工具栏api：

https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui#Toolbar

如何在Firefox工具栏中添加外观合适的文本输入字段？

2 个答案: