Migrate to Manifest Version 3

.github/workflows/build.yml

@@ -1,7 +1,12 @@
-name: Build
+name: Lint & Build
 
 on:
     push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
     release:
         types:
             - created
@@ -19,7 +24,11 @@ jobs:
             - name: Install dependencies
               run: npm i
 
+            - name: Run lint
+              run: npm run lint
+
             - name: Upload artifact
+              if: ${{ github.event_name == 'release' }}
               uses: actions/upload-artifact@v4
               with:
                   name: inject-jyutping
@@ -31,3 +40,5 @@ jobs:
                       lib
                       popup
                       manifest.json
+                      node_modules/webextension-polyfill/dist/browser-polyfill.min.js
+                      node_modules/to-jyutping/dist/index.js

.gitignore

@@ -1,4 +1,4 @@
 inject-jyutping.zip
 node_modules
 DS_Store
-dist
+jsconfig.tsbuildinfo

README.md

@@ -1,18 +1,14 @@
 <h1>Inject Jyutping <ruby>幫<rt>bong1</rt></ruby> <ruby>漢<rt>hon3</rt></ruby> <ruby>字<rt>zi6</rt></ruby> <ruby>標<rt>biu1</rt></ruby> <ruby>粵<rt>jyut6</rt></ruby> <ruby>拼<rt>ping3</rt></ruby></h1>
 
-呢個係一個可以幫網頁上面嘅漢字自動標註粵拼嘅 Chrome 同 Firefox 插件，係學習粵拼同粵語嘅強大工具。
+呢個係一個可以幫網頁上面嘅漢字自動標註粵拼嘅 Chrome、Firefox 同 Edge 擴充功能，係學習粵拼同粵語嘅強大工具。
 
-A browser extension for Mozilla Firefox and Google Chrome that adds Cantonese pronunciation (Jyutping) on Chinese characters, a powerful tool for learning Cantonese and Jyutping.
+A browser extension for Google Chrome, Mozilla Firefox, and Microsoft Edge that adds Cantonese pronunciation (Jyutping) on Chinese characters, a powerful tool for learning Cantonese and Jyutping.
 
-<h2>Install <ruby>安<rt>on1</rt></ruby> <ruby>裝<rt>zong1</rt></ruby> </h2>
+<h2>Install <ruby>安<rt>on1</rt></ruby> <ruby>裝<rt>zong1</rt></ruby></h2>
 
 -   [Chrome Web Store](https://chrome.google.com/webstore/detail/inject-jyutping/lfgpgjkjglogbndlkikjgbbfoiofbdjp)
--   [Firefox Browser Add-On](https://addons.mozilla.org/en-US/firefox/addon/inject-jyutping/)
+-   [Firefox Browser Add-On](https://addons.mozilla.org/firefox/addon/inject-jyutping/)
 
-<h2>Build <ruby>編<rt>pin1</rt></ruby> <ruby>譯<rt>jik6</rt></ruby> </h2>
-
-See [`.github/workflows/build.yml`](.github/workflows/build.yml).
-
-<h2>Screenshot <ruby>截<rt>zit6</rt></ruby> <ruby>圖<rt>tou4</rt></ruby> </h2>
+<h2>Preview <ruby>預<rt>jyu6</rt></ruby> <ruby>覽<rt>laam5</rt></ruby></h2>
 
 ![Demo](./demo.jpg)

_locales/zh_HK/messages.json

@@ -15,6 +15,6 @@
         "message": ""
     },
     "refreshPromptText": {
-        "message": "請刷新頁面使更改生效。"
+        "message": "請重新載入頁面以使變更生效。"
     }
 }

_locales/zh_TW/messages.json

@@ -15,6 +15,6 @@
         "message": ""
     },
     "refreshPromptText": {
-        "message": "請刷新頁面使更改生效。"
+        "message": "請重新載入頁面以使變更生效。"
     }
 }

background_scripts/index.js

@@ -0,0 +1,25 @@
+import '/node_modules/webextension-polyfill/dist/browser-polyfill.min.js';
+import '/node_modules/to-jyutping/dist/index.js';
+import '/lib/MessageManager.js';
+
+/* Communicate with content script */
+
+browser.runtime.onConnect.addListener(port => {
+    /** @type { MessageManager<{ convert(msg: string): [string, string | null][] }> } */
+    const mm = new MessageManager(port);
+    mm.registerHandler('convert', ToJyutping.getJyutpingList);
+});
+
+/* Context Menu */
+
+browser.contextMenus.onClicked.addListener((info, tab) => {
+    if (info.menuItemId === 'do-inject-jyutping') {
+        browser.tabs.sendMessage(tab?.id || 0, { name: 'do-inject-jyutping' });
+    }
+});
+
+browser.contextMenus.create({
+    id: 'do-inject-jyutping',
+    title: browser.i18n.getMessage('contextMenuItemDoInjectJyutping'),
+    contexts: ['page'],
+});

content_scripts/main.js → content_scripts/index.js

