Support live updates on firefox

src/content.ts

@@ -45,6 +45,9 @@ import * as documentScript from "../dist/js/document.js";
 import { Tooltip } from "./render/Tooltip";
 import { isDeArrowInstalled } from "./utils/crossExtension";
 import { runCompatibilityChecks } from "./utils/compatibility";
+import { cleanPage } from "./utils/pageCleaner";
+
+cleanPage();
 
 const utils = new Utils();
 
@@ -1356,18 +1359,20 @@ async function channelIDChange(channelIDInfo: ChannelIDInfo) {
 }
 
 function videoElementChange(newVideo: boolean): void {
-    if (newVideo) {
-        setupVideoListeners();
-        setupSkipButtonControlBar();
-        setupCategoryPill();
-    }
+    waitFor(() => Config.isReady()).then(() => {
+        if (newVideo) {
+            setupVideoListeners();
+            setupSkipButtonControlBar();
+            setupCategoryPill();
+        }
     
-    checkPreviewbarState();
+        checkPreviewbarState();
     
-    // Incase the page is still transitioning, check again in a few seconds
-    setTimeout(checkPreviewbarState, 100);
-    setTimeout(checkPreviewbarState, 1000);
-    setTimeout(checkPreviewbarState, 5000);
+        // Incase the page is still transitioning, check again in a few seconds
+        setTimeout(checkPreviewbarState, 100);
+        setTimeout(checkPreviewbarState, 1000);
+        setTimeout(checkPreviewbarState, 5000);
+    })
 }
 
 function checkPreviewbarState(): void {
@@ -2331,11 +2336,17 @@ function previousChapter(): void {
 function addHotkeyListener(): void {
     document.addEventListener("keydown", hotkeyListener);
 
-    document.addEventListener("DOMContentLoaded", () => {
+    const onLoad = () => {
         // Allow us to stop propagation to YouTube by being deeper
         document.removeEventListener("keydown", hotkeyListener);
         document.body.addEventListener("keydown", hotkeyListener);
-    });
+    };
+
+    if (document.readyState === "complete") {
+        onLoad();
+    } else {
+        document.addEventListener("DOMContentLoaded", onLoad);
+    }
 }
 
 function hotkeyListener(e: KeyboardEvent): void {
@@ -2392,7 +2403,7 @@ function hotkeyListener(e: KeyboardEvent): void {
  */
 function addCSS() {
     if (!isFirefoxOrSafari() && Config.config.invidiousInstances.includes(new URL(document.URL).hostname)) {
-        window.addEventListener("DOMContentLoaded", () => {
+        const onLoad = () => {
             const head = document.getElementsByTagName("head")[0];
 
             for (const file of utils.css) {
@@ -2404,7 +2415,13 @@ function addCSS() {
 
                 head.appendChild(fileref);
             }
-        });
+        };
+
+        if (document.readyState === "complete") {
+            onLoad();
+        } else {
+            document.addEventListener("DOMContentLoaded", onLoad);
+        }
     }
 }
 

src/help.ts

@@ -4,7 +4,11 @@ import { showDonationLink } from "./utils/configUtils";
 
 import { waitFor } from "./maze-utils";
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();

src/options.ts

@@ -24,7 +24,11 @@ let embed = false;
 const categoryChoosers: CategoryChooser[] = [];
 const unsubmittedVideos: UnsubmittedVideos[] = [];
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();

src/permissions.ts

@@ -7,7 +7,11 @@ const utils = new Utils();
 // Probably due to cyclic dependencies
 Config.config;
 
-window.addEventListener('DOMContentLoaded', init);
+if (document.readyState === "complete") {
+    init();
+} else {
+    document.addEventListener("DOMContentLoaded", init);
+}
 
 async function init() {
     localizeHtmlPage();

src/render/GenericNotice.tsx

@@ -47,6 +47,7 @@ export default class GenericNotice {
         const referenceNode = options.referenceNode ?? utils.findReferenceNode();
     
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);

src/render/SkipNotice.tsx

@@ -38,6 +38,7 @@ class SkipNotice {
         idSuffix += amountOfPreviousNotices;
 
         this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
         this.noticeElement.id = "sponsorSkipNoticeContainer" + idSuffix;
 
         referenceNode.prepend(this.noticeElement);

src/utils/pageCleaner.ts

@@ -0,0 +1,6 @@
+export function cleanPage() {
+    // For live-updates
+    for (const element of document.querySelectorAll("#categoryPillParent, .playerButton, .sponsorThumbnailLabel, #submissionNoticeContainer, .sponsorSkipNoticeContainer, #sponsorBlockPopupContainer")) {
+        element.remove();
+    }
+}