Quiero obtener una variable del html de una página para cargar una URL con esta variable en una nueva pestaña. Como soy un principiante, seguí el tutorial "Primeros pasos" de Google en el que construyen una extensión que funciona como ventana emergente y estoy construyendo a su alrededor.
El código que obtiene la variable funciona perfectamente cuando lo pruebo en la consola, pero cuando hago clic en el botón dice "Error de tipo no detectado: no se pueden leer las propiedades de nulo (leyendo 'getAttribute')" . Me imagino que sucede porque la ventana emergente tiene un html separado, por lo que el javascript no se inyecta en la página que quiero.
¿Existe una solución rápida para que la ventana emergente acceda al html de la página? Si no, ¿cómo podría funcionar esta característica de otra manera?
// Get variable const client = document.querySelector('[data-client-id]').getAttribute("data-client-id"); // When button is clicked, open new tab and paste URL var button = document.getElementById("btn1"); button.addEventListener("click", function () { chrome.tabs.create({ url: "https://www.huggy.app/panel/contacts/" + client }); });Para acceder al html de la página, necesita un script de contenido.
Puede adaptar el ejemplo que se encuentra en la documentación :
function injectedFunction() { return document.querySelector('[data-client-id]').getAttribute('data-client-id'); } const button = document.getElementById('btn1'); button.addEventListener('click', function() { chrome.tabs.query({active:true, currentWindow:true},tabs => { chrome.scripting.executeScript({ target: { tabId: tabs[0].id }, function: injectedFunction }, results => { chrome.tabs.create({url: 'https://huggy.app/panel/contacts/' + results[0].result}); }); });