面板透明度firefox addon

我正在編寫一個firefox插件並使用面板在視頻上顯示信息，但一切正常，儘管我無法使面板透明。我在HTML文件中定義面板樣式如下：面板透明度firefox addon

<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爲textarea的

它不工作，無論哪種方式。我究竟做錯了什麼？這甚至有可能嗎？

從我的理解：

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

僅適用於面板內容不面板本身。我在這個主題上找到了post，但它已經過時了，因爲post中提到的sdk/panel.js不再一樣了。

無論如何，我試圖下載panel.js並替換當前的，但它似乎並沒有影響我顯示的面板。面板仍然是白色的，border-radius選項也不起作用。（我應該說我用「sdk /」替代了所有的「./」，如post中提到的那樣）。

來源

2015-06-27 2A-66-42

任何人都可以給我一個小費，尋找什麼？這可能是最愚蠢的問題，但我真的沒有線索。您的幫助將不勝感激！ –

您的問題只包含HTML代碼。它不包含任何顯示您如何創建面板的代碼。一個完整的[mcve]通常是最好的，所以如果任何人想要實際解決你的問題的答案，他們不必從頭開始創建所有東西（例如，你應該讓人們更容易，不難，人們回答你的問題）。它還可以幫助所有人保持在實際所需的同一頁面上。當您提出有關使代碼按您想要的方式工作（即調試）的問題時，還需要代碼才能將問題作爲堆棧溢出的主題。 – Makyen

我發現，你可以創建一個透明面板是這樣的：

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

來源

2016-03-22 04:27:14

您無法對SDK中提供的面板進行設置，只有內容但您完全可以按照您提及的步驟進行操作並提供修改過的面板。

來源

2015-07-08 09:19:47 EdoPut

查看我的soluiton如何樣式sdk面板:) – Noitidart

確定這裏是一個純插件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);');

來源

2015-10-08 13:48:11 Noitidart

我必須刪除「接受答案」標誌，因爲此解決方案不會使面板透明。我發現的唯一解決方案就是我的文章。 –

沒問題，謝謝你讓我知道。您應該將解決方案添加到此區域並接受它。所以其他正在搜索的人會知道該怎麼做。 – 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年;-)

來源

2016-07-28 00:58:44 jaredhirsch

面板透明度firefox addon

回答

相關問題