how to make add-on in image?
Sebastian and I got a discussion going: http://stackoverflow.com/questions/32936737/how-to-make-a-firefox-add-on-panel-always-on-top-and-able-to-change-opacity#comment53707047_32936737
This is what I do:
const window = windowUtils.getMostRecentBrowserWindow();
const panel = window.document.createElement("panel");
panel.setAttribute( "id", addonId + "-panel" );
panel.style.backgroundColor = "rgba( 0, 0, 0, 0 )";
panel.style.border = "none";
window.document.getElementById("mainPopupSet").appendChild( panel );
You can open and close the panel with openPopup
and hidePopup
, check: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/Panels
And you will probably need an iframe
in the panel to display your content: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/frame_utils#create(document.2C_options)
1 Like
Ok here is a pure addon sdk solution:
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);');
1 Like