I have develeoped a Chrome Extension using manifest V3. I have one in Version 2 but it’s a bit different and now I am stuck because I cannot seem to understand where I’m having the issues at and why. I am attaching a photo of the 2 errors:

Chrome Errors

Here is my current running code for manifest.json file:

`{
    "manifest_version": 3,
    "name": "NGH Mods",
    "version": "1.0",
    "description": "Redirects requests and modifies cookie headers",
    "permissions": ["declarativeNetRequest", "scripting"],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup/popup.html"
    }
}`

Here is the code for Popup.js:

`document.getElementById("login-form").addEventListener("submit", function(event) {
    event.preventDefault();
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    // Check if username and password match
    if (username === "Admin" && password === "Password") {
        // Redirect to the desired URL
        chrome.tabs.update({ url: "YOU_URL_HERE" });
    } else {
        // Show error message or handle incorrect login
        alert("Incorrect username or password!");
    }
});`

Here is my code for background.js:

`chrome.runtime.onInstalled.addListener(() => {
    const rules = [
        {
            id: 1,
            priority: 1,
            action: { type: "redirect", redirect: { regexSubstitution: "YOU_URL_HERE" } },
            condition: {
                regexFilter: "YOU_URL_HERE",
            },
        },
    ];

    chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: [1],
        addRules: rules,
    });
});
// Function to make POST requests with JSON data
function postJson(url, json) {
    return new Promise(function(resolve, reject) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            }
        };
        xhttp.onerror = function() {
            reject();
        };
        xhttp.open("POST", url, true);
        xhttp.setRequestHeader("Content-Type", "application/json");
        xhttp.send(JSON.stringify(json));
    });
}

// Tulc class for handling login and user data
function Tulc(info) {
    this.trainerId = info.trainerId;
    this.url = {};
    this.url.login = info.baseURL + "/login/signin";
    
    this.user = null;
    this.setUser = user => this.user = user;
    this.getUser = () => this.user;
    this.login = password => {
        this.setUser(null);

        var requestInfo = {};
        requestInfo.trainerId = this.trainerId;
        requestInfo.password = password;

        return new Promise((resolve, reject) => {
            postJson(this.url.login, requestInfo).then((response) => {
                try {
                    response = JSON.parse(response);
                    if (response.status == "success") {
                        this.setUser({ name: response.name });
                        cookievalue = response.cookie;
                        resolve(this.getUser());
                    } else { reject(); }
                } catch (e) { console.log(e); reject(); }
            }, () => {
                reject();
            });
        });
    };
}

// Function to create redirects
function createRedirect(target, redirect) {
    let rewriteCookieHeader = (e) => {
        for (let header of e.requestHeaders) {
            if (header.name.toLowerCase() === "cookie") {
                header.value = "si=" + cookievalue;
            }
        }
        return { requestHeaders: e.requestHeaders };
    };

    chrome.webRequest.onBeforeSendHeaders.addListener(
        rewriteCookieHeader,
        { urls: [redirect] },
        ["blocking", "requestHeaders"]
    );

    chrome.webRequest.onBeforeRequest.addListener(
        (details) => {
            return { redirectUrl: redirect };
        },
        { urls: [target] },
        ["blocking"]
    );
}

// Initialize the extension
/*function initializeExtension() {
    var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
    chrome.browserAction.setPopup({popup: "popup/login.html"});
    pocoyo(tulc.getUser());
}*/

// Listen for extension installation or update
//chrome.runtime.onInstalled.addListener(initializeExtension);

// Listen for extension startup
//chrome.runtime.onStartup.addListener(initializeExtension);

// Listen for messages from other parts of the extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.command == "LoginPassword" && request.message) {
        tulc.login(request.message).then((user) => {
            sendResponse(user);
            pocoyo(tulc.getUser());
        }, () => {
            sendResponse();
        });
        return true;
    }
    return false;
});

// Function to handle extension setup after login
function pocoyo(user) {
    chrome.browserAction.setPopup({ popup: "popup/options.html" });
    
    createRedirect("YOU_URL_HERE", "YOU_URL_HERE");
}

var tulc = new Tulc({ baseURL: "YOU_URL_HERE" });
chrome.browserAction.setPopup({popup: "popup/login.html"});`

Here is my code for popup.html:

`<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h1 {
            margin-bottom: 20px;
            text-align: center;
        }
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        input[type="text"],
        input[type="password"] {
            width: calc(100% - 20px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 3px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>Login</h1>
    <form id="login-form">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" value="Admin" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" value="Password" required><br>
        <input type="submit" value="Login">
    </form>

    <script src="popup.js"></script>
</body>
</html>`

Lastly, there are a few more files that I wouldn’t post because I believe my two errors are somehow within the code(s) above.

I tried asking ChatAI to point it out; but didn’t help.

tried asking chatai to fix but has no resolve