Firefox Add-on SDK:如何使面板透明

Question

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

    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)更改这个克隆文件的requires参数(第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自带的版本。

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