MV3 and Chrome

.gitignore

@@ -133,3 +133,4 @@ dist
 .pnp.*
 
 
+dist.zip

README.md

@@ -1,6 +1,6 @@
 # SubSubDeeCee
 
-A Firefox extension that adds multilingual subtitles to WWDC videos.
+A browser extension that adds multilingual subtitles to WWDC videos.
 
 ## How to use
 

background.js

@@ -1,34 +1,23 @@
 // @ts-check
+/// <reference path="./types.d.ts" />
 
-/**
- * @param {import("webextension-polyfill").WebRequest.OnHeadersReceivedDetailsType} details
- */
-function handleHeaders(details) {
-  if (!details.responseHeaders) {
-    return;
-  }
-  for (let i = 0; i < details.responseHeaders.length; i++) {
-    if (details.responseHeaders[i].name.toLowerCase() === "content-security-policy") {
-      // @ts-ignore
-      details.responseHeaders[i].value = details.responseHeaders[i].value.replace("default-src 'self'", "default-src 'self' tatzyr.github.io")
-    }
-  }
-
-  return { responseHeaders: details.responseHeaders }
-}
-
-function init() {
-  /**
-   * @type {import("webextension-polyfill").Browser}
-   */
-  // @ts-ignore
-  const b = chrome;
+const b = globalThis.browser ?? globalThis.chrome;
 
-  /**
-   * @type {import("webextension-polyfill").WebRequest.RequestFilter}
-   */
-  const filter = { urls: ['https://developer.apple.com/*'], types: ['main_frame', 'sub_frame'] };
-  b.webRequest.onHeadersReceived.addListener(handleHeaders, filter, ["blocking", "responseHeaders"]);
-}
-
-init();
+b.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  (async () => {
+    if (message.action === "fetchSubtitles" && message.url) {
+      try {
+        const res = await fetch(message.url);
+        if (!res.ok) {
+          throw new Error(`HTTP Error: status: ${res.status}, url: ${message.url}`);
+        }
+        // @ts-ignore
+        sendResponse({ data: await res.text(), error: null });
+      } catch (e) {
+        // @ts-ignore
+        sendResponse({ data: null, error: { name: e.name, message: e.message } });
+      }
+    }
+  })();
+  return true;
+});

content.js

@@ -1,4 +1,5 @@
 // @ts-check
+/// <reference path="./types.d.ts" />
 
 (function () {
   async function main() {
@@ -17,18 +18,21 @@
       await new Promise((resolve) => { setTimeout(resolve, 100); });
     }
 
-    video.setAttribute("crossorigin", "anonymous");
     for (const lang of ["ja", "ko", "vi"]) {
+      const b = globalThis.browser ?? globalThis.chrome;
+      const { data, error } = await b.runtime.sendMessage({
+        action: "fetchSubtitles",
+        url: `https://tatzyr.github.io/subsubdeecee-vtts/${event}/${lang}/${videoId}.vtt`,
+      });
+      if (error) {
+        console.error(`Failed to fetch subtitles. ${error.name}: ${error.message}`);
+        continue;
+      }
       const track = document.createElement("track");
-      track.setAttribute("src", `https://tatzyr.github.io/subsubdeecee-vtts/${event}/${lang}/${videoId}.vtt`);
+      track.setAttribute("src", URL.createObjectURL(new Blob([data], { type: "text/vtt" })));
       track.setAttribute("srclang", lang);
       track.setAttribute("label", `SubSubDeeCee (${lang})`);
 
-      track.addEventListener("error", () => {
-        console.error(`Failed to load WebVTT file for ${lang}`);
-        video.removeChild(track);
-      });
-
       video.appendChild(track);
     }
   }

dist.sh

@@ -1,8 +1,11 @@
 #!/bin/bash
 
-mkdir dist
+set -euxo pipefail
+
+rm -f dist.zip
+mkdir -p dist
 rm dist/*
-cp background.js content.js icon48.png icon96.png LICENSE manifest.json README.md dist
+cp background.js content.js icon16.png icon48.png icon96.png icon128.png manifest.json dist
 pushd dist
 zip -r ../dist.zip *
 popd

manifest.json

@@ -1,29 +1,27 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "SubSubDeeCee",
   "version": "1.0.2",
   "description": "Multilingual subtitles to WWDC videos",
-  "developer": {
-    "name": "Tatsuya Otsuka",
-    "url": "https://github.com/tatzyr"
-  },
-  "permissions": [
-    "webRequest",
-    "webRequestBlocking",
-    "https://developer.apple.com/*"
-  ],
   "background": {
     "scripts": ["background.js"],
-    "persistent": true
+    "service_worker": "background.js"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{14d11436-34b3-4d84-b458-53bad54871ab}"
+    }
   },
   "content_scripts": [
     {
-      "matches": ["https://developer.apple.com/*"],
+      "matches": ["https://developer.apple.com/videos/play/*"],
       "js": ["content.js"]
     }
   ],
   "icons": {
+    "16": "icon16.png",
     "48": "icon48.png",
-    "96": "icon96.png"
+    "96": "icon96.png",
+    "128": "icon128.png"
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
   "devDependencies": {
-    "@types/webextension-polyfill": "^0.10.0"
+    "@types/webextension-polyfill": "^0.10.7"
   }
 }

types.d.ts

@@ -0,0 +1 @@
+declare var browser: import("webextension-polyfill").Browser;