@@ -1,13 +1,10 @@
-import Browser from 'webextension-polyfill';
-import MessageManager from '../lib/MessageManager.js';
-
 /**
  * Check if a string contains Chinese characters.
  * @param {string} s The string to be checked
  * @return {boolean} Whether the string contains at least one Chinese character.
  */
 function hasHanChar(s) {
-    return /[〆〇一-鿿㐀-䶿𠀀-𪛟𪜀-𫜿𫝀-𫠟𫠠-𬺯𬺰-𮯯𰀀-𱍏]/u.test(s);
+    return /[\p{Unified_Ideograph}\u3006\u3007]/u.test(s);
 }
 
 /**
@@ -48,7 +45,7 @@ function makeRuby(ch, pronunciation) {
     return ruby;
 }
 
-const port = Browser.runtime.connect();
+const port = browser.runtime.connect();
 /** @type { MessageManager<{ convert(msg: string): [string, string | null][] }> } */
 const mm = new MessageManager(port);
 const mo = new MutationObserver(changes => {
@@ -120,14 +117,14 @@ const init = once(() => {
     });
 });
 
-Browser.runtime.onMessage.addListener(msg => {
+browser.runtime.onMessage.addListener(msg => {
     if (msg.name === 'do-inject-jyutping') {
         init();
     }
 });
 
 async function autoInit() {
-    if ((await Browser.storage.local.get('enabled'))['enabled'] !== false) {
+    if ((await browser.storage.local.get('enabled'))['enabled'] !== false) {
         init();
     }
 }

global.d.ts

@@ -0,0 +1,3 @@
+declare const browser: import('webextension-polyfill').Browser;
+declare const ToJyutping: import('to-jyutping').default;
+declare const MessageManager: import('./lib/MessageManager').MessageManager;

tsconfig.json → jsconfig.json

@@ -4,7 +4,6 @@
         "lib": ["ESNext", "DOM", "DOM.Iterable"],
         "module": "NodeNext",
         "moduleResolution": "NodeNext",
-        "moduleDetection": "force",
 
         "strict": true,
         "allowUnusedLabels": false,
@@ -16,12 +15,12 @@
         "isolatedModules": true,
         "verbatimModuleSyntax": true,
 
-		"checkJs": true,
+        "checkJs": true,
         "esModuleInterop": true,
         "resolveJsonModule": true,
         "useDefineForClassFields": true,
         "skipLibCheck": true,
         "incremental": true,
-		"noEmit": true
+        "noEmit": true
     }
 }

lib/MessageManager.js

@@ -12,7 +12,7 @@ const getUniqueId = (
  * In background script:
  *
  * ```js
- * Browser.runtime.onConnect.addListener(port => {
+ * browser.runtime.onConnect.addListener(port => {
  *     const mm = new MessageManager(port);
  *     mm.registerHandler('double', s => s + s);
  *     mm.registerHandler('triple', s => s + s + s);
@@ -22,13 +22,13 @@ const getUniqueId = (
  * In content script:
  *
  * ```js
- * const port = Browser.runtime.connect();
+ * const port = browser.runtime.connect();
  * const mm = new MessageManager(port);
  * mm.sendMessage('double', '你好').then(alert); // Will alert 你好你好
  * mm.sendMessage('triple', '你好').then(alert); // Will alert 你好你好你好
  * ```
  */
-export default class MessageManager {
+class MessageManager {
     /**
      * @param {Runtime.Port} port
      */
@@ -75,3 +75,7 @@ export default class MessageManager {
         });
     }
 }
+
+Object.assign(globalThis, { MessageManager });
+
+/** @type {typeof MessageManager} MessageManager */

manifest.json

@@ -1,5 +1,5 @@
 {
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "__MSG_extensionName__",
     "version": "0.4.0",
     "description": "__MSG_extensionDescription__",
@@ -11,19 +11,29 @@
     "content_scripts": [
         {
             "matches": ["<all_urls>"],
-            "js": ["lib/browser-polyfill.js", "lib/MessageManager.js", "content_scripts/main.js"],
-            "css": ["content_scripts/main.css"],
+            "js": ["node_modules/webextension-polyfill/dist/browser-polyfill.min.js", "lib/MessageManager.js", "content_scripts/index.js"],
+            "css": ["content_scripts/index.css"],
             "all_frames": true,
             "run_at": "document_end"
         }
     ],
     "background": {
-        "scripts": ["lib/browser-polyfill.js", "lib/MessageManager.js", "background_scripts/main.js"],
-        "persistent": true
+        "service_worker": "background_scripts/index.js",
+        "type": "module"
     },
+    "web_accessible_resources": [
+        {
+            "matches": ["<all_urls>"],
+            "resources": [
+                "node_modules/webextension-polyfill/dist/browser-polyfill.min.js",
+                "node_modules/to-jyutping/dist/index.js",
+                "lib/MessageManager.js"
+            ]
+        }
+    ],
     "permissions": ["contextMenus", "storage"],
     "default_locale": "en",
-    "browser_action": {
+    "action": {
         "default_icon": "icons/96.png",
         "default_title": "__MSG_extensionName__",
         "default_popup": "popup/index.html"