In a Firefox Add-on how to resolve the error "window is not defined" when adding an eventlistener to the overall browser window?

Question

I try to add an eventListener to my extension. I want to execute a function everytime a tab is active (got clicked by the user) or is new loaded.

I tried this:

window.addEventListener("DOMContentLoaded", checkHost(), false);

It gives me the error

Uncaught Reference Error: window is not defined

It drives me cracy, i can't find examples on the web. Please help me.

I know nothing about firefox addons, but just a suggestion - you probably don't want `checkHost()`...I think you'd just want `checkHost` (unless `checkHost` returns a function when called). `addEventListener` expects a reference to a function — Ian, Oct 07 '13 at 20:09
I'm guessing you could do what you need with Greasemonkey, by the sound of it. — Joe Simmons, Oct 07 '13 at 20:13
I will share this extension with around 60-80 ppl, I won't force them to get greasemonkey first, @lan that's true. — Standard, Oct 07 '13 at 20:16

score 2 · Answer 1 · answered Oct 18 '14 at 15:18

For those wanting to use the window object, you can create it using this code:

var { viewFor } = require("sdk/view/core");
var window = viewFor(require("sdk/windows").browserWindows[0]);

This code can be found on MDN at: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/windows

score 1 · Accepted Answer · answered Oct 09 '13 at 20:36

Via your current status: http://builder.addons.mozilla.org/package/206579/latest

The online builder is an online IDE for developing with the Addon-SDK, where window isn't in global scope -- it's not any specific window.

You can include the tabs module and listen for ready events or activate (a tab is now focused) events, which may be what you want.

let tabs = require('sdk/tabs');
tabs.on('ready', function (tab) {
  console.log(tab.url + ' is ready!');
});

can you please tell me why `browser.tabs` showing browser is undefined? — Rahul Sharma, Mar 23 '17 at 06:16

Makyen · Answer 3 · 2014-10-18T20:04:16.837

The issue is that Firefox extensions do not run in the context of any particular window. As such, they often do not have the window object defined, or it is defined as something which you are not expecting if you are not familiar with writing extension code. This is particularly true if you are approaching this from the point of view of writing JavaScript for use within an HTML page. Extensions operate in a significantly larger context which includes the entire browser and all windows and tabs. Thus, there is no automatically appropriate window to use as the window object. In the context of an extension, each HTML page is just a part of the whole.

You can obtain each primary browser window through the use of nsIWindowMediator. The following function, from MDN, will run the function you pass to it once for each open window:

Components.utils.import("resource://gre/modules/Services.jsm");
function forEachOpenWindow(todo)  // Apply a function to all open browser windows
{
    var windows = Services.wm.getEnumerator("navigator:browser");
    while (windows.hasMoreElements())
      todo(windows.getNext().QueryInterface(Components.interfaces.nsIDOMWindow));
}

You will often want to find the window for the most recent browser/tab which was accessed by the user. The following code will define and set the window variable to the most recently used browser/tab. It will work either in the Add-on SDK, or in overlay/bootstrap extensions depending on which portion you un-comment.

For more information about using windows in a Firefox extension, you should see Working with windows in chrome code.

if (window === null || typeof window !== "object") {
    //If you do not already have a window reference, you need to obtain one:
    //  Add a "/" to un-comment the code appropriate for your add-on type.
    /* Add-on SDK:
    var window = require('sdk/window/utils').getMostRecentBrowserWindow();
    //*/
    /* Overlay and bootstrap (from almost any context/scope):
    var window=Components.classes["@mozilla.org/appshell/window-mediator;1"]
                         .getService(Components.interfaces.nsIWindowMediator)
                         .getMostRecentWindow("navigator:browser");        
    //*/
}

Alternately using Services.jsm to access nsIWindowMediator:

/* Overlay and bootstrap:
Components.utils.import("resource://gre/modules/Services.jsm");
//*/
if (window === null || typeof window !== "object") {
    //If you do not already have a window reference, you need to obtain one:
    //  Add a "/" to un-comment the code appropriate for your add-on type.
    /* Add-on SDK:
    var window = require('sdk/window/utils').getMostRecentBrowserWindow();
    //*/
    /* Overlay and bootstrap (from almost any context/scope):
    var window = Services.wm.getMostRecentWindow("navigator:browser");
    //*/
}

score 0 · Answer 4 · answered Oct 07 '13 at 20:36

0

You have to put the eventlistener inside a script referenced in the browser.xul overlay:

Try it like this:

window.addEventListener("DOMContentLoaded", function() {checkHost();}, false);

answered Oct 07 '13 at 20:36

Filipe Silva

21,189
5
53
68

still, window is not defined..:( – Standard Oct 07 '13 at 20:52
Are you sure you have a – Filipe Silva Oct 07 '13 at 21:02
Well, i have no overlay. I'm only creating an widget. – Standard Oct 07 '13 at 21:17
Are you using the addon-sdk? – Filipe Silva Oct 07 '13 at 21:18
No, I'm using the Online Builder: https://builder.addons.mozilla.org/package/206579/latest/ – Standard Oct 07 '13 at 21:33

In a Firefox Add-on how to resolve the error "window is not defined" when adding an eventlistener to the overall browser window?

4 Answers4

Linked