Implementing a Tab on Firefox Extension Upon Window Load

I have a requirement to add a tab whenever a new Firefox window is loaded for my bootstrap extension. Below is the code snippet I am using:

var WindowListener = {
    setupBrowserUI: function(window) {
        window.gBrowser.selectedTab=window.gBrowser.addTab("http://google.com");
    },
    tearDownBrowserUI: function(window) {
    },
    // nsIWindowMediatorListener functions
    onOpenWindow: function(xulWindow) {
        var domWindow = xulWindow.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                                 .getInterface(Components.interfaces.nsIDOMWindow);
        // Wait for it to finish loading
        domWindow.addEventListener("load", function listener() {
            domWindow.removeEventListener("load", listener, false);
            // If this is a browser window then setup its UI      
            if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("http://google.com");
        }, false);
    },
    onCloseWindow: function(xulWindow) {
    },
    onWindowTitleChange: function(xulWindow, newTitle) {
    }
};

let wm = Components.classes["@mozilla.org/appshell/window-mediator;1"].
       getService(Components.interfaces.nsIWindowMediator);
// Wait for any new browser windows to open
wm.addListener(WindowListener);

You can experiment with this code in Scratchpad.

The onOpenWindow method contains the logic to open a tab in a new window, but it seems to execute before the window is fully loaded, causing issues with adding tabs in this state. This contradicts the MDN code that suggests "Wait for it to finish loading".

While setting a timeout using the setTimeout function does solve the problem, it may not be the most elegant solution.

domWindow.setTimeout(function(){domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("http://google.com");},1000);

Is there a way to add a tab for new Firefox windows only after the window has completely loaded without relying on setTimeouts?

javascriptfirefoxfirefox-addon

Answer №1

Personally, I recommend using the setTimeout(..., 0) trick. It's proven to be a dependable choice and is frequently employed in Firefox's own codebase :p

if (domWindow.gBrowser) {
  setTimeout(function() {
    domWindow.gBrowser.selectedTab =
      domWindow.gBrowser.addTab("http://google.com");
  }, 0);
}

Answer №2

There is something really strange going on here that I just can't wrap my head around. Starting from this line:

if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser") domWindow.gBrowser.selectedTab=domWindow.gBrowser.addTab("");

We need to remove the domWindow.gBrowser.selectedTab = part and make it look like this instead:

if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser")  { 
     domWindow.gBrowser.addTab("http://google.com");
}

This code successfully loads the URL, but it doesn't select the tab. So, I had a completely fresh idea of trying out something new, only to be met with failure:

if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser")  { 
     var tab = domWindow.gBrowser.addTab("http://google.com");
}

As soon as I added that var tab = at the beginning, everything fell apart. My plan was to add this next line: 

domWindow.gBrowser.selectedTab = tab

But even that didn't work: loadOneTab has an inBackground parameter, which supposedly should focus the tab if set to false:

if (domWindow.document.documentElement.getAttribute("windowtype")=="navigator:browser")  { 
     domWindow.gBrowser.loadOneTab("http://google.com", {inBackground:false});
}

I am absolutely stumped because this code won't load the URL properly, although it does manage to focus the tab. If you switch inBackground to true, the URL loads but the tab stays unfocused. It's all very bizarre...

I'm sharing this in the hopes that others might pinpoint where things are going wrong. Perhaps we need to file a report on bugzilla.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Electron to extract and render content from a local file into HTML code

I am struggling to find a solution for automatically reading and parsing a local csv file in an electron application. When I use 'fs' to open the file, I can't figure out how to pass the contents into the HTML window. One option is to use a ...

javascripthtmlnode.jselectron

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

javascripthtmlcsshover

Guide to packaging TypeScript type declarations with an npm JavaScript library

I'm facing an issue with providing TypeScript type definitions for a JavaScript library. The library itself is written in TypeScript and transpiled by Babel, although this detail shouldn't affect the outcome. The problem lies in the fact that ne ...

javascripttypescriptnpm

Encountering errors like "Cannot find element #app" and "TypeError: Cannot read property 'matched' of undefined" typically happens when using vue-router

Recently, I decided to dive into Vue.js as a way to revamp an existing frontend app that was originally built using Scala Play. My goal is to explore the world of component-based web design and enhance my skills in this area. Initially, everything seemed ...

javascriptvue.jsvue-router

