¿Cómo puedo comunicarme entre background.js y popup.js?
Tengo una extensión, con un script de fondo:
<code>"background": { "scripts": ["scripts/background.js"] }, </code>
y un script de contenido:
<code>"content_scripts": [ { "matches": ["*://*/*"], "js": ["scripts/content_script.js"] } ], </code>
una ventana emergente(popup.html)
, y un script emergente(popup.js)
. popup.js no está registrado en el archivo de manifiesto, se ocupa del aspecto de popup.html y escucha las acciones de usuario realizadas en popup.html, como hacer clic en un botón.
Quiero hacer una extensión, queenvía por correo electrónico la página de la pestaña actual, y para esto, necesito obtener la página DOM con elcontent_script
, pasar datos (DOM) a labackground script
. Después de esto, cuando el usuario activa un evento en popup.html, popup.js captura este evento y quiero que popup.js pueda obtener los datos pasados (DOM) de background.js. ¿Cómo podría hacer esto? Entonces, mi pregunta es, ¿cómo podría comunicarme entre background.js y popup.js?
Encontré una respuesta a mi propia pregunta:
Gracias Elvis, creo que resolví el problema; Solo necesito obtener el DOM del sitio en el script de contenido, pero la solución de mi pregunta fue esta:
content_script.js
<code> // SEND DOM structure to the background page chrome.extension.sendRequest({dom: "page DOM here"}); </code>
background.html
<code><html> <head> <script> chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { if(request.dom != "") var theDOM = request.dom; console.log(request.dom); // page DOM here -> works chrome.extension.sendRequest({theDOM: theDOM}); // theDOM : "page DOM here" }); </script> </head> <body> </body> </html> </code>
popup.js
<code>var dom; chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { if(request.theDOM != ""){ console.log("popup request: "+request.theDOM); dom = request.theDOM; } }); // HANDLE TAB_1 REQUESTS (EMAIL PAGE) // --------------------------------- $("#send").click(function(){ console.log(dom); // page DOM here } </code>
Gracias por la ayuda ;)