Estoy haciendo una extensión de Chrome para recopilar datos de una página web. Cuando trato de usar document.querySelectorAll() , obtiene el DOM de la ventana emergente, no de la página web actual. Intenté usar el sistema de mensajería de Chrome para solicitar y devolver el HTML, pero no funciona y me da errores.

Aquí están los archivos importantes:

manifest.json

 { "name": "Name", "description": "Description", "version": "1.0", "manifest_version": 3, "permissions": ["storage", "activeTab", "scripting", "tabs"], "host_permissions": [ "*://*.website.com/*" ], "content_scripts": [ { "matches": ["*://*.website.com/*"], "js": ["content_script.js"] } ], "action": { "default_popup": "popup.html", "default_icon": { "32": "/images/icon.png" } }, "icons": { "32": "/images/icon.png" } }

popup.js (se ejecuta dentro popup.html )

 function fetchData() { chrome.tabs.query({active: true, currentWindow: true}, (tabs) => { chrome.tabs.sendMessage(tabs[0].id, {greeting: "fetchData"}, (response) => { console.log(response); }); }); }

content_script.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { if (request.greeting === "fetchData") { sendResponse(document.querySelectorAll(".class")); } } );

El error que recibo del envío del mensaje es "Tiempo de ejecución no verificado. último error: no se pudo establecer la conexión. El extremo receptor no existe".

Cuando convierto NodeList en una matriz, no hay errores de consola, pero devuelve una lista de "[objeto Objeto]".

Por favor, hágame saber si hay una manera de hacer esto. Solo estoy usando vainilla js.