Estoy tratando de crear mi primera extensión del navegador Chrome que ejecuta automáticamente un modo oscuro personalizado en un sitio web que uso con frecuencia. Funciona casi a la perfección, pero cada vez que se carga una nueva página hay un breve destello del CSS original antes de que se active mi versión actualizada.

ejemplo de flash

¿Cómo reduzco (o elimino) este flash?

manifiesto.json:

 { "name": "Ecosia Darkmode", "description": "Browse Ecosia in dark mode", "version": "1.0", "manifest_version": 2, "icons": { "16": "/images/get_started16.png", "32": "/images/get_started32.png", "48": "/images/get_started48.png", "128": "/images/get_started128.png" }, "background": { "scripts": ["background.js"], "persistent": false }, "permissions": ["https://www.ecosia.org/", "tabs"] }

fondo.js:

 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { if (changeInfo.status === "loading") { if (tab.url.includes("https://www.ecosia.org/")) { chrome.tabs.insertCSS(tabId, { file: "dark.css" }, () => { console.log("Converted to darkmode."); }) } } })

oscuro.css:

 :root { --color-background-primary: #202124!important; /* Background colour */ etc