MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.

From Firefox 53 onwards, no new legacy add-ons will be accepted on addons.mozilla.org (AMO).

From Firefox 57 onwards, WebExtensions will be the only supported extension type, and Firefox will not load other types.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to WebExtensions if they can. See the "Compatibility Milestones" document for more.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

This article offers code snippets demonstrating common tasks you may wish to perform.

Opening new browser windows

To open a new browser window, you can simply use window.open(). However, window.open() returns a Window object for content, not for the browser window itself, so you should get the chrome Window first. The simplest way to do that is to use nsIWindowMediator.

Example

window.open(); //This open a pop-up window that could be "blocked" client-side

//The following code generate an error as describe in the following warning box
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"] 
                   .getService(Components.interfaces.nsIWindowMediator);
var newWindow = wm.getMostRecentWindow("navigator:browser");
var b = newWindow.gBrowser; 

The code generate a TypeError from firefox console. In particular the Components.classes is undefined and The Components object is deprecated. It will soon be removed. 

Draggable windows

To make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. The following code does not care which element is clicked on, simply responding to all mousedown events equally. You could improve this code by checking the event.target element and only setting the startPos if the element matches some criteria.

Example

 

var startPos = null;
function mouseDown(event) {
  startPos = [event.clientX, event.clientY];
}
function mouseMove(event) {
  if (startPos) {
    var newX = event.screenX - startPos[0];
    var newY = event.screenY - startPos[1];
    window.moveTo(newX, newY);
  }
}
function mouseUp(event) {
  startPos = null; 
}

window.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
window.addEventListener("mousemove", mouseMove, false);

XUL Titlebar Element

XUL Applications can take advantage of the titlebar element to achieve a similar result without extra JavaScript code.

Re-using and focusing named windows

While specifying the name parameter to window.open or window.openDialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in. Additionally, if the window is in the background, it may not be brought to the front. This code will check for a window of the provided name. If it finds one, it focuses it. If it doesn't, it opens one.

var wenum = Components.classes["@mozilla.org/embedcomp/window-watcher;1"]
                      .getService(Components.interfaces.nsIWindowWatcher)
                      .getWindowEnumerator();
var index = 1;
var windowName = "yourWindowName";
while (wenum.hasMoreElements()) {
  var win = wenum.getNext();
  if (win.name == windowName) {
    win.focus();
    return;
  }
  index++
}
window.open("chrome://to/your/window.xul", windowName, "features");

Uniquely identifying DOM windows

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

In Gecko, each DOM window has a unique 64-bit ID number. You can get a DOM window's ID using the nsIDOMWindowUtils attribute outerWindowID. Each time a new window is created, it gets assigned an ID one greater than the last created window. This can be used in cases in which you need to uniquely identify a DOM window during the duration of the application's lifespan:

var util = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
var windowID = util.outerWindowID;

After running that code, windowID contains the outer window's unique ID.

Similarly, you can get the current inner window ID using the nsIDOMWIndowUtils attribute currentInnerWindowID:

var util = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
var windowID = util.currentInnerWindowID;

Programatically modifying HTML

When attempting to modify HTML elements, it is important to specify the namespace. For example, the following code will add a horizontal rule.

var hr = document.createElementNS("http://www.w3.org/1999/xhtml", "html:hr");
document.getElementById("id1").appendChild(hr);

See also

Document Tags and Contributors

 Last updated by: bunnybooboo,