To MV3

Author: mantou132

Diff for: .eslintrc.js

@@ -5,11 +5,10 @@ module.exports = {
     'plugin:import/warnings',
     'plugin:import/typescript',
     'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
     'plugin:prettier/recommended',
   ],
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
   rules: {
@@ -23,6 +22,7 @@ module.exports = {
     ],
     'import/namespace': 0,
     'import/named': 0,
+    'import/no-extraneous-dependencies': 1,
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',

Diff for: README.md

@@ -1,12 +1,8 @@
 [![Discord](https://img.shields.io/discord/763927057549099028)](https://discord.com/invite/fQbzzdJ)
 
-# Spotify Lyrics
+# Lyrics for Spotify
 
-Install Extension:
-- Chrome/Chromium/Firefox: Download the zip on the [release](https://github.com/mantou132/Spotify-Lyrics/releases) page, and then load the extension on the extension management page of the browser. [reason](https://github.com/mantou132/Spotify-Lyrics/issues/68).
-- Safari(Soon)
-
-The extension adds a button to the bottom left corner of Spotify Web Player,
+The **browser extension** adds a button to the bottom left corner of **Spotify Web Player**,
 Click to switch the display status of the lyrics,
 which is displayed in the Picture-in-Picture window by default setting.
 Spotify can be [installed as pwa](https://support.google.com/chrome/answer/9658361) instead of desktop client.
@@ -15,9 +11,19 @@ If you have any questions, please submit an [issue](https://github.com/mantou132
 
 ![windows-pwa-spotify](./screenshot/windows-pwa-spotify.jpg)
 
-The extension also supports Youtube Music, Apple Music, Deezer and Tidal, but songs with videos in Youtube Music cannot be perfectly supported(because the duration of the video is different from the duration of the officially released audio track).
+## Install
 
-![macos-pwa-youtube](./screenshot/macos-pwa-youtube.jpg)
+- Chrome/Chromium/Firefox: Download the zip on the [release](https://github.com/mantou132/Spotify-Lyrics/releases) page, and then load the extension on the extension management page of the browser. [reason](https://github.com/mantou132/Spotify-Lyrics/issues/68).
+- Safari(Soon)
+
+## Features
+
+- Instant synchronized lyrics display
+- Lyrics style [setting](./screenshot/options-in-spotify.jpg)(Right Click)
+- Lyrics [editor](./screenshot/lrc-editor-in-spotify.jpg) and upload(Ctrl + Right Click)
+- [Experimental](https://github.com/mantou132/Spotify-Lyrics/issues/35) support Youtube Music, Apple Music, Deezer and Tidal
+
+  ![macos-pwa-youtube](./screenshot/macos-pwa-youtube.jpg)
 
 ## How To Work
 
@@ -52,9 +58,9 @@ Build:
 ```bash
 yarn run build:zip
 
-# firebase depoly and config update
+# firebase deploy and config update
 # npm i -g firebase-tools
-firebase depoly
+firebase deploy
 firebase functions:config:get
 firebase functions:config:set spotify-lyrics.manager-ids=xxx
 ```
@@ -134,7 +140,6 @@ Fork it, submit PR.
 - If you can write code, you can fix [bugs](https://github.com/mantou132/Spotify-Lyrics/issues?q=is%3Aissue+is%3Aopen+label%3Abug) or improve [performance](https://github.com/mantou132/Spotify-Lyrics/issues?q=is%3Aissue+is%3Aopen+label%3Aperformance)
 - Optimize the matching rate of Chinese, Japanese and Korean lyrics.(edit [config.json](./src/page/config.json)). _Note: The extension already has automatic optimization, this list serves as a supplement_ . _[Unmatched lyrics report](https://datastudio.google.com/reporting/bfd79c68-f9f4-4af5-8e51-a12d3d6be450)_
 
-
 ## Privacy Policy
 
 [see](./public/privacy-policy.html).

Diff for: functions/package.json

@@ -14,7 +14,7 @@
     "firebase-functions": "^3.6.1"
   },
   "devDependencies": {
-    "typescript": "^3.8.0",
+    "typescript": "^5.4.5",
     "firebase-functions-test": "^0.2.0"
   },
   "private": true

Diff for: functions/yarn.lock

@@ -1640,10 +1640,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.8.0:
-  version "3.9.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+typescript@^5.4.5:
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
 unbox-primitive@^1.0.1:
   version "1.0.1"

Diff for: jest.config.js

@@ -1,66 +1,50 @@
 {
   "name": "spotify-lyrics",
   "version": "1.5.33",
-  "description": "Desktop Spotify Web Player Instant Synchronised Lyrics",
+  "description": "Desktop Spotify Web Player Instant Synchronized Lyrics",
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext .ts --fix src/",
-    "test": "jest",
+    "test": "vitest",
+    "build": "vite build",
+    "watch": "yarn build --watch",
     "serve": "web-ext --config web-ext.config.js run --start-url open.spotify.com",
     "serve:chromium": "yarn run serve -- -t chromium",
-    "watch": "webpack --watch",
     "start": "concurrently npm:watch npm:serve:chromium",
-    "test:matchrate": "cross-env TEST=matchrate concurrently npm:watch npm:serve:chromium",
+    "test:rate": "cross-env TEST=rate concurrently npm:watch npm:serve:chromium",
     "release": "npx mantou132/release#b4228eed684d0e4a23ecc333d416f4ea7b67a845 -w public patch",
-    "build": "cross-env NODE_ENV=production webpack",
     "start:firebase": "yarn --cwd functions run build && firebase emulators:start",
     "install": "yarn --cwd functions",
-    "s:singer": "deno run --allow-read --allow-net script/singer.ts"
+    "prepare": "husky install && yarn build",
+    "s:singer": "deno run --allow-read --allow-net scripts/singer.ts"
   },
   "author": "mantou132",
   "license": "ISC",
   "dependencies": {
-    "@mantou/gem": "^0.6.8",
+    "@mantou/gem": "^1.7.12",
     "@sentry/browser": "^5.25.0",
-    "@types/wicg-mediasession": "^1.0.4",
-    "@webcomponents/webcomponentsjs": "^2.4.4",
+    "@webcomponents/webcomponentsjs": "^2.8.0",
     "chinese-conv": "^1.0.1",
-    "webextension-polyfill-ts": "^0.9.1"
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "babel-eslint": "^10.1.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "@types/webextension-polyfill": "^0.10.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "concurrently": "^5.2.0",
-    "copy-webpack-plugin": "^6.0.2",
     "cross-env": "^7.0.2",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^6.14.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-prettier": "^3.1.4",
-    "file-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "husky": "^2.7.0",
-    "jest": "^26.1.0",
-    "lint-staged": "^8.2.1",
-    "prettier": "^2.0.5",
-    "replace-with-chunk-webpack-plugin": "0.0.1",
-    "ts-jest": "^26.1.3",
-    "ts-loader": "^6.2.2",
-    "typescript": "^4.0.5",
-    "url-loader": "^2.3.0",
-    "web-ext": "^6.3.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
-  },
-  "engines": {
-    "node": "^14.20.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "esbuild": "^0.20.2",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "happy-dom": "^14.10.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.10",
+    "vitest": "^1.6.0",
+    "web-ext": "^7.8.0"
   },
   "lint-staged": {
     "*.ts": "eslint --fix"

Diff for: package.json

@@ -5,7 +5,7 @@
   },
 
   "extensionDescription": {
-    "message": "Instant synchronised lyrics display in picture-in-picture window",
+    "message": "Instant synchronized lyrics display in picture-in-picture window",
     "description": "Description of the extension"
   },
 

Diff for: public/_locales/en/messages.json

@@ -1,27 +1,32 @@
 {
+  "$schema": "https://raw.githubusercontent.com/extend-chrome/manifest-json-schema/main/schema/manifest.schema.json",
   "name": "__MSG_extensionName__",
   "version": "1.5.33",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "description": "__MSG_extensionDescription__",
   "default_locale": "en",
   "web_accessible_resources": [
-    "*"
+    {
+      "resources": ["*"],
+      "matches": ["*://*/*"]
+    }
   ],
-  "permissions": [
-    "contextMenus",
-    "storage",
-    "tabs"
+  "host_permissions": [
+    "*://open.spotify.com/*",
+    "*://www.deezer.com/*",
+    "*://music.youtube.com/*",
+    "*://music.apple.com/*",
+    "*://listen.tidal.com/*"
   ],
+  "permissions": ["scripting", "contextMenus", "storage", "tabs"],
   "browser_specific_settings": {
     "gecko": {
       "id": "{9bbdd06f-4fe2-4d05-8c2d-1ef6bf71f84d}",
       "strict_min_version": "78.0"
     }
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ]
+    "service_worker": "background.js"
   },
   "content_scripts": [
     {
@@ -32,9 +37,7 @@
         "*://music.apple.com/*",
         "*://listen.tidal.com/*"
       ],
-      "js": [
-        "content.js"
-      ],
+      "js": ["content.js"],
       "run_at": "document_start"
     },
     {
@@ -45,14 +48,17 @@
         "*://music.apple.com/*",
         "*://listen.tidal.com/*"
       ],
-      "js": [
-        "options.js"
-      ]
+      "js": ["options/index.js"]
     }
   ],
-  "browser_action": {
+  "options_ui": {
+    "page": "options.html"
+  },
+  "action": {
     "default_popup": "popup.html",
-    "default_icon": "icons/48.png"
+    "default_icon": {
+      "48": "icons/48.png"
+    }
   },
   "commands": {
     "toggle": {
@@ -63,9 +69,6 @@
       "description": "Toggle lyrics"
     }
   },
-  "options_ui": {
-    "page": "options.html"
-  },
   "icons": {
     "48": "icons/48.png",
     "96": "icons/96.png",