如何确定 Firefox 附加 SDK popup/panel 的大小？ Firefox 附加 SDK popup/panel 太小

Question

我在 Firefox 中遵循了 tutorial on creating a popup for an add-on，效果很好。

我现在遇到的问题是它创建的弹出窗口不会改变大小以适应我添加的内容。相反，它添加了滚动条。

那么，如何更改 Firefox 附加 SDK 弹出窗口的大小以显示所有内容？

Answer 1

你必须自己处理。

如果您在创建面板时已经知道所需的大小，则可以将 height 和 width 作为对象的属性传递给 Panel() 构造函数。

创建面板后，可以通过设置面板的 height 和 width 属性来更改其大小。

height 和 width 值是以像素为单位的数字。

有关如何使用面板的完整文档，请参阅 https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel。

Answer 2

虽然教程和文档从未说过，但面板的高度和宽度始终默认为相同的小尺寸。

要更改它，您可以使用 height and width parameters for the panel class。

如果您希望它自动更改，您可以使用此代码：

//index.js
var panel = require("sdk/panel").Panel({
    height: 200,  //choose your default
    width: 200,
    contentURL: data.url("popup.html"),
    contentScriptFile: data.url("auto_resize_popup.js")
});

panel.port.on("resize", function (size) {
    console.log(size);
    panel.resize(size.width, size.height);
});

...

//auto_resize_popup.js

    var content = document.body;
    var size = {};
    size.width = content.offsetWidth + 2;  //2 extra pixels get rid of scroll bars
    size.height = content.offsetHeight + 2;
    self.port.emit("resize", size);

如何确定 Firefox 附加 SDK popup/panel 的大小？ Firefox 附加 SDK popup/panel 太小

How do I size a Firefox Add-on SDK popup/panel? Firefox Add-on SDK popup/panel too small

css

popup

firefox-addon

firefox-addon-sdk