Update to extension manifest v3

.gitignore

@@ -1,7 +1,6 @@
 # svelte defaults
 .DS_Store
 node_modules
-/build
 /.svelte-kit
 /package
 .env
@@ -11,14 +10,6 @@ node_modules
 /playwright-report/
 /playwright/.cache/
 
-
-## Chrome Extension Folder
-
-# ignore everything except explicit symlinks
+# output folder from build
 /chrome/*
-
-# symlinks and static files
-!/chrome/app
-!/chrome/fonts
-!/chrome/images
-!/chrome/settings.html
+/vorfreude.zip

package.json

@@ -4,12 +4,11 @@
   "description": "A countdown with a fresh wallpapered tab on every new tab",
   "scripts": {
     "dev": "vite dev",
-    "build": "yarn build:app && yarn build:extension",
+    "build": "yarn build:app && yarn build:background-js && yarn build:version-manifest",
     "build:app": "vite build",
-    "build:extension": "yarn build:manifest && yarn build:background-js",
-    "build:manifest": "node scripts/build-manifest.js",
     "build:background-js": "rollup -c scripts/background-js-rollup.config.js",
-    "package": "yarn _package && echo \"📦  Package created @ build/vorfreude.zip\"",
+    "build:version-manifest": "node scripts/version-manifest.js",
+    "package": "yarn _package && echo \"📦  Package created @ vorfreude.zip\"",
     "preview": "vite preview",
     "test": "yarn test:unit && yarn test:acceptance",
     "test:acceptance": "playwright test tests/acceptance",
@@ -18,7 +17,7 @@
     "check:watch": "svelte-check --tsconfig ./jsconfig.json --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-    "_package": "cd chrome && bestzip ../build/vorfreude.zip ./*"
+    "_package": "cd chrome && bestzip ../vorfreude.zip ./*"
   },
   "devDependencies": {
     "@babel/core": "^7.19.0",
@@ -34,6 +33,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/chrome": "^0.0.196",
     "@types/luxon": "^3.0.1",
+    "@types/offscreencanvas": "^2019.7.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "babel-jest": "^29.0.2",
@@ -58,6 +58,7 @@
     "svelte-inline-compile": "^0.2.0",
     "svelte-jester": "^2.3.2",
     "svelte-preprocess": "^4.10.7",
+    "sveltekit-adapter-chrome-extension": "^1.3.0",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.0",
     "typescript": "~4.8.3",

scripts/version-manifest.js

@@ -0,0 +1,29 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const CURRENT_DIR_PATH = fileURLToPath(new URL('.', import.meta.url));
+const ROOT_PATH = resolve(CURRENT_DIR_PATH, '..');
+
+function parseManifest() {
+  const manifestBlueprint = JSON.parse(readFileSync(resolve(ROOT_PATH, 'chrome/manifest.json')).toString());
+  return manifestBlueprint;
+}
+
+function parseRootPJson() {
+  return JSON.parse(readFileSync(resolve(ROOT_PATH, 'package.json')).toString());
+}
+
+function writeManifest(manifestJson, { packageVersion }) {
+  const updatedManifest = {
+    ...manifestJson,
+    version: packageVersion
+  };
+
+  writeFileSync(resolve(ROOT_PATH, './chrome/manifest.json'), JSON.stringify(updatedManifest, null, 2));
+  console.log('🙌  Updated version in manifest.json');
+}
+
+const manifestJson = parseManifest();
+const packageVersion = parseRootPJson().version;
+writeManifest(manifestJson, { packageVersion });

src/chrome/background.ts

@@ -11,8 +11,8 @@ chrome.runtime.onMessage.addListener(function(message) {
 });
 
 function openVorfreudeTab() {
-  const vorfreudeUrl = chrome.extension.getURL('index.html');
+  const vorfreudeUrl = chrome.runtime.getURL('index.html');
   chrome.tabs.create({ url: vorfreudeUrl });
 }
 
-chrome.browserAction.onClicked.addListener(() => openVorfreudeTab());
+chrome.action.onClicked.addListener(() => openVorfreudeTab());

src/photo-manager/resizePhoto.ts

@@ -1,19 +1,15 @@
 export default async function resizePhoto(blob, maxSize) {
-  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-    const image = new Image();
-    image.onerror = reject;
-    image.onload = () => resolve(image);
-    // kicks off `onload`
-    image.src = URL.createObjectURL(blob);
-  });
-
-  const canvas = document.createElement('canvas');
+  const image = await createImageBitmap(blob);
   const { width, height } = capSize(image.width, image.height, maxSize);
-  canvas.width = width;
-  canvas.height = height;
-  canvas.getContext('2d').drawImage(image, 0, 0, width, height);
-  const resizedImageBlob = await canvasToBlob(canvas);
-  return resizedImageBlob;
+  const resized = await createImageBitmap(blob, { resizeQuality: 'high', resizeWidth: width, resizeHeight: height });
+
+  const canvas = new OffscreenCanvas(width, height);
+  canvas.getContext('2d').drawImage(resized, 0, 0, width, height);
+
+  image.close();
+  resized.close();
+
+  return canvas.convertToBlob({ quality: 100 , type: 'image/jpeg' });
 }
 
 function capSize(width, height, max) {
@@ -29,13 +25,3 @@ function capSize(width, height, max) {
 
   return resizedDimensions;
 }
-
-function canvasToBlob(canvas, quality = 1) {
-  return new Promise((resolve, reject) => {
-    try {
-      canvas.toBlob((blob) => resolve(blob), 'image/jpeg', quality);
-    } catch(e) {
-      reject(e);
-    }
-  });
-}

scripts/manifest.blueprint.json → static/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "Vorfreude",
   "description": "When you can't wait but have to",
-  "version": "{{packageVersion}}",
-  "manifest_version": 2,
-  "browser_action": {
+  "version": "0.0.0",
+  "manifest_version": 3,
+  "action": {
     "default_title": "vorfreude",
     "default_icon": {
       "32": "images/icon32.png"
@@ -16,15 +16,11 @@
     "page": "settings.html",
     "open_in_tab": true
   },
-  "content_security_policy": "{{ContentSecurityPolicy}}",
   "chrome_url_overrides": {
     "newtab": "index.html"
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ],
-    "persistent": false
+    "service_worker": "background.js"
   },
   "permissions": [
     "storage",

chrome/settings.html → static/settings.html

@@ -1,4 +1,3 @@
 <script>
   document.location = "index.html#settings";
-</script>
-
+</script>

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from "sveltekit-adapter-chrome-extension";
 import preprocess from 'svelte-preprocess';
 
 // this is used for static settings.html page in the `chrome` folder
@@ -23,7 +23,11 @@ const config = {
       }
     },
     appDir: 'app',
-    adapter: adapter({ fallback: 'index.html' }),
+    adapter: adapter({
+      pages: 'chrome',
+      assets: 'chrome',
+      fallback: 'index.html'
+    }),
     prerender: {
       enabled: true,
       entries: ['/']