Firefox Extentions

Explicación de como interactuan las páginas de las extensiones

	•	content.js: Interactúa directamente con la página web.
	•	background.js: Maneja tareas de fondo y coordina la extensión.
	•	popup.js: Controla el comportamiento del popup de la extensión y puede enviar mensajes a background.js y content.js.

Sent tasks to background.js

Puedes enviar un mensaje desde el popup.js al background.js usando browser.runtime.sendMessage.

POP UP
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        // Enviar un mensaje al background script
        browser.runtime.sendMessage({ action: "startService" }).then(response => {
            console.log("Respuesta del background:", response);
        });
    });
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "startService") {
        console.log("Iniciar servicio desde background script");
        // Realizar alguna acción y enviar una respuesta
        sendResponse({ status: "Servicio iniciado" });
    }
});

Sent tasks to content.js

Puedes usar browser.tabs.query para obtener la pestaña actual y luego browser.tabs.sendMessage para enviar un mensaje al content.js.

document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        // Obtener la pestaña activa
        browser.tabs.query({ active: true, currentWindow: true }).then(tabs => {
            let tabId = tabs[0].id;
            // Enviar un mensaje al content script
            browser.tabs.sendMessage(tabId, { action: "changeColor" });
        });
    });
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "changeColor") {
        console.log("Mensaje recibido en content script");
        document.body.style.backgroundColor = "lightblue";
    }
});