Update converter

1. Add Chinese (Hong Kong) translation
2. Add a popup to disable/enable the automatic injection

_locales/en/messages.json

@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "en"
+    },
     "extensionName": {
         "message": "Inject Jyutping"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "Inject Jyutping"
+    },
+    "popupCheckboxText": {
+        "message": "Inject automatically"
     }
 }

_locales/ja/messages.json

@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "ja"
+    },
     "extensionName": {
         "message": "粵拼を注入"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "粵拼を注入"
+    },
+    "popupCheckboxText": {
+        "message": "オート注入"
     }
 }

_locales/zh_CN/messages.json

@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "zh-CN"
+    },
     "extensionName": {
         "message": "注入粤拼"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "注入粤拼"
+    },
+    "popupCheckboxText": {
+        "message": "自动注入"
     }
 }

_locales/zh_HK/messages.json

@@ -0,0 +1,17 @@
+{
+    "langCode": {
+        "message": "zh-HK"
+    },
+    "extensionName": {
+        "message": "注入粵拼"
+    },
+    "extensionDescription": {
+        "message": "為漢字標註粵語發音（粵拼）。"
+    },
+    "contextMenuItemDoInjectJyutping": {
+        "message": "注入粵拼"
+    },
+    "popupCheckboxText": {
+        "message": "自動注入"
+    }
+}

_locales/zh_TW/messages.json

@@ -1,4 +1,7 @@
 {
+    "langCode": {
+        "message": "zh-TW"
+    },
     "extensionName": {
         "message": "注入粵拼"
     },
@@ -7,5 +10,8 @@
     },
     "contextMenuItemDoInjectJyutping": {
         "message": "注入粵拼"
+    },
+    "popupCheckboxText": {
+        "message": "自動注入"
     }
 }

content_scripts/main.js

@@ -86,15 +86,21 @@ async function recursiveConvert(currentNode, langMatched) {
     }
 }
 
-async function startConvert() {
+async function init() {
     const lang = document.body.lang || document.documentElement.lang || 'en';
     await recursiveConvert(document.body, isTargetLang(lang));
 }
 
 browser.runtime.onMessage.addListener(msg => {
     if (msg.name === 'do-inject-jyutping') {
-        startConvert();
+        init();
     }
 });
 
-startConvert();
+async function autoInit() {
+    if ((await browser.storage.local.get('enabled'))['enabled'] !== false) {
+        init();
+    }
+}
+
+autoInit();

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "__MSG_extensionName__",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "__MSG_extensionDescription__",
     "icons": {
         "96": "icons/96.png"
@@ -19,6 +19,11 @@
         "scripts": ["lib/browser-polyfill.js", "lib/MessageManager.js", "lib/Trie.js", "background_scripts/main.js"],
         "persistent": true
     },
-    "permissions": ["contextMenus"],
-    "default_locale": "en"
+    "permissions": ["contextMenus", "storage"],
+    "default_locale": "en",
+    "browser_action": {
+        "default_icon": "icons/96.png",
+        "default_title": "__MSG_extensionName__",
+        "default_popup": "popup/index.html"
+    }
 }

package.sh

@@ -1,2 +1,2 @@
 #!/bin/sh
-zip -r inject-jyutping.zip _locales background_scripts content_scripts icons lib manifest.json
+zip -r inject-jyutping.zip _locales background_scripts content_scripts icons lib popup manifest.json

popup/index.css

@@ -0,0 +1,70 @@
+.middle {
+    vertical-align: middle;
+}
+
+.large {
+    font-size: 120%;
+}
+
+/* Create a "toggle switch" (on/off button) with CSS.
+ * Taken from https://www.w3schools.com/howto/howto_css_switch.asp
+ */
+
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}

popup/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <link rel="stylesheet" href="index.css">
+  <script src="../lib/browser-polyfill.js" defer></script>
+  <script src="index.js" defer></script>
+</head>
+<body>
+  <p>
+    <b id="checkboxText" class="middle large"></b>&nbsp;
+    <label class="middle switch">
+      <input id="extensionEnabled" type="checkbox">
+      <span class="slider round"></span>
+    </label>
+  </p>
+</body>
+</html>

popup/index.js

@@ -0,0 +1,11 @@
+/* Initialize state */
+(async () => {
+    document.documentElement.lang = browser.i18n.getMessage('langCode');
+    document.getElementById('checkboxText').innerText = browser.i18n.getMessage('popupCheckboxText');
+    document.getElementById('extensionEnabled').checked = ((await browser.storage.local.get('enabled'))['enabled'] !== false) ? true : false;
+})();
+
+/* Handle state change */
+document.getElementById('extensionEnabled').addEventListener('click', () => {
+    browser.storage.local.set({enabled: document.getElementById('extensionEnabled').checked});
+});