将插件窗口附加到 Firefox 浏览器窗口答案

【问题标题】：Attach addon window to firefox browser window将插件窗口附加到 Firefox 浏览器窗口
【发布时间】：2014-03-12 09:55:04
【问题描述】：

我正在开发一个插件，我的插件的所有按钮目前都在我创建的一个额外窗口中

window.open("chrome://.../.../gui.html", "my addon", "location=no,directories=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no");

我希望用户能够将此窗口附加到 firefox 浏览器，就像我们可以将 firebug 附加到浏览器窗口一样。我们如何做到这一点？我们如何创建这个额外的按钮，我们可以使用它来附加或分离插件窗口。

【问题讨论】：

一旦附加它不再是一个窗口，而是一个侧边栏。
我不介意将它作为侧边栏。我可能应该改写这个问题。
好的，你必须在侧边栏中重新创建你的窗口，它是不重启的吗？您可以考虑使用document.loadOverlay 加载 xul 叠加层

标签： javascript firefox firefox-addon

【解决方案1】：

您正在编写 SDK 插件吗？如果这里没有一些代码可以帮助您将窗格附加到浏览器窗口，则需要添加一个按钮来附加此窗格或将其删除并打开一个单独的窗口...

/*
Here is a basic example of creating a vbox and inserting it at the bottom, with a movable splitter.
This can be done more easily using a XUL overlay, or at least some function to handle DOM operations
(IMO only a masochist would enjoy using DOM methods!)
*/


function removePane(){
    let xxx = document.getElementById("_xxx_");
    if(xxx) xxx.parentNode.removeChild(xxx);
    let sss = document.getElementById("_sss_");
    if(sss) sss.parentNode.removeChild(sss);
}

function addPane(path){ //path can be of any protocol (chrome, file, http, ...)
    removePane(); //just to be sure, optional
    let con = document.getElementById("appcontent");
    let vbox = document.createElement("vbox");
    vbox.setAttribute("id", "_xxx_");
    vbox.setAttribute("height", "300");
    let iframe = document.createElement("iframe");
    let splitter = document.createElement("splitter");
    splitter.setAttribute("id", "_sss_");
    iframe.setAttribute("src", path);
    iframe.setAttribute("flex", "1");
    con.appendChild(splitter);
    vbox.appendChild(iframe);
    con.appendChild(vbox);
}

function setPath(path){ //path can be of any protocol (chrome, file, http, ...)
    let vbox = document.getElementById("_xxx_");
    let iframe = vbox.querySelector("iframe");
    iframe.setAttribute("src", path);
}

/* usage demo */

//when opening the content in a window, just remove the pane
//removePane();

//create and set content
addPane("file:///E:/")

//change content later if needed
setPath("file:///E:/")

【讨论】：