Estoy creando mi primera extensión de Chrome, necesito renderizar la extensión HTML una vez que la extensión esté cargada dependiendo de algunos datos que precreé manualmente, no los obtuve de ningún servidor externo, he creado todos los activos necesarios de la extensión y ahora necesita usar popup.js para crear el marcado de extensión
popup.js
const body = document.getElementById('body') // extenstion HTML body const bookList = document.getElementById('book-list') body.addEventListener('load', async () => { let [tab] = await chrome.tabs.query({ active:true,currentWindow:true}) chrome.scripting.executeScript({ target: { tabId: tab.id }, function: renderExtension, }); }); function renderExtension() { chrome.storage.sync.get("books", ({ books}) => { books.forEach(book=> { bookList.innerHTML += `<input placeholder=${book.name}>` }) }) } y en background.js
let books = [ //books objects ] chrome.runtime.onInstalled.addListener(() => { chrome.storage.sync.set({ books}); });Desafortunadamente, esto no funciona, no obtengo nada en la extensión, es mi primera extensión, así que puede ser que me esté perdiendo algo y necesito saber qué estoy haciendo mal aquí.
chrome.scripting.executeScript ejecuta el script en la página web activa en la pestaña, pero la ventana emergente es una página separada con una extensión chrome: // URL que se muestra en una ventana separada, completamente ajena a la página web. El script popup.js que carga en su popup.html se ejecuta en esa ventana, por lo que simplemente debe acceder a su window , document y DOM directamente.
Tampoco es necesario el script en segundo plano y el almacenamiento, simplemente coloque los datos en popup.js :
const books = [ {name: 'foo'}, {name: 'bar'}, ]; document.getElementById('book-list').innerHTML = books.map(b => `<input placeholder=${b.name}>`).join(''); Tampoco es necesario esperar a que se load , simplemente coloque su secuencia de comandos al final del cuerpo en popup.html :
<body> <div id="book-list"></div> <script src=popup.js></script> </body>