Hay esta pregunta SO similar a mi pregunta: envíe un mensaje a la página de fondo, actualice el html y luego muéstrelo en una pestaña . Pero primero estoy ejecutando un script JS en el contexto de la pestaña actual, es decir, este script para encontrar la palabra resaltada se inyecta en la página web actual. Entonces, no puedo usar las API de Chrome.
Estoy tratando de crear una extensión de Chrome que obtenga el significado de la palabra resaltada/seleccionada después de hacer clic en un botón en la ventana emergente de la extensión. Aquí está mi popup.html :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="button.css" /> </head> <body> <button id="meaning" type="button">Find Meaning</button> <script src="popup.js"></script> </body> </html>Aquí está mi popup.js :
const meanButton = document.getElementById("meaning"); meanButton.addEventListener("click", async () => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: findMeaning, }); }); function findMeaning(){ const word = window.getSelection().toString(); // code to send the word to another HTML file that opens in a new tab }Digamos que tengo un archivo mean.html en el directorio de mi extensión y es como:
<html> <body> <p id="para"> the answer appears here </p> <script> function showMeaning(wordToFindMeaning) { const meaning = await fetch(`someAPI/${wordToFindMeaning}`); document.getElementById('para').innerText = meaning; } showMeaning(word); </script>¿Cómo paso la palabra resaltada de popup.js a este mean.html ? No sé si se podría usar la API chrome.storage . Si lo usamos, la palabra no debería persistir en la memoria después de que se abra la página mean.html y se muestren los significados de las palabras.