Quiero llamar a una función que se implementa en el script de contenido de una extensión, que obtiene el texto seleccionado de las páginas web, de una función en el script de fondo que luego se llamará en un oyente conectado a un elemento del menú.
¿Es eso posible y cuál sería la forma más corta de hacerlo?
Aquí están los fragmentos de código relevantes:
manifiesto.json
"background": { "scripts": ["background.js"] }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ]contenido.js
var text = ""; function highlightedText() { text = content.getSelection(); }fondo.js
function listenerFunction() { highlightedText(); /* Doing various stuff that have to use the text variable */ } browser.menus.onClicked.addListener((info, tab) => { highlightedText(); });Obviamente, el código anterior no funciona ya que la función "resaltada" ahora es visible desde el script de fondo.
Entonces, ¿cuál es la forma más rápida/más corta de hacer que el código funcione?
ESTÁ BIEN. Tengo que copiar esto desde una de mis propias extensiones privadas, pero la esencia es esta:
En la secuencia de comandos de fondo, configure el menú y asigne una función al accesorio onclick:
browser.menus.create({ id: 'images', title: 'imageDownload', contexts: ['all'], onclick: downloadImages }, onCreated);Aún en el mismo script, obtenga la información de la pestaña actual y envíe un mensaje al script de contenido.
function getCurrentTab() { return browser.tabs.query({ currentWindow: true, active: true }); } async function downloadImages() { const tabInfo = await getCurrentTab(); const [{ id: tabId }] = tabInfo; browser.tabs.sendMessage(tabId, { trigger: 'downloadImages' }); }El script de contenido escucha el mensaje:
browser.runtime.onMessage.addListener(({ trigger }) => { if (trigger === 'downloadImages') doSomething(); });Y una vez que se realiza el procesamiento, pase un nuevo mensaje al script de fondo.
function doSomething() { const data = [1, 2, 3]; browser.runtime.sendMessage({ trigger: 'downloadImages', data }); }Y en un script de fondo separado, tengo algo como lo siguiente:
browser.runtime.onMessage.addListener(function (data) { const { trigger } = data; if (trigger === 'downloadImages') ... });