Merge pull request #3 from veraposeidon/feature/suport-i18n

Feature/suport i18n
veraposeidon · Jun 8, 2024 · 2de3920 · 2de3920
2 parents a44808b + 5e2097d
commit 2de3920
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ _metadata
 .vscode/*
 # IDEA
 .idea/*
+.aider*
diff --git a/subtitle.dual/_locales/en/messages.json b/subtitle.dual/_locales/en/messages.json
@@ -0,0 +1,20 @@
+{
+  "settings": {
+    "message": "Settings"
+  },
+  "bilingual_subtitles_enabled": {
+    "message": "Bilingual Subtitles Enabled"
+  },
+  "choose_language": {
+    "message": "Choose your language"
+  },
+  "help": {
+    "message": "Help"
+  },
+  "supported_websites": {
+    "message": "Supported Websites"
+  },
+  "wwdc_videos": {
+    "message": "WWDC Videos - Apple Developer"
+  }
+}
diff --git a/subtitle.dual/_locales/ja/messages.json b/subtitle.dual/_locales/ja/messages.json
@@ -0,0 +1,20 @@
+{
+  "settings": {
+    "message": "設定"
+  },
+  "bilingual_subtitles_enabled": {
+    "message": "バイリンガル字幕が有効"
+  },
+  "choose_language": {
+    "message": "言語を選択してください"
+  },
+  "help": {
+    "message": "ヘルプ"
+  },
+  "supported_websites": {
+    "message": "サポートされているウェブサイト"
+  },
+  "wwdc_videos": {
+    "message": "WWDC ビデオ - Apple 開発者"
+  }
+}
diff --git a/subtitle.dual/_locales/zh/messages.json b/subtitle.dual/_locales/zh/messages.json
@@ -0,0 +1,20 @@
+{
+  "settings": {
+    "message": "设置"
+  },
+  "bilingual_subtitles_enabled": {
+    "message": "双语字幕已启用"
+  },
+  "choose_language": {
+    "message": "选择你的语言"
+  },
+  "help": {
+    "message": "帮助"
+  },
+  "supported_websites": {
+    "message": "支持的网站"
+  },
+  "wwdc_videos": {
+    "message": "WWDC 视频 - Apple 开发者"
+  }
+}
diff --git a/subtitle.dual/manifest.json b/subtitle.dual/manifest.json
@@ -31,6 +31,7 @@
     }
   },
   "permissions": ["storage", "activeTab"],
+  "default_locale": "en",
   "background": {
     "service_worker": "scripts/service-worker.js"
   }

diff --git a/subtitle.dual/popup.html b/subtitle.dual/popup.html
@@ -12,20 +12,18 @@
   <body>
     <article>
       <img src="/images/header.png" alt="Coursera Dual" />
-      <h1>Settings</h1>
+      <h1 data-i18n="settings">Settings</h1>
       <label>
         <input id="toggle-switch" type="checkbox" role="switch" />
-        Bilingual Subtitles Enabled
+        <span data-i18n="bilingual_subtitles_enabled">Bilingual Subtitles Enabled</span>
       </label>
-      <h4>Choose your language</h4>
+      <h4 data-i18n="choose_language">Choose your language</h4>
       <select id="language-select"></select>
-      <h1>Help</h1>
+      <h1 data-i18n="help">Help</h1>
       <details>
-        <summary>Supported Websites</summary>
+        <summary data-i18n="supported_websites">Supported Websites</summary>
         <p>
-          <a href="https://developer.apple.com/videos/"
-            >WWDC Videos - Apple Developer</a
-          >
+          <a href="https://developer.apple.com/videos/" data-i18n="wwdc_videos">WWDC Videos - Apple Developer</a>
         </p>
       </details>
     </article>

diff --git a/subtitle.dual/popup.js b/subtitle.dual/popup.js
@@ -43,6 +43,13 @@ toggleSwitch.addEventListener('change', async ({ target }) => {
 document.addEventListener('DOMContentLoaded', async () => {
   const select = document.getElementById('language-select');
   const options = await getSupportLanguages();
+  // Load localized strings
+  document.querySelectorAll('[data-i18n]').forEach((elem) => {
+    const message = chrome.i18n.getMessage(elem.getAttribute('data-i18n'));
+    if (message) {
+      elem.innerText = message;
+    }
+  });
   console.log('options', options);
   Object.keys(options).forEach((key) => {
     const optionElement = document.createElement('option');