2 files changed, 31 insertions, 20 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index d1a34f82..458ea483 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -499,19 +499,30 @@ class Backend {
         return Promise.resolve({frameId});
     }
 
-    _onApiInjectStylesheet({css}, sender) {
+    _onApiInjectStylesheet({type, value}, sender) {
         if (!sender.tab) {
             return Promise.reject(new Error('Invalid tab'));
         }
 
         const tabId = sender.tab.id;
         const frameId = sender.frameId;
-        const details = {
-            code: css,
-            runAt: 'document_start',
-            cssOrigin: 'user',
-            allFrames: false
-        };
+        const details = (
+            type === 'file' ?
+            {
+                file: value,
+                runAt: 'document_start',
+                cssOrigin: 'author',
+                allFrames: false,
+                matchAboutBlank: true
+            } :
+            {
+                code: value,
+                runAt: 'document_start',
+                cssOrigin: 'user',
+                allFrames: false,
+                matchAboutBlank: true
+            }
+        );
         if (typeof frameId === 'number') {
             details.frameId = frameId;
         }
diff --git a/ext/bg/js/settings/popup-preview-frame.js b/ext/bg/js/settings/popup-preview-frame.js
index 8fd06222..e900d4e2 100644
--- a/ext/bg/js/settings/popup-preview-frame.js
+++ b/ext/bg/js/settings/popup-preview-frame.js
@@ -22,7 +22,8 @@ class SettingsPopupPreview {
     constructor() {
         this.frontend = null;
         this.apiOptionsGetOld = apiOptionsGet;
-        this.popupInjectOuterStylesheetOld = Popup.injectOuterStylesheet;
+        this.popup = null;
+        this.popupSetCustomOuterCssOld = null;
         this.popupShown = false;
         this.themeChangeTimeout = null;
         this.textSource = null;
@@ -50,19 +51,19 @@ class SettingsPopupPreview {
         const popupHost = new PopupProxyHost();
         await popupHost.prepare();
 
-        const popup = popupHost.getOrCreatePopup();
-        popup.setChildrenSupported(false);
+        this.popup = popupHost.getOrCreatePopup();
+        this.popup.setChildrenSupported(false);
 
-        this.frontend = new Frontend(popup);
+        this.popupSetCustomOuterCssOld = this.popup.setCustomOuterCss;
+        this.popup.setCustomOuterCss = (...args) => this.popupSetCustomOuterCss(...args);
+
+        this.frontend = new Frontend(this.popup);
 
         this.frontend.setEnabled = function () {};
         this.frontend.searchClear = function () {};
 
         await this.frontend.prepare();
 
-        // Overwrite popup
-        Popup.injectOuterStylesheet = (...args) => this.popupInjectOuterStylesheet(...args);
-
         // Update search
         this.updateSearch();
     }
@@ -83,14 +84,13 @@ class SettingsPopupPreview {
         return options;
     }
 
-    popupInjectOuterStylesheet(...args) {
+    async popupSetCustomOuterCss(...args) {
         // This simulates the stylesheet priorities when injecting using the web extension API.
-        const result = this.popupInjectOuterStylesheetOld(...args);
+        const result = await this.popupSetCustomOuterCssOld.call(this.popup, ...args);
 
-        const outerStylesheet = Popup.outerStylesheet;
         const node = document.querySelector('#client-css');
-        if (node !== null && outerStylesheet !== null) {
-            node.parentNode.insertBefore(outerStylesheet, node);
+        if (node !== null && result !== null) {
+            node.parentNode.insertBefore(result, node);
         }
 
         return result;
@@ -137,7 +137,7 @@ class SettingsPopupPreview {
 
     setCustomOuterCss(css) {
         if (this.frontend === null) { return; }
-        this.frontend.popup.setCustomOuterCss(css, true);
+        this.frontend.popup.setCustomOuterCss(css, false);
     }
 
     async updateSearch() {