How to call window.open from popup

[R0land013]

What happened?

I am developing a browser extension called Dev Links, and when the user clicks on the extension button, a new tab must be open to show a list of links an resources. My project has the src folder, and I create following the steps of the plasmo documentation.

Here is the code of the popup:

import { useEffect } from "react";


function IndexPopup() {

    useEffect(() => {
        window.open('./tabs/browse-links.html');
    });

    return (<></>);
}

export default IndexPopup;

It works correctly in Chrome, Brave, Opera and Edge. But in Firefox, when I click the extension button nothing happens. I have debugged it and I have added a log inside the useEffect, and the log appears in the console however the window.open call does not work.

I have tried to add a button to the popup, and click in that button programatically, but it does not work too. Here is what I tried:

import { useEffect } from "react";
import Button from "~components/Button";
import OpenIcon from "data-base64:~assets/icons/general/open.svg";
import LogoIcon from "data-base64:~assets/icons/general/logo.svg";
import "./style.css";


function IndexPopup() {

    useEffect(() => {
        const popupButton = document.getElementById('popup-button');
        popupButton.click();
    }, []);

    return (<div className="w-56 h-56 flex flex-col items-center justify-center bg-app-background">

        <div className="flex flex-col w-full items-center">

            <div className="flex flex-row items-center justify-center">

                <img
                    src={LogoIcon}
                    className="w-8" />

                <h1 className="text-header-color font-bold text-3xl">Dev Links</h1>

            </div>

            <span className="text-header-color text-[0.75rem] mt-1">
                All links a developer would need
            </span>

        </div>

        <Button
            id="popup-button"
            onClick={() => {
                window.open('./tabs/browse-links.html');
            }}
            className="mt-10">

            <span className="font-bold text-base">
                Browse Links!
            </span>

            <img
                src={OpenIcon}
                className="w-5 ml-1" />
        </Button>
    </div>);
}

export default IndexPopup;

In the meanwhile I decided to show the popup only to firefox users:

import { useEffect } from "react";
import Button from "~components/Button";
import OpenIcon from "data-base64:~assets/icons/general/open.svg";
import LogoIcon from "data-base64:~assets/icons/general/logo.svg";
import "./style.css";


function IndexPopup() {

    useEffect(() => {
        if(!navigator.userAgent.toLowerCase().includes('firefox')) {
            window.open('./tabs/browse-links.html');
        }
    }, []);

    return (<div className="w-56 h-56 flex flex-col items-center justify-center bg-app-background">

        <div className="flex flex-col w-full items-center">

            <div className="flex flex-row items-center justify-center">

                <img
                    src={LogoIcon}
                    className="w-8" />

                <h1 className="text-header-color font-bold text-3xl">Dev Links</h1>

            </div>

            <span className="text-header-color text-[0.75rem] mt-1">
                All links a developer would need
            </span>

        </div>

        <Button
            onClick={() => {
                window.open('./tabs/browse-links.html');
            }}
            className="mt-10">

            <span className="font-bold text-base">
                Browse Links!
            </span>

            <img
                src={OpenIcon}
                className="w-5 ml-1" />
        </Button>
    </div>);
}

export default IndexPopup;

Could you say why this happes? I think it must be a bug. But if it does not have a quick fix, please could you tell me some workaround so all the user could have the same experience?

Version

Latest

What OS are you seeing the problem on?

Linux

What browsers are you seeing the problem on?

Firefox

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[louisgv]

AFAIK, some browser will not let you auto trigger window.open, it has to have user context. You can just use BGSW with the createTab directly, no need to proxy through the popup API - use the action API onClick instead and you'd be all set.