Allow outer popup stylesheets to be injected

2 files changed, 54 insertions, 0 deletions

diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index a553e514..dcfb2a09 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -64,3 +64,7 @@ function apiForward(action, params) {
 function apiFrameInformationGet() {
     return utilInvoke('frameInformationGet');
 }
+
+function apiInjectStylesheet(css) {
+    return utilInvoke('injectStylesheet', {css});
+}
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 880e3efe..73ed37e0 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -38,6 +38,7 @@ class Popup {
         this.visible = false;
         this.visibleOverride = null;
         this.options = null;
+        this.stylesheetInjectedViaApi = false;
         this.updateVisibility();
     }
 
@@ -75,6 +76,7 @@ class Popup {
             });
             this.observeFullscreen();
             this.onFullscreenChanged();
+            this.setCustomOuterCss(this.options.general.customPopupOuterCss, false);
             this.isInjected = true;
         });
     }
@@ -334,6 +336,23 @@ class Popup {
         this.invokeApi('setCustomCss', {css});
     }
 
+    async setCustomOuterCss(css, injectDirectly) {
+        // Cannot repeatedly inject stylesheets using web extension APIs since there is no way to remove them.
+        if (this.stylesheetInjectedViaApi) { return; }
+
+        if (injectDirectly || Popup.isOnExtensionPage()) {
+            Popup.injectOuterStylesheet(css);
+        } else {
+            if (!css) { return; }
+            try {
+                await apiInjectStylesheet(css);
+                this.stylesheetInjectedViaApi = true;
+            } catch (e) {
+                // NOP
+            }
+        }
+    }
+
     clearAutoPlayTimer() {
         if (this.isInjected) {
             this.invokeApi('clearAutoPlayTimer');
@@ -375,4 +394,35 @@ class Popup {
     get url() {
         return window.location.href;
     }
+
+    static isOnExtensionPage() {
+        try {
+            const url = chrome.runtime.getURL('/');
+            return window.location.href.substr(0, url.length) === url;
+        } catch (e) {
+            // NOP
+        }
+    }
+
+    static injectOuterStylesheet(css) {
+        if (Popup.outerStylesheet === null) {
+            if (!css) { return; }
+            Popup.outerStylesheet = document.createElement('style');
+            Popup.outerStylesheet.id = "yomichan-popup-outer-stylesheet";
+        }
+
+        const outerStylesheet = Popup.outerStylesheet;
+        if (css) {
+            outerStylesheet.textContent = css;
+
+            const par = document.head;
+            if (par && outerStylesheet.parentNode !== par) {
+                par.appendChild(outerStylesheet);
+            }
+        } else {
+            outerStylesheet.textContent = '';
+        }
+    }
 }
+
+Popup.outerStylesheet = null;