The Javascript function will only initiate upon a manual reload of the page

My function is working perfectly, but only after I reload the page once it has been loaded. This function is a timer that starts counting down from 10 to 0 as soon as the page loads (which is the intended behavior). However, when I first land on the page ...

javascripthtmlflow-router

Combine div elements with identical class

Is there a way to utilize jQuery in order to enclose groups of elements with the same class within a div? I have been searching for a solution, but haven't found one yet. Here's an example of the HTML: <div class="view-content"> < ...

javascriptjqueryhtmlclasswrapall

The JSONP request connected to the user input field and button will only trigger a single time

Hello all, I'm new to this and have been searching the internet high and low to see if anyone has encountered a similar issue before, but haven't had any luck. I've been attempting to set up a JSONP request to Wikipedia that is connected to ...

javascriptjsonajaxinputjsonp

Angular ng-repeat encounters difficulty in parsing Arabic object

As I create a JSON object that contains Arabic content shown below $scope.arabicContent = ["ردهة","قاعة الاجتماعات","مبرمجين الجوال","المدراء","المحاسبة","المحاسبة","المبرمجين‎","مطبخ‎ ...

javascriptangularjsangularjs-ng-repeat

The Next.js React app is constantly loading without any interruptions

Just diving into Next.js and attempting to transform a single HTML page into a Next.js website in order to integrate sanity. Managed to import all necessary assets, but stuck with the persistent preloader issue. After inspecting elements, noticed that a fi ...

javascriptreactjsnext.jsfrontend

Utilizing highlight.js for seamless integration with vue2-editor (Quill)

I am having trouble connecting vue2-editor (based on quill) with highlight.js Despite my efforts, I keep encountering an error message that reads: Syntax module requires highlight.js. Please include the library on the page before Quill. I am using nu ...

javascriptnode.jsquillhighlight.js

Is there a way to point my Github URL to the index file within a specific folder?

The actual working location of my website: My desired working location for the site: Originally, I had my index.html file in the main repository, but later moved it to an html folder along with other html files for better organization. How can I ensure t ...

javascripthtmlcssgitgithub

Struggling with updating an array using React's setState

My issue lies with setState not properly updating my todoItems array. After reviewing similar posts on this forum, I made changes to my addTodoItem() function by utilizing a function and the spread operator. While a new item is successfully added to the ar ...

javascriptarraysreactjsstate

Why is my return statement in JavaScript Nextjs mapping values twice?

I am running into an issue where my code is displaying the output twice, and I can't seem to figure out why. Any assistance would be greatly appreciated. Here is a link to the current output that I am receiving. I suspect that the problem lies in sett ...

javascriptreactjsnext.jsweb3js

Change the locale on the current path with a query in Next.js by utilizing the router

Managing locale changes centrally can be tricky. When a user selects a new locale from a list, I use useRouter to redirect them to the current page in the selected locale like this: var router = useRouter(); const changeLocale = (selectedLocale) => { ...

javascriptroutesnext.js

Is there a way to access the origin of an iframe?

I am facing a challenge with an HTML page that includes an iframe. Within the iframe, there are text and buttons that trigger onclick scripts. However, I'm having difficulty retrieving the values of getBoundingClientRect when I specify the ID of the b ...

javascripthtmliframe

Displaying/Concealing specific choices using jQuery

Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...

javascriptjqueryhtmlcss

The URL for this page is not within the app's designated domains and will not open Facebook Dialogs (FB UI)

I am currently working on integrating Facebook UI Dialogs into my website. My goal is to add custom actions when users share a post from my site. I have created my app, added the app URL and domain (which is the same as the URL), and included all necessa ...

javascriptfacebookfacebook-javascript-sdkfacebook-sharerfacebook-share

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

javascripthtmlangulartypescriptangular2-template

Error: The data from the intermediate value cannot be parsed using the parseFromString() method and replaced with another value,

I'm working on a project where I need to display parsed HTML content within an element. However, before displaying it, I need to make some changes to the HTML using the `replace` method. But unfortunately, I encountered a TypeError: (intermediate valu ...

javascriptdomtypeerror

Associate the callback function with a directive that does not have an isolated scope

Ensuring the correct context when binding a callback function to a directive is crucial. When working with an isolated scope, this task is easily accomplished. <bar-foo callback="mycontroller.callback()"></bar-foo> The directive code: ... ...

javascriptangularjsangularjs-directive