Uncaught TypeError: невозможно прочитать свойства неопределенного типа (чтение «setPopup»)

Я разработал расширение Chrome, используя манифест V3. У меня есть версия 2, но она немного другая, и теперь я застрял, потому что не могу понять, где у меня проблемы и почему. Прикрепляю фото двух ошибок:

Ошибки Chrome

Вот мой текущий работающий код для файла Manifest.json:

`{
    "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"
    }
}`

Вот код 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!");
    }
});`

Вот мой код для 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.info(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"});`

Вот мой код для 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>`

Наконец, есть еще несколько файлов, которые я бы не стал публиковать, поскольку считаю, что две мои ошибки каким-то образом находятся в приведенном выше коде (кодах).

Я попробовал попросить ChatAI указать на это; но не помогло.

пытался попросить Чатай исправить ситуацию, но не решился

Ошибка означает, что chrome.browserAction — это undefined.

Pointy 05.05.2024 01:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
220
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в этой строке кода:

chrome.browserAction.setPopup({ popup: "popup/options.html" });

Согласно этой документации, вместо этого вам следует использовать метод chrome.action, поскольку метод chrome.browserAction не существует в манифесте V3: https://developer.chrome.com/docs/extensions/reference/api/action

Кроме того, вы можете просмотреть эту статью: https://developer.chrome.com/blog/mv3-actions

Другие вопросы по теме

Похожие вопросы