Estoy tratando de editar un lugar en un sitio web para mostrar texto. Lo probé en la consola de sitios web y todo funciona. me sale este error
TypeError no capturado: no se pueden establecer propiedades de indefinido (configurando 'innerHTML')
emergente.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!") } }); });Gracias con antelación por ayudar.
El problema 1 es que llama a ShowAnswers, en lugar de hacer referencia a él, por lo que se ejecuta en el contexto de la página de extensión, no en la página web.
El problema 2 es que los parámetros de executeScript en ManifestV3 se especifican de manera diferente.
El problema 3 es que tabs es una matriz, por lo que tabs.id es nulo.
Para ver estos problemas, debe usar las herramientas de desarrollo correctas , por ejemplo, la ventana emergente es una ventana separada, por lo que tiene sus propias herramientas de desarrollo separadas, que puede abrir haciendo clic derecho dentro de la ventana emergente y seleccionando "inspeccionar" en el menú.
Arreglar:
chrome.scripting.executeScript({ target: {tabId: tabs[0].id}, func: ShowAnswers, args: [xhr.responseText], });