firefox - Firefox Add-on SDK：如何使 Panel 透明

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 对象以便从现有面板调整/扩展或组成另一个面板。

开始：

(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) 找到第 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自带的那个。

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