面板透明度 firefox 插件

Question

我正在编写 firefox 插件并使用面板显示视频信息，一切正常，但我无法使面板透明。我在 html 文件中定义面板样式如下：

<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css" media="all">
        html
        {
            opacity:0.1;
            border-style:none;
            resize:none;
        }
        textarea
        {
            background-color:transparent;
            resize: none;
            border-style:none;
        }
    </style>
 </head>
<body>
    <textarea id="text" readonly=true rows="3" cols="60"></textarea>
</panel>
</body>
</html>

除了面板不是透明的，只有文本区域是透明的。我试过：

opacity:1 文本区域

这两种方式都行不通。我究竟做错了什么？这可能吗？

据我了解：

html
{
    opacity:0.1;
    border-style:none;
    resize:none;
}

仅适用于面板内容而不适用于面板本身。我发现 post on this subject but it is outdated since the sdk/panel.js mentionned in the post 不一样了。

无论如何，我尝试下载 panel.js 并替换当前的，但它似乎根本不影响我显示的面板。面板仍然是白色的，border-radius 选项也不起作用。（我应该说我用"sdk/"替换了所有“./”，如post中提到的）。

Answer 1

您不能为 SDK 中提供的面板设置样式，只能为内容设置样式，但您完全可以按照您提到的步骤并提供修改后的面板。

Answer 2

好的，这是一个纯粹的插件 sdk 解决方案：

let myPanel = Panel({
   width: 180,
   height: 180,
   contentURL: 'data:text/html,<textarea style="width:120px; height:80px;">this is my textarea</textarea>'
})

let { getActiveView }=require("sdk/view/core");
getActiveView(myPanel).setAttribute("noautohide", true);
getActiveView(myPanel).setAttribute("level", 'top');
getActiveView(myPanel).setAttribute("style", 'background-color:rgba(0, 0, 0, 0.2);');

Answer 3

我发现您可以通过这种方式创建具有透明度的面板：

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
   noautohide: true,
   noautofocus: false,
   level: 'top',
   style: 'padding:15px; margin:0; width:' + screen.width + 'px; height:' + screen.height + 'px; background-color:rgba(180,180,180,.5);'
}
for (var p in props) {
   panel.setAttribute(p, props[p]);
}


win.document.querySelector('#mainPopupSet').appendChild(panel);


panel.addEventListener('dblclick', function () {
   panel.parentNode.removeChild(panel)
}, false);
panel.openPopup(null, 'overlap', screen.availLeft, screen.availTop);

要嵌入 iframe，请记住将“.html”的路径设置为：
"resource://"您的插件 ID“-at-jetpack/data/custom_panel.html”。

这是我的代码：

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var screen = Services.appShell.hiddenDOMWindow.screen;
var props = {
   noautohide: true,
   noautofocus: false,
   backdrag: true,
   level: 'top',
   style: 'padding:10px; margin:0; width:530px; height:90px; background-color:rgba(180,180,180,.5);'
}
for (var p in props) {
   panel.setAttribute(p, props[p]);
}

var iframe = win.document.createElement('iframe');
iframe.setAttribute('src','resource://"id of your addon"-at-jetpack/data/custom_panel.html');
panel.appendChild(iframe);

win.document.querySelector('#mainPopupSet').appendChild(panel);


panel.addEventListener('dblclick', function () {
   panel.parentNode.removeChild(panel)
}, false);

panel.openPopup(null, 'overlap', screen.availLeft+screen.width/2-256, screen.availTop+760);

感谢 Noitidart 的帮助。

Answer 4

我今天不得不解决同样的问题（SDK 中的透明面板）。诀窍是获取匿名内容：

function makePanelTransparent() {
  // Get the panel element in the XUL DOM and make its background transparent.
  const { getActiveView } = require('sdk/view/core');
  const el = getActiveView(panel);
  el.style.background = 'rgba(0,0,0,0)';

  // Go up the XUL DOM till you hit the Document (nodeType 9).
  let parentNode = el;
  while (parentNode !== null && parentNode.nodeType !== 9) {
    parentNode = parentNode.parentNode;
  }

  if (!parentNode) {
    console.error('unable to find the document parent; giving up');
    return;
  }

  // Now that we've found it, call the document a document.
  const xulDocument = parentNode;

  // Use the document pointer to access and style 'anonymous' content.
  const xulContainer = xulDocument.getAnonymousElementByAttribute(el, 'class', 'panel-arrowcontent')
  xulContainer.style.background = 'rgba(0,0,0,0)';
  xulContainer.style.boxShadow = 'none';
}

这对我有用。希望它能在未来 1-5 年内对其他人有所帮助 ;-)

面板透明度 firefox 插件

Panel tranparency firefox addon

javascript

firefox-addon

firefox-addon-sdk