Chrome Extention: Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

Question

我正在尝试编辑网站上的某个位置以显示文本。我已经在网站控制台中尝试过了，一切正常。我收到此错误

未捕获类型错误：无法设置未定义的属性（设置 'innerHTML'）

popup.js

let AnswerButton = document.getElementById("AnswerButton");

function ShowAnswers(answers) {
    var ans = JSON.parse(answers)
    var i = 0
    let answersString = ""

    ans.props.multiChoice.forEach(answer => {
        answer.options.forEach(fanswer => {
            if (fanswer.correct == 1) {
                i += 1
                answersString += `<p>[${i}] ${fanswer.option}</p>`
            }
        })
    })

    const collection = document.getElementsByClassName("text-gray-500 text-base");
    collection[2].innerHTML = answersString
}

AnswerButton.addEventListener("click", () => {
    chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
        var pathArray = tabs[0].url.split('/');
        var QuizNum = pathArray[5]

        if (tabs[0].url == `https://www.elearneconomics.com/student/multi-choice/${QuizNum}`) {
            var url = `https://www.elearneconomics.com/student/multi-choice/${QuizNum}`;

            var xhr = new XMLHttpRequest();
            xhr.open("GET", url);

            xhr.setRequestHeader("authority", "www.elearneconomics.com");
            xhr.setRequestHeader("method", "GET");
            xhr.setRequestHeader("path", `/student/multi-choice/${QuizNum}`);
            xhr.setRequestHeader("scheme", "https");
            xhr.setRequestHeader("accept", "text/html, application/xhtml+xml");
            xhr.setRequestHeader("accept-language", "en-US,en;q=0.9,ja-JP;q=0.8,ja;q=0.7");
            xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
            xhr.setRequestHeader("x-inertia", "true");
            xhr.setRequestHeader("x-inertia-version", "17fd9f7cedd585a570d50ad58164bdf6");
            xhr.setRequestHeader("x-requested-with", "XMLHttpRequest");
            xhr.setRequestHeader("x-xsrf-token", "Some Token");

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    chrome.scripting.executeScript(tabs.id, { function: ShowAnswers(xhr.responseText) });
                    document.getElementById("Answers").innerHTML = "Scroll Down ;)";
                }
            };

            xhr.send();
        } else {
            alert("Goto a multichoice section!")
        }
    });
});

在此先感谢您的帮助。

Answer 1

问题 1 是您调用 ShowAnswers，而不是引用它，因此它在扩展页面的上下文中运行，而不是在网页中运行。
问题2是ManifestV3中executeScript的参数指定不一样
问题3是tabs是一个数组，所以tabs.id是null。

要查看这些问题你需要use the correct devtools，比如popup是一个单独的window所以它有自己单独的devtools，你可以在里面right-clicking打开弹出窗口并在菜单中选择“检查”。

修复：

chrome.scripting.executeScript({
  target: {tabId: tabs[0].id},
  func: ShowAnswers,
  args: [xhr.responseText],
});

Chrome Extention: Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

Chrome Extention: Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

javascript

google-chrome-extension