new-tab-opener

A utility class for opening new tabs in the browser from an async function.

Why

Some browsers (like Firefox and Safari) block popups when they are not associated with an user event such as a button onclick event.

To get around this, you have to open the new tab directly and when you are done doing async loading, you set the url of the tab to the desired url.

Usage

Most simple implementation.

import { NewTabOpener } from "new-tab-opener";

const newTab = new NewTabOpener();

newTab.open("https://google.com");

When using async loading, what is the case most of the time, you can use the following implementation.

import { NewTabOpener } from "new-tab-opener";

const openPage = async () => {
    // Construct NewTabOpener which opens a new tab if needed beforehand.
    const newTab = new NewTabOpener();
    
    try {
        // Load the required data.
        const response = await asyncFunction();
        
        // Open the new tab with the url or sets the url of the already opened tab.
        newTab.open(response.url);
    } catch (error) {
        console.error(error);
    }
}

License

MIT © Zandor Smith