get manifest v3 to approximately work

package.json

@@ -28,13 +28,7 @@
     "@babel/plugin-proposal-class-properties": "^7.16.0",
     "@mdi/font": "^6.5.95",
     "@mdi/js": "^6.4.95",
-    "@types/chrome": "0.0.129",
-    "@types/core-js": "^2.5.5",
-    "@types/es6-promise": "^3.3.0",
-    "@types/firefox": "0.0.30",
     "@types/resize-observer-browser": "^0.1.6",
-    "@vue/cli": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.21.2",
     "concurrently": "^5.3.0",
@@ -47,12 +41,16 @@
     "vue-style-loader": "^4.1.3",
     "vuex": "^4.0.2",
     "vuex-webextensions": "^1.3.3",
-    "webextension-polyfill-ts": "^0.24.0"
+    "webextension-polyfill-ts": "^0.26.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
+    "@types/chrome": "0.0.240",
+    "@types/core-js": "^2.5.5",
+    "@types/es6-promise": "^3.3.0",
+    "@types/firefox": "0.0.31",
     "@types/lodash": "^4.14.176",
     "@types/node": "^14.17.32",
     "@vue/compiler-sfc": "^3.2.21",
@@ -76,6 +74,8 @@
     "webpack": "^4.46.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

@@ -85,14 +85,13 @@ export default class UWServer {
       this.settings = new Settings({logger: this.logger});
       await this.settings.init();
 
-      this.eventBus = new EventBus();
+      this.eventBus = new EventBus({isUWServer: true});
 
       for (const action in this.eventBusCommands) {
         for (const command of this.eventBusCommands[action]) {
           this.eventBus.subscribe(action, command);
         }
       }
-
       this.comms = new CommsServer(this);
       this.eventBus.setComms(this.comms);
 
@@ -109,11 +108,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});
@@ -121,7 +141,30 @@ export default class UWServer {
   }
   async removeCss(css, sender) {
     try {
-      browser.tabs.removeCSS(sender.tab.id, {code: css, cssOrigin: 'user', frameId: sender.frameId});
+      if (BrowserDetect.firefox) {
+        browser.scripting.removeCSS({
+          target: {
+            tabId: sender.tab.id,
+            frameIds: [
+              sender.frameId
+            ]
+          },
+          css,
+          origin: "USER"
+        });
+      } else {
+
+        await chrome.scripting.removeCSS({
+          target: {
+            tabId: sender.tab.id,
+            frameIds: [
+              sender.frameId
+            ]
+          },
+          css,
+          origin: "USER"
+        });
+      }
     } catch (e) {
       this.logger.log('error','debug', '[UwServer::injectCss] Error while removing css:', {error: e, css, sender});
     }
@@ -129,8 +172,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() {
+  try {
     return /Edg\/(\.?[0-9]*)*$/.test(window.navigator.userAgent);
+  } catch {
+    return undefined;
+  }
 }
 
 function getBrowserObj() {

src/ext/lib/EventBus.ts

@@ -32,9 +32,11 @@ export default class EventBus {
   private popupContext: any = {};
   // private uiUri = window.location.href;
 
-  constructor() {
+  constructor(options?: {isUWServer?: boolean}) {
+    if (!options?.isUWServer) {
       this.setupIframeTunnelling();
     }
+  }
 
   setupPopupTunnelWorkaround(context: EventBusContext): void {
     this.disableTunnel = true;

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/ext/lib/video-data/ExtensionStatus.ts

@@ -65,5 +65,5 @@ export class ExtensionStatus {
     this.refreshExtensionStatus();
   }
 
-  updateFullScreen()
+  updateFullScreen() {}
 }

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.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": {
+  "action": {
     "default_title": "Ultrawidify",
     "default_popup": "popup/popup.html"
   },
 
+
   "content_scripts": [{
     "matches": ["*://*/*"],
     "js": [
@@ -26,10 +22,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"
     ]
   },
 
@@ -40,6 +38,8 @@
   },
 
   "web_accessible_resources": [
+    {
+      "resources": [
         "./*",
         "ext/*",
         "res/fonts/*",
@@ -49,10 +49,18 @@
         "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

@@ -129,12 +129,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

@@ -3,7 +3,7 @@
  * 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

@@ -13,7 +13,7 @@ const config = {
   context: __dirname + '/src',
   entry: {
     'ext/uw': './ext/uw.js',
-    'ext/uw-bg': './ext/uw-bg.js',
+    'uw-bg': './uw-bg.js',
     'popup/popup': './popup/popup.js',
     'options/options': './options/options.js',
     'csui/csui': './csui/csui.js',
@@ -138,9 +138,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";
@@ -178,8 +178,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);