Tengo un popup.js :
function registerButtonAction(tabId, button, action) { // clicking button will send a message to // content script in the same tab as the popup button.addEventListener('click', () => chrome.tabs.sendMessage(tabId, { [action]: true })); } function setupButtons(tabId) { // add click actions to each 3 buttons registerButtonAction(tabId, document.getElementById('start-btn'), 'startSearch'); registerButtonAction(tabId, document.getElementById('deals-btn'), 'startDeals'); } function injectStartSearchScript() { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { // Injects JavaScript code into a page // chrome.tabs.executeScript(tabs[0].id, { file: 'main.js' }); // dd click handlers for buttons setupButtons(tabs[0].id); }); } injectStartSearchScript() // document.getElementById('inject-btn').addEventListener('click', injectStartSearchScript);Que uso para inyectar mi script en la página con el "start-btn" dentro de mi popup.html.
Este es mi main.js que incluye mis funciones a las que me gustaría llamar en una página:
function pong() { // do something } function ping() { // do something else }mi manifiesto.json :
{ "manifest_version": 2, "name": "test app", "description": "test desc", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": ["tabs", "<all_urls>"], "content_scripts": [ { "matches": ["<all_urls>"], "js": ["main.js"] } ] }Básicamente, mi configuración es que tengo un popup.html que incluye 3 botones y deberían llamar a una de las funciones dentro de mi main.js dependiendo de qué botón presione.
Pero no puedo hacer que funcione. Actualmente solo puedo hacer al menos una llamada de función si llamo directamente a pong() dentro de main.js en carga. Pero necesitaría llamar a una de las funciones después de hacer clic en un botón dentro de mi popup.html.
EDITAR: he actualizado el código por lo que entendí. Lo siento mucho, pero no entiendo qué se necesitaría cambiar más para cumplir con su propuesta. Me refiero a cómo escribirlo para que sea más correcto.
EDIT 2: eliminé la línea chrome.tabs.executeScript(tabs[0].id, { file: 'main.js' }); así como document.getElementById('inject-btn').addEventListener('click', injectStartSearchScript) y agregó injectStartSearchScript() en el archivo popup.js. ¿Es eso lo que querías decir?
Ejemplo actualizado y completo con explicación (¡ya casi llegas!)
manifiesto
Tu manifiesto se ve bien, no se necesitan cambios allí.
Esta configuración dice que cargue el script de contenido en cada pestaña. Entonces, antes de que se abra la ventana emergente, cada pestaña tendrá "main.js" inyectado (exactamente una vez).
emergente.js
El script emergente se ve bien, no se necesitan cambios allí.
La búsqueda de pestañas sigue siendo necesaria, ya que para enviar un mensaje a una pestaña específica, debe conocer su id. La ventana emergente busca la pestaña actualmente activa en la ventana actual (igual que la ventana emergente) y configura las acciones de clic del botón para enviar un mensaje a la pestaña.
principal.js
Necesitará cambios menores aquí
message.startSearch y message.startDeals : deben coincidir con los mensajes enviados desde la ventana emergente, es decir, cuando la ventana emergente envía un mensaje con contenido {startDeals: true} , la condición if es startDeals . Es coincidente con una clave en el mensaje enviado y si la clave no coincide con ninguna condición, el mensaje se ignorará. function pong() { // do something alert('Start!'); } function ping() { // do something else alert('Deals!'); } // register listener to receive messages chrome.runtime.onMessage.addListener(message => { // what to do on each received message: if (message.startSearch) pong(); else if (message.startDeals) ping(); }); // sanity check: content has loaded in the tab console.log('content loaded'); Una nota más relacionada con la depuración de extensiones (y quizás una fuente de algunos de estos problemas de depuración) cuando el script de contenido se ha configurado para inyectarse en el manifiesto, Chrome inyectará main.js en pestañas, en un contexto de extensión separado. Si, después de esta inyección, el desarrollador vuelve a cargar la extensión (flecha circular en chrome://extensions u otra herramienta), esto invalidará el contexto del script de contenido en la pestaña. La pestaña debe volver a cargarse para reactivar el script de contenido. Esto no es un problema con un usuario real, pero sucede durante la depuración, por lo que verifique que esta no sea la causa de los problemas durante la depuración.