Don't insert CSS on player element. Insert CSS into page instead. Popup doesn't work, still.

src/ext/conf/ExtensionConf.js

@@ -940,7 +940,8 @@ var ExtensionConf = {
           videoAncestor: 1,
           // additionalCss: '',
         }
-      }
+      },
+      css: '',
       // videoElement: {        // extra stuff for video tag
       //   querySelectors: [],    // array of strings with css selectors
       //   userCss: [],         // additional styles that user can define for video element

src/ext/lib/comms/CommsClient.js

@@ -151,6 +151,10 @@ class CommsClient {
     return Promise.resolve(true);
   }
 
+  async sendMessage(message) {
+    await this.sendMessage_nonpersistent(message);
+  }
+
   registerVideo(){
     if (Debug.debug && Debug.comms) {
       console.log(`[CommsClient::registerVideo] <${this.commsId}>`, "Registering video for current page.");

src/ext/lib/comms/CommsServer.js

@@ -13,7 +13,7 @@ class CommsServer {
 
     if (BrowserDetect.firefox) {
       browser.runtime.onConnect.addListener(p => ths.onConnect(p));
-      browser.runtime.onMessage.addListener(m => ths.processReceivedMessage_nonpersistent(m));
+      browser.runtime.onMessage.addListener((m, sender) => ths.processReceivedMessage_nonpersistent(m, sender));
     } else {
       chrome.runtime.onConnect.addListener(p => ths.onConnect(p));
       chrome.runtime.onMessage.addListener((m, sender, callback) => ths.processReceivedMessage_nonpersistent(m, sender, callback));
@@ -214,6 +214,14 @@ class CommsServer {
   processReceivedMessage_nonpersistent(message, sender, sendResponse){
     if (Debug.debug && Debug.comms) {
       console.log("%c[CommsServer.js::processMessage_nonpersistent] Received message from background script!", "background-color: #11D; color: #aad", message, sender);
+
+    if (message.cmd === 'inject-css') {
+      this.server.injectCss(message.cssString, sender);
+      return;
+    }
+    if (message.cmd === 'remove-css') {
+      this.server.removeCss(message.cssString, sender);
+      return;
     }
 
     if (message.forwardToContentScript) {

src/ext/lib/video-data/PageInfo.js

@@ -27,6 +27,18 @@ class PageInfo {
     this.scheduleUrlCheck();
 
     this.currentZoomScale = 1;
+
+    try {
+      const playerStyleString = this.settings.active.sites[window.location.host].css;
+      if (playerStyleString) {
+        this.comms.sendMessage({
+          cmd: 'inject-css',
+          cssString: playerStyleString
+        });
+      }
+    } catch (e) {
+      // do nothing. It's ok if there's no special settings for the player element
+    }
   }
 
   destroy() {
@@ -40,6 +52,18 @@ class PageInfo {
       this.comms.unregisterVideo(video.id)
       video.destroy();
     }
+
+    try {
+      playerStyleString = this.settings.active.sites[window.location.host].css;
+      if (playerStyleString) {
+        this.comms.sendMessage({
+          cmd: 'remove-css',
+          cssString: playerStyleString
+        });
+      }
+    } catch (e) {
+      // do nothing. It's ok if there's no special settings for the player element
+    }
   }
 
   reset() {

src/ext/lib/video-transform/Resizer.js

@@ -621,32 +621,14 @@ class Resizer {
     }
     const styleString = this.buildStyleString(styleArray);
 
-    // see if we have any extra css for the player element:
-    let playerStyleString;
-    try {
-      playerStyleString = this.settings.active.sites[window.location.host].DOM.player.additionalCss;
-      if (playerStyleString) {
-        const playerStyleArrayString = this.player.eleemnt.getAttribute('style');
-        const playerStyleArray = this.buildStyleArray(playerStyleString, playerStyleString);
-        playerStyleString = this.buildStyleString(playerStyleArray);
-      }
-    } catch (e) {
-      // do nothing. It's ok if there's no special settings for the player element
-    }
-
     // build style string back
-    this.setStyleString(styleString, playerStyleString);
+    this.setStyleString(styleString);
   }
 
-  setStyleString (styleString, playerStyleString) {
+  setStyleString (styleString) {
     this.video.setAttribute("style", styleString);
     this.currentStyleString = styleString;
 
-    if (playerStyleString) {
-      this.player.element.setAttribute('style', styleString);
-      this.currentPlayerStyleString = playerStyleString;
-    }
-
     this.currentCssValidFor = this.conf.player.dimensions;
     
     if (this.restore_wd) {
@@ -713,7 +695,6 @@ class Resizer {
 
     // first, a quick test:
     cssValid &= this.currentVideoSettings.validFor.width === this.conf.player.dimensions.width;
-    cssValid &= this.currentVideoSettings.validFor.height === this.conf.player.dimensions.height;
 
     if (cssValid) {
       const styleString = this.video.getAttribute('style');

src/ext/uw-bg.js

@@ -52,6 +52,30 @@ class UWServer {
     });
   }
 
+  async injectCss(css, sender) {
+    try {
+      if (Debug.debug) {
+        console.log("[uwbg::injectCss] Injecting CSS:", css, sender);
+      }
+      if (BrowserDetect.firefox || BrowserDetect.edge) {
+        await browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      } else if (BrowserDetect.chrome) {
+        chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      }
+    } catch (e) {
+      if (Debug.debug) {
+        console.error("Error while injecting css:", {error: e, css, sender});
+      }
+    }
+  }
+  removetCss(css, sender) {
+    if (BrowserDetect.firefox || BrowserDetect.edge) {
+      browser.tabs.removeCSS(sender.tab.idd, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+    } else if (BrowserDetect.chrome) {
+      chrome.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+    }
+  }
+
   scheduleGc(timeout) {
     if (this._gctimeout) {
       return;

src/popup/panels/SiteDetailsPanel.vue

@@ -72,15 +72,23 @@
                 type="number" 
          />
       </div>
-      <div class="flex flex-column">
+      
-        <div class="flex label-secondary form-label">Additional css</div>
+    </div>
-        <input type="text"
+
+    <div class="label">
+      Additional css<br/><small>for {{site}}</small>
+    </div>
+    <div class="description">
+      This css will be inserted into webpage every time it loads.
+    </div>
+    <div class="flex flex-column">
+        <textarea
                v-model="playerCss"
                @change="updatePlayerCss"
                @blur="updatePlayerCss"
-        />
+        >
+        </textarea>
       </div>
-    </div>
   </div>
 </template>
 
@@ -121,12 +129,17 @@ export default {
     try {
       this.playerManualQs = settings.active.sites[this.site].DOM.player.manual || this.playerManualQs;
       this.playerQs = settings.active.sites[this.site].DOM.player.querySelectors;
-      this.playerCss = settings.active.sites[this.site].DOM.player.additionalCss;
+      this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor || this.playerByNodeIndex;
-      this.playerByNodeIndex = settings.active.sites[this.site].DOM.player.useRelativeAncestor;
       this.playerParentNodeIndex = settings.active.sites[this.site].DOM.player.videoAncestor;
     } catch (e) {
       // that's here just in case relevant settings for this site don't exist yet
     }
+
+    try {
+      this.playerCss = settings.active.sites[this.site].css || '';
+    } catch (e) {
+      // that's here just in case relevant settings for this site don't exist yet
+    }
   },
   methods: {
     ensureSettings(scope) {
@@ -169,9 +182,9 @@ export default {
       this.settings.active.sites[this.site].DOM.player.querySelectors = this.playerQs;
       this.settings.save();
     },
-    updateVideoCss() {
+    updatePlayerCss() {
       this.ensureSettings('player');
-      this.settings.active.sites[this.site].DOM.player.additionalCss = this.playerCss;
+      this.settings.active.sites[this.site].css = this.playerCss;
       this.settings.save();
     },
     updatePlayerParentNodeIndex() {
@@ -181,20 +194,20 @@ export default {
     },
     toggleVideoManualQs() {
       this.ensureSettings('video');
-      this.settings.active.sites[this.site].DOM.video.enabled = !this.settings.active.sites[this.site].DOM.video.enabled;
       this.videoManualQs = !this.videoManualQs;
+      this.settings.active.sites[this.site].DOM.video.enabled = this.videoManualQs;
       this.settings.save();
     },
     togglePlayerManualQs() {
       this.ensureSettings('player');
-      this.settings.active.sites[this.site].DOM.player.enabled = !this.settings.active.sites[this.site].DOM.player.enabled;
       this.playerManualQs = !this.playerManualQs;
+      this.settings.active.sites[this.site].DOM.player.enabled = this.playerManualQs;
       this.settings.save();
     },
     toggleByNodeIndex() {
       this.ensureSettings('player');
-      this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = !this.settings.active.sites[this.site].DOM.player.useRelativeAncestor;
       this.playerByNodeIndex = !this.playerByNodeIndex;
+      this.settings.active.sites[this.site].DOM.player.useRelativeAncestor = this.playerByNodeIndex;
       this.settings.save();
     },
   }

src/res/css/common.scss

@@ -93,7 +93,6 @@ a:hover {
 }
 
 /* INPUT FORMATTING */
-
 input[type="number"], input[type="text"], input {
   outline: none;
   background-color: $input-background;
@@ -105,6 +104,10 @@ input[type="number"], input[type="text"], input {
   border: 1px solid $input-border;
 }
 
+input:disabled {
+  background: #444444;
+  color: darken($text-normal, 50%);
+}
 
 /* ELEMENT POSITIONING */