get manifest v3 to approximately work

package.json

@@ -71,6 +71,8 @@
     "webpack": "^4.44.0",
     "webpack-chrome-extension-reloader": "^0.8.3",
     "webpack-cli": "^3.3.12",
-    "webpack-shell-plugin": "^0.5.0"
+    "webpack-shell-plugin": "^0.5.0",
+    "@vue/cli": "^4.5.15",
+    "@vue/cli-plugin-typescript": "^4.5.15"
   }
 }

src/ext/UWServer.ts

@@ -71,11 +71,32 @@ export default class UWServer {
   }
 
   async injectCss(css, sender) {
+    if (!css) {
+      return;
+    }
     try {
-      if (BrowserDetect.firefox || BrowserDetect.edge) {
-        browser.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
-      } else if (BrowserDetect.anyChromium) {
-        chrome.tabs.insertCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      if (BrowserDetect.firefox) {
+        browser.scripting.insertCSS({
+          target: {
+            tabId: sender.tab.id,
+            frameIds: [
+              sender.frameId
+            ]
+          },
+          css,
+          origin: "USER"
+        });
+      } else {
+        await chrome.scripting.insertCSS({
+          target: {
+            tabId: sender.tab.id,
+            frameIds: [
+              sender.frameId
+            ]
+          },
+          css,
+          origin: "USER"
+        });
       }
     } catch (e) {
       this.logger.log('error','debug', '[UwServer::injectCss] Error while injecting css:', {error: e, css, sender});
@@ -91,8 +112,8 @@ export default class UWServer {
 
   async replaceCss(oldCss, newCss, sender) {
     if (oldCss !== newCss) {
-      this.injectCss(newCss, sender);
       this.removeCss(oldCss, sender);
+      this.injectCss(newCss, sender);
     }
   }
 

src/ext/conf/BrowserDetect.js

@@ -5,7 +5,11 @@ if (process.env.CHANNEL !== 'stable') {
 }
 
 function detectEdgeUA() {
-  return /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent);
+  try {
+    return /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent);
+  } catch {
+    return undefined;
+  }
 }
 
 function getBrowserObj() {
@@ -26,10 +30,10 @@ const BrowserDetect = {
   isEdgeUA: detectEdgeUA(),
   browserObj: getBrowserObj(),
   getURL: (url) => getURL(url),
-} 
+}
 
 if (process.env.CHANNEL !== 'stable') {
   console.info("BrowserDetect loaded:\n\nprocess.env.BROWSER:", process.env.BROWSER, "\nExporting BrowserDetect:", BrowserDetect);
 }
 
-export default BrowserDetect;
+export default BrowserDetect;

src/ext/lib/Logger.ts

@@ -268,8 +268,18 @@ class Logger {
   //   return logfileStr;
   // }
   getFileLogJSONString() {
+    let site;
+
+    // NOTE: no more window object on UWServer side of things!
+    // (or rather, we could get it, but we don't care enough to get it in this instance)
+    try {
+      site = window && window.location;
+    } catch {
+      site = 'uw-bg';
+    }
+
     return {
-      site: window && window.location,
+      site,
       log: JSON.stringify(this.history),
     }
   }

src/manifest.json

@@ -1,22 +1,18 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Ultrawidify",
   "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
   "version": "5.1.7",
-  "applications": {
-    "gecko": {
-      "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
-    }
-  },
   "icons": {
     "32":"res/icons/uw-32.png",
     "64":"res/icons/uw-64.png"
   },
-  "browser_action": {
+  "action": {
     "default_title": "Ultrawidify",
     "default_popup": "popup/popup.html"
   },
 
+
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [
@@ -30,10 +26,12 @@
     "all_frames": true
   }],
 
+  "minimum_chrome_version": "93",
   "background": {
-    "persistent": true,
+    "service_worker": "uw-bg.js",
+    "module": true,
     "scripts": [
-      "ext/uw-bg.js"
+      "uw-bg.js"
     ]
   },
 
@@ -45,18 +43,29 @@
 
 
   "web_accessible_resources": [
-    "./*",
-    "ext/*",
-    "res/fonts/*",
-    "res/css/*",
-    "res/img/settings/about-bg.png",
-    "res/icons/*",
-    "res/img/*"
+    {
+      "resources": [
+        "./*",
+        "ext/*",
+        "res/fonts/*",
+        "res/css/*",
+        "res/img/settings/about-bg.png",
+        "res/icons/*",
+        "res/img/*",
+        "csui/*"
+      ],
+      "matches": [
+        "*://*/*"
+      ]
+    }
   ],
   "permissions": [
     "storage",
     "activeTab",
-    "<all_urls>"
+    "scripting"
+  ],
+  "host_permissions": [
+    "*://*/*"
   ],
   "optional_permissions": [
     "downloads"

src/manifest.v2.json

@@ -0,0 +1,60 @@
+{
+  "manifest_version": 2,
+  "name": "Ultrawidify",
+  "description": "Removes black bars on ultrawide videos and offers advanced options to fix aspect ratio.",
+  "version": "5.99.5",
+  "applications": {
+    "gecko": {
+      "id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"
+    }
+  },
+  "icons": {
+    "32":"res/icons/uw-32.png",
+    "64":"res/icons/uw-64.png"
+  },
+  "browser_action": {
+    "default_title": "Ultrawidify",
+    "default_popup": "popup/popup.html"
+  },
+
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": [
+      "common/lib/browser-polyfill.js",
+      "ext/uw.js"
+    ],
+    "all_frames": true
+  }],
+
+  "background": {
+    "persistent": true,
+    "scripts": [
+      "ext/uw-bg.js"
+    ]
+  },
+
+  "options_ui": {
+    "page": "options/options.html",
+    "browser_style": false,
+    "open_in_tab": true
+  },
+
+  "web_accessible_resources": [
+    "./*",
+    "ext/*",
+    "res/fonts/*",
+    "res/css/*",
+    "res/img/settings/about-bg.png",
+    "res/icons/*",
+    "res/img/*",
+    "csui/*"
+  ],
+  "permissions": [
+    "storage",
+    "activeTab",
+    "<all_urls>"
+  ],
+  "optional_permissions": [
+    "downloads"
+  ]
+}

src/popup/App.vue

@@ -279,12 +279,12 @@ export default {
         cmd: 'unmark-player',
         forwardToAll: true,
       });
