Fatal编程技术网
  • javascript/
  • Javascript 面板传输firefox插件

Javascript 面板传输firefox插件

javascript firefox-addon

Javascript 面板传输firefox插件,javascript,firefox-addon,firefox-addon-sdk,Javascript,Firefox Addon,Firefox Addon Sdk,我正在编写一个firefox插件，并使用一个面板在视频上显示信息，尽管我无法使面板透明，但一切都正常。我在html文件中定义了面板样式，如下所示： <html> <head> <meta charset="utf-8" /> <style type="text/css" media="all"> html { opacity:0.1; border-st

我正在编写一个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>
仅适用于面板内容，不适用于面板本身。我在这个主题上找到了一个答案，但它已经过时了，因为在中提到的sdk/panel.js已经不一样了

无论如何，我尝试下载panel.js并替换当前的panel.js，但它似乎根本不会影响我显示的面板。面板仍为白色，
边框半径
选项也不起作用。（我应该说，我用其中提到的“sdk/”替换了所有的“/”。

您不能对sdk中提供的面板进行样式化，只能对其内容进行样式化，但您完全可以按照您提到的过程提供修改过的面板。

好的，这里是一个纯插件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);');

让myPanel=Panel({
宽度：180，
身高：180，
contentURL:'数据：text/html，这是我的文本区域'
})
让{getActiveView}=require（“sdk/view/core”）；
getActiveView（myPanel）.setAttribute（“noautohide”，true）；
getActiveView（myPanel）.setAttribute（“级别”，“顶部”）；
getActiveView（myPanel）.setAttribute（“样式”，“背景色：rgba（0,0,0,0.2）；”）；
我发现可以通过以下方式创建具有透明度的面板：

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

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

谁能告诉我该找什么？这可能是最愚蠢的问题，但我真的不知道。非常感谢您的帮助！您的问题只包含HTML代码。它不包含任何显示如何创建面板的代码。一个完整的答案通常是最好的，这样，如果有人真的想为你的问题找到答案，他们就不必从头开始创造一切（也就是说，你应该让人们回答你的问题更容易，而不是更难）。这也有助于让每个人都了解自己真正想要的东西。当你问一个关于如何让代码按你想要的方式工作（即调试）的问题时，关于堆栈溢出主题的问题也需要代码。请参阅下面关于如何设置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';
}