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 for textarea

它无论如何都无效。我究竟做错了什么？这甚至可能吗？

据我所知：

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

仅适用于面板内容而不适用于面板本身。我在这个主题上找到了post，但它已经过时，因为post中提到的sdk / panel.js已不再相同了。

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

Answer 1

好的，这是一个纯粹的插件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 2

您无法设置SDK中提供的面板的样式，只能设置内容，但您绝对可以按照您提及的步骤进行设置并提供修改后的面板。

Answer 3

我今天必须解决同样的问题（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年内帮助其他人; - ）

Answer 4

我发现你可以用这种方式创建一个透明的面板：

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的帮助。

面板透明firefox插件

4 个答案: