Estoy tratando de escribir una extensión experimental simple de Google Chrome que, al presionar un botón, obtenga el color de fondo de cualquier página en la que se encuentre y cambie el color del botón a ese color. Por ejemplo, si está en una página con fondo negro, el color del botón cambia a negro cuando lo presiona.
He escrito el siguiente código javascript, donde changeColor se refiere al botón en el archivo html
let changeColor = document.getElementById("changeColor"); function updateColor() { chrome.storage.sync.get("color", ({ color }) => { changeColor.style.backgroundColor = color; }); } updateColor() changeColor.addEventListener("click", async () => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: storePageBackgroundColor, }); updateColor() }); function storePageBackgroundColor() { newColor = document.body.style.backgroundColor chrome.storage.sync.set({"color": newColor}); }ahora, cuando presiono el botón una vez, no hace nada y cuando lo presiono por segunda vez, cambia el color de los botones a gris, independientemente de la página en la que me encuentre. Me gustaría saber qué errores he cometido y qué debo hacer para que el botón funcione según lo previsto. Gracias de antemano por cualquier ayuda que pueda ofrecer.
Los métodos de la API de chrome que devuelven una Promesa o pueden aceptar una devolución de llamada son asincrónicos, por lo que el trabajo se realiza después de que se completa el código de ejecución sincrónica actual, lo que significa que está llamando a updateColor demasiado pronto.
Tenga en cuenta que no necesita almacenamiento para esta tarea: simplemente pase el resultado a través de executeScript:
const changeColor = document.getElementById('changeColor'); changeColor.onclick = updateColor; updateColor(); async function updateColor() { const [tab] = await chrome.tabs.query({active: true, currentWindow: true}); const [{result}] = await chrome.scripting.executeScript({ target: {tabId: tab.id}, func: () => getComputedStyle(document.body).backgroundColor, }); changeColor.style.backgroundColor = result; } Otro posible problema es que su etiqueta <script> está en <head> , por lo que se ejecuta antes de que se agregue el elemento de botón a DOM. Puede mover la etiqueta del script justo antes de la etiqueta de cierre </body> o agregar un atributo diferido, por ejemplo, <script src=popup.js defer <script src=popup.js defer></script> .
No tengo una respuesta, pero si fuera usted, lo haría inicializando css considerando que es la base del aspecto de la página. (una sugerencia)