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

Question

I'm trying to edit a place on a website to show text. I've tried it in the websites console and it all works. I get this error

Uncaught TypeError: Cannot set properties of undefined (setting '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!")
        }
    });
});

Thanks in advance for helping.

Answer 1

• Problem 1 is that you call ShowAnswers, instead of referencing it, so it runs in the context of the extension page, not in the web page.

• Problem 2 is that parameters of executeScript in ManifestV3 are specified differently.

• Problem 3 is that tabs is an array, so tabs.id is null.

To see these problems you need to use the correct devtools, for example, the popup is a separate window so it has its own separate devtools, which you can open by right-clicking inside the popup and selecting "inspect" in the menu.

Fix:

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