Estoy creando mi primera extensión de Chrome (usando MV3) y estoy tratando de usar un botón en popup.html para enviar una ID de pestaña de popup.js a content.js. Necesito que content.js o background.js service worker ejecuten una función JS que recopile datos de objetos DOM de la pestaña y luego ejecuten procesos adicionales en ella. Esto parece algo tan simple de lograr a pesar de haber pasado muchas horas de frustración sin una comunicación exitosa entre los scripts.

No estoy seguro del diseño adecuado, pero muchas fuentes sugieren llamar a chrome.tabs.query dentro de popup.js desde el ID del botón para enviar el ID de la pestaña a content.js, así que ese ha sido mi enfoque. Todavía no puedo encontrar orientación sobre cuál (content.js o background.js) es una mejor práctica de diseño para colocar procesos como la captura de datos DOM.

En mi enfoque, sigo recibiendo este error de conexión en la consola:

Runtime.lastError no verificado: no se pudo establecer la conexión. El extremo receptor no existe.

Aquí está mi intento más cercano:

manifiesto

 { "manifest_version": 3, "name": "Data Analyzer", "description": "Analyzes some page data", "version": "1.0", "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["*://google.com/*"], "js": ["content.js"] } ], "action": { "default_icon": "chrome_ext.png", "default_popup": "popup.html" }, "host_permissions": ["*://google.com/*"], "permissions": ["tabs", "activeTab"] }

emergente.js

 document.addEventListener('DOMContentLoaded', documentEvents, false); function myAction(input) { chrome.tabs.query({currentWindow: true, active: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {"message": "start"}, function(response) { console.log(response.status); }); }); } function documentEvents() { document.getElementById('submit_btn').addEventListener('click', function() { myAction(document.getElementById('value_textbox')); }); }

contenido.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log("content.js runtime function has fired"); if(request.message === "start") { start(); } } ); function start() { alert("Started content.js"); // DOM data grab and additional processing goes here }

La más mínima ayuda significaría mucho. Gracias por tu tiempo.