Firefox Add-on SDK: how to make Panel transparent

问题

Developing a Firefox Add-on. Anyone can please help to figure out how to make a Panel transparent. Here is the code to show a panel:

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

回答1:

I found a solution, but it isn't pretty since sdk/panel.js doesn't seem to expose the raw Panel object in order to tweak/extend or compose a another Panel from the existing one.

Here goes:

(1) Get the source for sdk/panel.js here: panel.js (raw) or from within sdk folder found in your addon xpi.

(2) Add it to your addon package as a new file.

(3) Change the requires parameters of this cloned file (lines 16-24) so that they point to the correct location from your addon.

example: change

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

to

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

(4) Find line 137, and modify the variable css to your liking. Like so:

...
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) Use the modified version of panel.js instead of the one that came with the sdk.

That should be it. Like I said, it isn't particularly elegant.

来源：https://stackoverflow.com/questions/16448018/firefox-add-on-sdk-how-to-make-panel-transparent