fix: migrate to manifest v3

.gitignore

@@ -51,9 +51,6 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
-.yarn-integrity
-
 # dotenv environment variables file
 .env
 
@@ -65,3 +62,12 @@ build
 
 # web-ext
 web-ext-artifacts
+
+# yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package.json

@@ -24,16 +24,16 @@
   },
   "dependencies": {
     "atom-file-icons": "^1.0.3",
-    "dom-loaded": "^3.0.0",
-    "is-mobile": "^3.0.0",
+    "dom-loaded": "^3.1.0",
+    "is-mobile": "^5.0.0",
     "select-dom": "^7.1.1",
     "selector-observer": "^2.1.6",
-    "webext-domain-permission-toggle": "^3.0.0",
-    "webext-dynamic-content-scripts": "^8.1.0",
-    "webext-options-sync": "^3.1.0"
+    "webext-dynamic-content-scripts": "^10.0.4",
+    "webext-options-sync": "^4.3.0",
+    "webext-permission-toggle": "^5.1.0"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.260",
+    "@types/chrome": "^0.0.289",
     "@types/css-font-loading-module": "^0.0.13",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
@@ -51,14 +51,13 @@
     "mini-css-extract-plugin": "^2.6.0",
     "prettier": "^3.2.5",
     "prettier-package-json": "^2.8.0",
-    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.3.3",
     "web-ext": "^7.11.0",
     "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-ext-reloader": "^1.1.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-ext-reloader": "^1.1.13",
     "write-file-webpack-plugin": "^4.5.1"
   },
   "keywords": [
@@ -73,5 +72,6 @@
     "*.ts": [
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/manifest.json

@@ -1,12 +1,11 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "File Icons for GitHub and GitLab",
   "description": "A simple browser tool changes file's icon on GitHub, GitLab, gitea and gogs.",
   "author": "homerchen19",
   "homepage_url": "https://github.com/homerchen19/github-file-icons",
   "background": {
-    "scripts": ["background.bundle.js"],
-    "persistent": false
+    "service_worker": "background.bundle.js"
   },
   "content_scripts": [
     {
@@ -26,19 +25,28 @@
     "64": "img/icon-64.png",
     "128": "img/icon-128.png"
   },
-  "browser_action": {
+  "action": {
     "default_icon": "img/icon-64.png"
   },
-  "content_security_policy": "script-src 'self'; object-src 'self'",
-  "web_accessible_resources": ["*.woff2"],
   "permissions": [
     "contextMenus",
     "storage",
-    "activeTab",
+    "activeTab"
+  ],
+  "host_permissions": [
     "https://github.com/*",
     "https://gitlab.com/*",
     "https://*.gogs.io/*",
     "https://*.gitea.io/*"
   ],
-  "optional_permissions": ["http://*/*", "https://*/*"]
+  "optional_host_permissions": ["http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["*.woff2"],
+      "matches": ["<all_urls>"]
+    }
+  ]
 }

src/ts/background.ts

@@ -1,36 +1,26 @@
 import 'webext-dynamic-content-scripts';
-import addDomainPermissionToggle from 'webext-domain-permission-toggle';
+import addDomainPermissionToggle from 'webext-permission-toggle';
 
 export const enum StorageKey {
   ColorsDisabled = 'colorsDisabled',
   DarkMode = 'darkMode',
 }
 
-chrome.contextMenus.create({
-  id: 'change-icon-color',
-  title: 'Change icon colors',
-  contexts: ['browser_action'],
-  documentUrlPatterns: [
-    'https://github.com/*',
-    'https://gitlab.com/*',
-    'https://*.gogs.io/*',
-    'https://*.gitea.io/*',
-  ],
-});
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'change-icon-color',
+    title: 'Change icon colors',
+    contexts: ['action'],
+  });
 
-chrome.contextMenus.create({
-  id: 'toggle-dark-mode',
-  title: 'Toggle dark mode',
-  contexts: ['browser_action'],
-  documentUrlPatterns: [
-    'https://github.com/*',
-    'https://gitlab.com/*',
-    'https://*.gogs.io/*',
-    'https://*.gitea.io/*',
-  ],
-});
+  chrome.contextMenus.create({
+    id: 'toggle-dark-mode',
+    title: 'Toggle dark mode',
+    contexts: ['action'],
+  });
 
-addDomainPermissionToggle();
+  addDomainPermissionToggle();
+});
 
 const toggleStorage = (key: StorageKey) => (tabs: chrome.tabs.Tab[]) => {
   const activeTab = tabs[0];

src/ts/content.ts

@@ -97,7 +97,7 @@ const loadFonts = () => {
   fonts.forEach((font) => {
     const fontFace = new FontFace(
       font.name,
-      `url("${chrome.extension.getURL(font.path)}") format("woff2")`,
+      `url("${chrome.runtime.getURL(font.path)}") format("woff2")`,
       {
         style: 'normal',
         weight: 'normal',