Merge pull request #9 from sameerasw/performance

Performance #6

1 files changed, 98 insertions, 3 deletions

diff --git a/inject-css.js b/inject-css.js
index d53a915..f37abd7 100644
--- a/inject-css.js
+++ b/inject-css.js
@@ -4,6 +4,91 @@ let logging = false;
 
 if (logging) console.log("inject-css.js script loaded");
 
+// Run as early as possible in the document lifecycle
+const implementImmediateInjection = () => {
+  // Create a style element immediately to avoid any delay - do this before anything else
+  const styleElement = document.createElement("style");
+  styleElement.id = "zen-internet-styles";
+
+  // Set highest priority
+  styleElement.setAttribute("data-priority", "highest");
+
+  // Add !important to all rules to override any existing styles
+  styleElement.innerHTML = `
+    /* Prevent FOUC - temporarily hide content until styles are applied */
+    body { opacity: 0 !important; transition: opacity 0.1s ease-in !important; }
+  `;
+
+  // Insert as the first element of head if possible
+  if (document.head) {
+    document.head.insertBefore(styleElement, document.head.firstChild);
+  } else {
+    // If head isn't ready yet (very early execution), add to documentElement
+    document.documentElement.appendChild(styleElement);
+
+    // Set up mutation observer to move it to head when head becomes available
+    new MutationObserver((mutations, observer) => {
+      if (document.head) {
+        if (styleElement.parentNode !== document.head) {
+          document.head.insertBefore(styleElement, document.head.firstChild);
+        }
+        observer.disconnect();
+      }
+    }).observe(document.documentElement, { childList: true });
+  }
+
+  return styleElement;
+};
+
+// Create style element immediately
+const styleElement = implementImmediateInjection();
+
+// Function to apply styles immediately when available
+function applyStyles(css) {
+  if (!css) return;
+
+  // Add the CSS
+  try {
+    // For immediate application, directly set textContent
+    // as this is more reliably applied in early document stages
+    styleElement.textContent = css.trim() + `
+/* Remove FOUC prevention once styles are loaded */
+body { opacity: 1 !important; }`;
+
+    // After a very short delay (to ensure CSS application), ensure body is visible
+    setTimeout(() => {
+      if (document.body) {
+        document.body.style.opacity = "1";
+      }
+    }, 10);
+
+    if (logging) console.log("Styles applied:", css.length, "bytes");
+  } catch (e) {
+    console.error("Error applying styles:", e);
+  }
+}
+
+// Listen for style data from background script for immediate injection
+browser.runtime.onMessage.addListener((message) => {
+  if (message.action === "applyStyles" && message.css) {
+    applyStyles(message.css);
+    return true;
+  }
+});
+
+// Send hostname to background script as early as possible
+browser.runtime
+  .sendMessage({
+    action: "contentScriptReady",
+    hostname: window.location.hostname,
+    url: window.location.href,
+  })
+  .catch((err) => {
+    if (logging) console.log("Background script not ready yet:", err);
+  });
+
+// Main function - but we don't wait for this before applying styles
+// This is just a backup in case background script injection fails
 (async () => {
   try {
     const settings = await browser.storage.local.get("transparentZenSettings");
@@ -15,7 +100,19 @@ if (logging) console.log("inject-css.js script loaded");
     }
 
     if (logging) console.log("Styling is enabled");
+
+    // Tell background script we're ready and what page we're on
+    browser.runtime.sendMessage({
+      action: "contentScriptReady",
+      hostname: window.location.hostname,
+    });
+
     const data = await browser.storage.local.get("styles");
+    if (!data.styles) {
+      if (logging) console.log("No styles data available");
+      return;
+    }
+
     if (logging) console.log("Styles data loaded", data);
 
     const currentUrl = window.location.hostname;
@@ -103,9 +200,7 @@ async function injectCSS(hostname, features) {
   }
 
   if (combinedCSS) {
-    const style = document.createElement("style");
-    style.textContent = combinedCSS;
-    document.head.appendChild(style);
+    applyStyles(combinedCSS);
     if (logging) console.log(`Injected custom CSS for ${hostname}`);
   }
 }