Rewrite with TypeScript & Use Parcel for Bundling

.github/workflows/build.yml

@@ -14,29 +14,25 @@ on:
 jobs:
     build:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         steps:
-            - name: Checkout code
+            - name: Checkout Latest Code
               uses: actions/checkout@v4
 
-            - name: Set up Node.js
+            - name: Setup Node
               uses: actions/setup-node@v4
 
-            - name: Install dependencies
-              run: npm i
+            - name: Install Dependencies
+              run: npm ci
 
-            - name: Run lint
-              run: npm run lint
+            - name: Lint & Build Extension
+              run: npm run build
 
-            - name: Upload artifact
+            - name: Release
               if: ${{ github.event_name == 'release' }}
-              uses: actions/upload-artifact@v4
-              with:
-                  name: inject-jyutping
-                  path: |
-                      _locales
-                      background_scripts
-                      content_scripts
-                      icons
-                      lib
-                      popup
-                      manifest.json
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              run: |
+                  zip -r inject-jyutping.zip dist
+                  gh release upload ${{ github.ref_name }} inject-jyutping.zip --clobber

.gitignore

@@ -1,6 +1,29 @@
-inject-jyutping.zip
-node_modules
-DS_Store
-jsconfig.tsbuildinfo
-lib/webextension-polyfill.js
-lib/to-jyutping.js
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# other
+.vscode
+.parcel-cache
+tsconfig.tsbuildinfo
+*.zip
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -12,3 +12,26 @@ A browser extension for Google Chrome, Mozilla Firefox, and Microsoft Edge that
 <h2>Preview <ruby>預<rt>jyu6</rt></ruby> <ruby>覽<rt>laam5</rt></ruby></h2>
 
 ![Demo](./demo.jpg)
+
+<h2>Development <ruby>開<rt>hoi1</rt></ruby> <ruby>發<rt>faat3</rt></ruby></h2>
+
+執行以下命令：
+
+Run the following command:
+
+```sh
+npm i
+npm start
+```
+
+再去瀏覽器「擴充功能」頁撳「載入未封裝項目」並揀選 `dist` 資料夾。
+
+And navigate to the browser “Extensions” page, click “Load Unpacked” and select the `dist` folder.
+
+要產生用於發佈嘅版本，請執行：
+
+To generate a production build, run:
+
+```sh
+npm run build
+```

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "__MSG_extensionName__",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "description": "__MSG_extensionDescription__",
     "icons": {
         "48": "icons/48.png",
@@ -11,27 +11,20 @@
     "content_scripts": [
         {
             "matches": ["<all_urls>"],
-            "js": ["lib/webextension-polyfill.js", "lib/MessageManager.js", "content_scripts/index.js"],
-            "css": ["content_scripts/index.css"],
+            "js": ["src/content_scripts/index.ts"],
             "all_frames": true,
             "run_at": "document_end"
         }
     ],
     "background": {
-        "service_worker": "background_scripts/index.js",
+        "service_worker": "src/background_scripts/index.ts",
         "type": "module"
     },
-    "web_accessible_resources": [
-        {
-            "matches": ["<all_urls>"],
-            "resources": ["lib/webextension-polyfill.js", "lib/to-jyutping.js", "lib/MessageManager.js"]
-        }
-    ],
     "permissions": ["contextMenus", "storage"],
     "default_locale": "en",
     "action": {
         "default_icon": "icons/96.png",
         "default_title": "__MSG_extensionName__",
-        "default_popup": "popup/index.html"
+        "default_popup": "src/popup/index.html"
     }
 }