Working MV3

.github/workflows/node.js.yml

@@ -45,6 +45,19 @@ jobs:
         path: |
           extension-dist/
         if-no-files-found: error
+
+    - name: Build V3
+      run: npm run clean && npm run build:all -- --configV3 true # does not run tests
+      env:
+        YT_API_KEY: ${{ secrets.YOUTUBE_KEY }}
+
+    - name: Archive extension V3
+      uses: actions/upload-artifact@v3
+      with:
+        name: enhancer_for_nebula_v3-${{ env.npm_package_version }}
+        path: |
+          extension-dist/
+        if-no-files-found: error
 
   test:
     name: Test

rollup.config.mjs

@@ -130,13 +130,13 @@ const css = (args) =>
  */
 const other = (args) => {
   if (!args.silent)
-    console.info(chalk`{blueBright [Rollup build]} Copying files and generating manifest`);
+    console.info(chalk`{blueBright [Rollup build]} Copying files and generating manifest ${args.configV3 ? 'MV3' : 'MV2'}`);
   const otherglob = 'src/**/*.!(d.ts|ts|js|xcf|@(sa|sc|c)ss)';
   /**
    * @type {import('rollup').RollupOptions}
    */
   const conf = {
-    input: 'src/manifest.ts',
+    input: args.configV3 ? 'src/manifest_v3.ts' : 'src/manifest.ts',
     output: {
       dir: 'extension-dist',
       format: 'cjs',
@@ -151,7 +151,7 @@ const other = (args) => {
         __VERSION__: JSON.stringify(process.env.npm_package_version),
         preventAssignment: true,
       }),
-      writeJSON(),
+      writeJSON(args.configV3 ? 'manifest_v3.js' : 'manifest.js'),
       copy({
         targets: [
           { src: otherglob, dest: 'extension-dist' },
@@ -223,7 +223,7 @@ function remove() {
 /**
  * @returns {import('rollup').Plugin}
  */
-function writeJSON(filename = 'manifest.js') {
+function writeJSON(filename = 'manifest.js', outfilename = 'manifest.json') {
   return {
     name: 'write-json',
     generateBundle(_, bundle, isWrite) {
@@ -232,7 +232,7 @@ function writeJSON(filename = 'manifest.js') {
       const manifest = nodeEval(bundle[filename].code);
       this.emitFile({
         type: 'asset',
-        fileName: filename.replace(/\.js$/, '.json'),
+        fileName: outfilename,
         source: JSON.stringify(manifest, null, process.env.BUILD ? undefined : 2),
       });
       delete bundle[filename];

src/manifest_v3.ts

@@ -0,0 +1,65 @@
+const manifest: browser._manifest.WebExtensionManifest = {
+  manifest_version: 3,
+  name: '__MSG_title__',
+  description: '__MSG_extensionDescription__',
+  version: __VERSION__,
+  icons: {
+    128: 'icons/icon_128.png',
+    64: 'icons/icon_64.png',
+  },
+  background: {
+    service_worker: 'scripts/background_script.js',
+  },
+  content_scripts: [
+    {
+      matches: [
+        '*://*.nebula.app/*',
+        '*://*.nebula.tv/*',
+        '*://*.youtube.com/*',
+      ],
+      js: [
+        'scripts/content_script.js',
+      ],
+      css: [
+        'styles/content.css',
+      ],
+      all_frames: true,
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['scripts/player.js'],
+      matches: ['*://*.nebula.tv/*'],
+    },
+  ],
+  permissions: [
+    'storage',
+  ],
+  host_permissions: [
+    // Only firefox requires this, and the subdomain must be completely specified, otherwise the request fails
+    '*://content.api.nebula.app/*',
+    '*://*.nebula.tv/*',
+  ],
+  // @ts-expect-error for some reason these are not present? but specified in guide: https://developer.chrome.com/docs/extensions/develop/migrate/manifest
+  optional_host_permissions: [
+    '*://*.googleapis.com/*',
+  ],
+  action: {
+    default_icon: {
+      128: 'icons/icon_128.png',
+      64: 'icons/icon_64.png',
+    },
+    default_title: '__MSG_title__',
+  },
+  options_ui: {
+    page: 'options.html',
+    browser_style: true,
+  },
+  browser_specific_settings: {
+    gecko: {
+      id: 'nebula-enhancer@piber.at',
+    },
+  },
+  default_locale: 'en',
+};
+export default manifest;

src/scripts/background/misc.ts

@@ -1,4 +1,5 @@
 
+// TODO: In MV3, DOMParser needs to work with an offscreen document instead: https://developer.chrome.com/docs/extensions/develop/migrate/to-service-workers#move-dom-and-window
 export const loadCreators = async () => {
   const res = await fetch('https://talent.nebula.tv/creators/');
   const body = await res.text();

src/scripts/background_script.ts

@@ -8,9 +8,14 @@ const videoFetchNebula = 50;
 
 const { local, sync } = getBrowserInstance().storage;
 
-getBrowserInstance().browserAction.onClicked.addListener(() => openOptions());
+if (getBrowserInstance().action) {
+  getBrowserInstance().action.onClicked.addListener(() => openOptions());
+} else {
+  getBrowserInstance().browserAction.onClicked.addListener(() => openOptions());
+}
 
 getBrowserInstance().runtime.onMessage.addListener(async (message: string | { [key: string]: any; }) => {
+  const keepAlive = setInterval(getBrowserInstance().runtime.getPlatformInfo, 25 * 1000);
   try {
     const msg = parseTypeObject(message);
     console.dev.log('Handling message', msg);
@@ -24,7 +29,10 @@ getBrowserInstance().runtime.onMessage.addListener(async (message: string | { [k
       case BrowserMessage.GET_VID:
         return getNebulaVideo(msg);
     }
-  } catch { }
+  } catch {
+  } finally {
+    clearInterval(keepAlive);
+  }
 });
 
 getBrowserInstance().runtime.onInstalled.addListener(async (details) => {