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.
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],
});