Estoy haciendo una extensión de Chrome, que se puede encontrar aquí . Como puede ver en él, necesito el javascript para cambiar una variable, lo que cambia otra variable en la página web (suena redundante pero es necesario). En mi archivo websiteCss.css , tengo
:root{ --bg: #00ff00; } body.replit-ui-theme-root.light{ --background-default: var(--bg); }Y en mi JavaScript, tengo:
document.addEventListener('DOMContentLoaded', documentEvents , false); try{ document.getElementById('background').value = "#1BFFFF" }catch (err){ console.log(err) } function documentEvents(){ var r = document.querySelector(':root'); function reload(){ var color = document.getElementById('background').value r.style.setProperty('--bg', color); document.body.style.backgroundImage = "linear-gradient(to right, #2E3192, " + color + ")" //console.log(getComputedStyle(r).getPropertyValue('--bg')) if(Math.random(0,1) < .1){ console.log(color) } window.requestAnimationFrame(reload) } window.requestAnimationFrame(reload) }Mi sitio web/ventana emergente está cambiando sus colores para que coincidan con los nuevos, pero el sitio web que estoy editando no. ¿Puede alguien decirme por qué?
Depende de dónde se esté ejecutando tu Javascript. La ventana emergente tiene su propio HTML, JS y CSS; también lo hace la propia página web.
Si está ejecutando esto en el contexto de la ventana emergente , solo afectará los estilos emergentes.
Si ejecuta esto en el script de contenido , verá que los estilos cambian en la página web.
Consulte https://developer.chrome.com/docs/extensions/mv3/content_scripts/#functionality