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

【问题标题】：Firefox Add-on SDK: how to make Panel transparentFirefox Add-on SDK：如何使 Panel 透明
【发布时间】：2013-05-08 18:48:32
【问题描述】：

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

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

【问题讨论】：

标签： firefox firefox-addon firefox-addon-sdk

【解决方案1】：

我找到了一个解决方案，但它并不漂亮，因为 sdk/panel.js 似乎没有公开原始 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自带的。

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

【讨论】：

您也可以只覆盖show 函数，而不是复制完整的源代码