Question

开发Firefox附加组件。任何人都可以帮助弄清楚如何使Panel透明。以下是显示面板的代码：

    var panel = require("sdk/panel").Panel({
    width: 570,
    height: 250,
    contentURL: require("sdk/self").data.url("test.html")
    });
    panel.show();

Answer 1

我找到了一个解决方案，但它并不漂亮，因为sdk / panel.js似乎没有公开原始的Panel对象，以便从现有的Panel调整/扩展或组成另一个Panel。

这里是：

（1）在此处获取sdk/panel.js的来源：panel.js（原始）或在您的插件xpi中找到的sdk文件夹中。

（2）将其作为新文件添加到您的插件包中。

（3）更改此克隆文件的需求参数（第16-24行），以便它们从您的插件指向正确的位置。

例如：改变

const { validateOptions: valid } = require('./deprecated/api-utils');

到

const { validateOptions: valid } = require('sdk/deprecated/api-utils');

（4）找到line 137，然后根据自己的喜好修改变量css。像这样：

...
let css = [
  ".panel-inner-arrowcontent, .panel-arrowcontent {padding: 0;}",  //original css rule
  ".panel-inner-arrowcontent, .panel-arrowcontent  {opacity: 0.50; border-radius: 0.35in;}"  //additional css rules:  semi-transparent panel with rounded borders.
].join(" ");
...

（5）使用panel.js的修改版本而不是sdk附带的版本。

那应该是它。就像我说的那样，它并不是特别优雅。

Firefox附加组件SDK：如何使Panel透明化

1 个答案: