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

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

html firefox interface firefox-addon

Html 如何在Firefox工具栏中添加外观合适的文本输入字段？,html,firefox,interface,firefox-addon,firefox-addon-sdk,Html,Firefox,Interface,Firefox Addon,Firefox Addon Sdk,我想在工具栏中有一个文本输入字段，它看起来像搜索输入，由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> <

我想在工具栏中有一个文本输入字段，它看起来像搜索输入，由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会显示它，而不显示样式滚动条

没有样式-我想要搜索字段之类的东西，我得到了滚动条：

添加宽度样式后：

风格如贴所示：

在工具栏中由扩展控制格式良好的文本输入的正确方法是什么？

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

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

我会插入一个带有customableUI.jsm类型custom的文本字段，然后构建这个东西

这是如何使自定义类型customizableui.jsm成为stuff：

我试图找到搜索栏是如何创建的，虽然它也是通过customizeleui.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;
    }
});

如果要删除，请执行以下操作：

CustomizableUI.destroyWidget('myCUITextbox');

我知道，但Australis引入了普通工具栏和附加工具栏的分离，这对我来说是不可接受的（）_(ツ)_/''不知道该告诉你什么-我们这样做是出于真正的原因。你没有办法注入自定义css来纠正你的样式问题吗？我如何使用用户输入的文本到此文本框中？我找到了大量关于对创建/删除小部件、对单击按钮作出反应的文档（仅针对按钮小部件）但是不允许使用输入的文本。那些小部件交互的东西不是你想要的。你想要的是在onBuild中做一个

textbox.addEventListener

。当然你可以使用这些小部件的东西，然后在

事件中做事件.target.childNodes
等等，直到你得到你的textnode:）我添加了textbox.setAttribute（'id'，'someid'）
什么允许我使用win.document.getElementById（“someid”）.value
-用于查询和设置文本框的值。我的解决方案基于