-      if (BrowserDetect.anyChromium) {
-        chrome.extension.getBackgroundPage().sendUnmarkPlayer({
-          cmd: 'unmark-player',
-          forwardToAll: true,
-        });
-      }
+      // if (BrowserDetect.anyChromium) {
+      //   chrome.extension.getBackgroundPage().sendUnmarkPlayer({
+      //     cmd: 'unmark-player',
+      //     forwardToAll: true,
+      //   });
+      // }
     });
 
     // get info about current site from background script

src/uw-bg.js

@@ -1,9 +1,9 @@
 /**
- * NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get 
+ * NOTE: we cannot get rid of this js file. I tried for 30 seconds and I couldn't get
  * extension to work unless I kept this part of extension out of the ts file.
  */
 
-import UWServer from './UWServer';
+import UWServer from './ext/UWServer';
 
 var BgVars = {
   arIsActive: true,
@@ -12,7 +12,3 @@ var BgVars = {
 }
 
 const server = new UWServer();
-
-window.sendUnmarkPlayer = (message) => {
-  server.sendUnmarkPlayer(message)
-}

webpack.config.js

@@ -139,9 +139,9 @@ const config = {
           const jsonContent = JSON.parse(content);
           // jsonContent.version = version;
 
-          if (config.mode === 'development') {
-            jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
-          }
+          // if (config.mode === 'development') {
+          //   jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
+          // }
 
           if (process.env.CHANNEL === 'nightly') {
             jsonContent.name = "Ultrawidify - nightly";
@@ -179,8 +179,10 @@ const config = {
 
           if (process.env.BROWSER !== 'firefox') {
             jsonContent.version = jsonContent.version.replace(/[a-zA-Z-]/g, '');
-            delete jsonContent.applications;
             delete jsonContent.options_ui.browser_style;
+            delete jsonContent.background.scripts;
+          } else {
+            delete jsonContent.background.service_worker;
           }
 
           return JSON.stringify(jsonContent, null, 2);