我想在工具栏中有一个文本输入字段，看起来像搜索输入并由 FF 扩展控制。
我正在使用 sdk/小部件：
在我的主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 style - I wanted something like search field, I got scrollbar:
After adding width style:
With style as posted:
在扩展程序控制的工具栏中输入格式正确的文本的正确方法是什么？
我将插入一个带有 CustomizedUI.jsm 类型自定义的文本字段并构建该内容。
这是制作自定义类型 customizazbleui.jsm 内容的方法：https://gist.github.com/Noitidart/10902477
我试图找到搜索栏是如何创建的，虽然它也是通过可定制的 ui.jam 完成的，但我在 mxr 上找不到它。
edit:
方法如下：
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');