Unable to open extension by event

Question

I am trying to make a browser extention using vite

import {listAllAccounts } from './storage';
import { useNavigate } from "react-router-dom";
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'CUSTOM_WALLET_REQUEST') {
        handleWalletRequest(request.payload).then(response => {
            sendResponse({ result: response });
        }).catch(error => {
            sendResponse({ error: error.message });
        });

        return true;
    }
});

async function handleWalletRequest(payload) {
    switch (payload.method) {
        case 'eth_requestAccounts':
            const accounts = await connectToWallet();
            return accounts;
        case 'eth_sendTransaction':
            const txHash = await signTransaction(payload.params);
            return txHash;
        default:
            throw new Error('Method not supported');
    }
}

async function connectToWallet() {
    const allAccounts = await listAllAccounts();
    if (allAccounts != null && allAccounts.length > 0) {
        const accounts = allAccounts.map(account => account.address);
        return accounts;
    } else {
        throw new Error("No wallet found. Please create a wallet first.");
    }
}
`I am trying to make a browser extention using vite`
import {listAllAccounts } from './storage';
import { useNavigate } from "react-router-dom";
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === 'CUSTOM_WALLET_REQUEST') {
        handleWalletRequest(request.payload).then(response => {
            sendResponse({ result: response });
        }).catch(error => {
            sendResponse({ error: error.message });
        });

        return true;
    }
});

async function handleWalletRequest(payload) {
    switch (payload.method) {
        case 'eth_requestAccounts':
            const accounts = await connectToWallet();
            return accounts;
        case 'eth_sendTransaction':
            const txHash = await signTransaction(payload.params);
            return txHash;
        default:
            throw new Error('Method not supported');
    }
}

async function connectToWallet() {
    const allAccounts = await listAllAccounts();
    if (allAccounts != null && allAccounts.length > 0) {
        const accounts = allAccounts.map(account => account.address);
        return accounts;
    } else {
        throw new Error("No wallet found. Please create a wallet first.");
    }
}
//need help in this part
async function signTransaction(params) {

    useNavigate("/transaction/:to/:from/:gas/:value/:data/:gasPrice")

}

`this is my background script In the function signTransaction I want to open popup and the in popup navigate to /transaction/:to/:from/:gas/:value/:data/:gasPrice and in transaction send messages of success and failure some body please help async function signTransaction(params) {

useNavigate("/transaction/:to/:from/:gas/:value/:data/:ga`your text`sPrice")

} `this is my background script In the function signTransaction I want to open popup and the in popup navigate to /transaction/:to/:from/:gas/:value/:data/:gasPrice and in transaction send messages of success and failure some body please help

`when eth_sendtransaction is invoked extention window should open up to confirm transaction.``