Fixed Chrome Invidious CSS issues.

Apparently the chrome API doesn't work well with CSS.

Resolves https://github.com/ajayyy/SponsorBlock/issues/241

manifest/manifest.json

@@ -36,7 +36,8 @@
         "icons/close.png",
         "icons/PlayerInfoIconSponsorBlocker256px.png",
         "icons/PlayerDeleteIconSponsorBlocker256px.png",
-        "popup.html"
+        "popup.html",
+        "content.css"
     ],
     "permissions": [
         "storage",

src/content.ts

@@ -8,6 +8,9 @@ import runThePopup from "./popup";
 import PreviewBar from "./js-components/previewBar";
 import SkipNotice from "./js-components/skipNotice";
 
+// Hack to get the CSS loaded on permission-based sites (Invidious)
+utils.wait(() => Config.config !== null, 5000, 10).then(addCSS);
+
 //was sponsor data found when doing SponsorsLookup
 var sponsorDataFound = false;
 var previousVideoID = null;
@@ -1091,6 +1094,27 @@ function getSponsorTimesMessage(sponsorTimes) {
     return sponsorTimesMessage;
 }
 
+/**
+ * Adds the CSS to the page if needed. Required on optional sites with Chrome.
+ */
+function addCSS() {
+    if (!utils.isFirefox() && Config.config.invidiousInstances.includes(new URL(document.URL).host)) {
+        window.addEventListener("DOMContentLoaded", () => {
+            let head = document.getElementsByTagName("head")[0];
+
+            for (const file of utils.css) {
+                let fileref = document.createElement("link");
+
+                fileref.rel = "stylesheet";
+                fileref.type = "text/css";
+                fileref.href = chrome.extension.getURL(file);
+
+                head.appendChild(fileref);
+            }
+        });
+    }
+}
+
 //converts time in seconds to minutes:seconds
 function getFormattedTime(seconds) {
     let minutes = Math.floor(seconds / 60);

src/utils.ts

@@ -6,6 +6,17 @@ class Utils {
     // Contains functions needed from the background script
     backgroundScriptContainer: any = null;
 
+    // Used to add content scripts and CSS required
+    js = [
+        "./js/vendor.js",
+        "./js/content.js"
+    ];
+    css = [
+        "content.css",
+        "./libs/Source+Sans+Pro.css",
+        "popup.css"
+    ];
+
     constructor(backgroundScriptContainer?: any) {
         this.backgroundScriptContainer = backgroundScriptContainer;
     }
@@ -67,25 +78,15 @@ class Utils {
      * For now, it is just SB.config.invidiousInstances.
      */
     setupExtraSiteContentScripts() {
-        let js = [
-            "./js/vendor.js",
-            "./js/content.js"
-        ];
-        let css = [
-            "content.css",
-            "./libs/Source+Sans+Pro.css",
-            "popup.css"
-        ];
-
         let self = this;
 
         if (this.isFirefox()) {
             let firefoxJS = [];
-            for (const file of js) {
+            for (const file of this.js) {
                 firefoxJS.push({file});
             }
             let firefoxCSS = [];
-            for (const file of css) {
+            for (const file of this.css) {
                 firefoxCSS.push({file});
             }
 
@@ -119,8 +120,8 @@ class Utils {
                     // This API is experimental and not visible by the TypeScript compiler
                     actions: [new (<any> chrome.declarativeContent).RequestContentScript({
                         allFrames: true,
-                        js,
-                        css
+                        js: self.js,
+                        css: self.css
                     })]
                 };