🔖 v4.0.0 (i18n) (#7)

* 🌐 Init localization * ✨ Allow communication between contentscript and injected script * 🌐 Modified Dutch description * ✨ Add support for internationalization * 🌐 Translate options page * 🌐 Add extensionName * 🔖 v4.0.0
laurens94 · Aug 31, 2023 · 9019012 · 9019012
1 parent bdba930
commit 9019012
Show file tree

Hide file tree

Showing 8 changed files with 313 additions and 27 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -0,0 +1,118 @@
+{
+  "extensionName": {
+    "message": "Netflix Rewind 1 sec",
+    "description": "Name of the extension."
+  },
+  "extensionDescription": {
+    "message": "Seek through video with an x amount of seconds (adjustable)",
+    "description": "Description of the extension."
+  },
+  "debugPluginLoaded": {
+    "message": "'$EXTENSIONNAME$' plugin loaded.",
+    "description": "Debug message when plugin is loaded.",
+    "placeholders": {
+      "extensionname": {
+        "content": "$1",
+        "example": "Netflix Rewind 1 sec"
+      }
+    }
+  },
+  "debugCouldNotLoadSettings": {
+    "message": "Could not load settings for $EXTENSIONNAME$, falling back to defaults...",
+    "description": "Debug message when settings could not be loaded and defaults are loaded instead.",
+    "placeholders": {
+      "extensionname": {
+        "content": "$1",
+        "example": "Netflix Rewind 1 sec"
+      }
+    }
+  },
+  "optionsTitle": {
+    "message": "Options for $EXTENSIONNAME$",
+    "description": "Title of the options page.",
+    "placeholders": {
+      "extensionname": {
+        "content": "$1",
+        "example": "Netflix Rewind 1 sec"
+      }
+    }
+  },
+  "optionsKeyboardControlsRewind": {
+    "message": "Use $BTN1$ (or $BTN2$) to rewind with $SECONDS$ seconds",
+    "description": "Description for the keyboard controls to rewind.",
+    "placeholders": {
+      "btn1": {
+        "content": "<kbd>&lt;</kbd>"
+      },
+      "btn2": {
+        "content": "<kbd>,</kbd>"
+      },
+      "seconds": {
+        "content": "<span data-rewind-sec>1</span>"
+      }
+    }
+  },
+  "optionsKeyboardControlsForward": {
+    "message": "Use $BTN1$ (or $BTN2$) to seek forward with $SECONDS$ seconds",
+    "description": "Description for the keyboard controls to seek forward.",
+    "placeholders": {
+      "btn1": {
+        "content": "<kbd>&gt;</kbd>"
+      },
+      "btn2": {
+        "content": "<kbd>.</kbd>"
+      },
+      "seconds": {
+        "content": "<span data-forward-sec>5</span>"
+      }
+    }
+  },
+  "optionsCustomizationIntroduction": {
+    "message": "You can change the amount of seconds to rewind or seek forward.",
+    "description": "Introduction to the customization section."
+  },
+  "optionsNoteNetflixDefaults": {
+    "message": "Note: the default value on Netflix is 10 seconds.",
+    "description": "Note about the default value on Netflix."
+  },
+  "optionsForwardSeconds": {
+    "message": "Forward seconds",
+    "description": "Label for the forward seconds setting."
+  },
+  "optionsRewindSeconds": {
+    "message": "Rewind seconds",
+    "description": "Label for the rewind seconds setting."
+  },
+  "optionsResetToDefaults": {
+    "message": "Reset to defaults",
+    "description": "Button to reset settings to defaults."
+  },
+  "optionsDefaultsSaved": {
+    "message": "Defaults saved!",
+    "description": "Message to show when settings are reset to defaults."
+  },
+  "optionsSave": {
+    "message": "Save",
+    "description": "Button to save settings."
+  },
+  "optionsSaved": {
+    "message": "Saved!",
+    "description": "Message to show when settings are saved."
+  },
+  "optionsSourceCode": {
+    "message": "Source code",
+    "description": "Link to the source code."
+  },
+  "optionsReportIssue": {
+    "message": "Report issue",
+    "description": "Link to report an issue."
+  },
+  "optionsRequestFeature": {
+    "message": "Request feature",
+    "description": "Link to request a feature."
+  },
+  "optionsDonate": {
+    "message": "Buy me a coffee",
+    "description": "Link to donate."
+  }
+}
diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json
@@ -0,0 +1,98 @@
+{
+  "extensionName": {
+    "message": "Netflix Rewind 1 sec",
+    "description": "Name of the extension."
+  },
+  "extensionDescription": {
+    "message": "Spoel terug met x seconden (instelbaar)",
+    "description": "Description of the extension."
+  },
+  "optionsTitle": {
+    "message": "Opties voor $EXTENSIONNAME$",
+    "description": "Title of the options page.",
+    "placeholders": {
+      "extensionname": {
+        "content": "$1",
+        "example": "Netflix Rewind 1 sec"
+      }
+    }
+  },
+  "optionsKeyboardControlsRewind": {
+    "message": "Gebruik $BTN1$ (of $BTN2$) om met $SECONDS$ seconden terug te spoelen",
+    "description": "Description for the keyboard controls to rewind.",
+    "placeholders": {
+      "btn1": {
+        "content": "<kbd>&lt;</kbd>"
+      },
+      "btn2": {
+        "content": "<kbd>,</kbd>"
+      },
+      "seconds": {
+        "content": "<span data-rewind-sec>1</span>"
+      }
+    }
+  },
+  "optionsKeyboardControlsForward": {
+    "message": "Gebruik $BTN1$ (of $BTN2$) om met $SECONDS$ seconden vooruit te spoelen",
+    "description": "Description for the keyboard controls to seek forward.",
+    "placeholders": {
+      "btn1": {
+        "content": "<kbd>&gt;</kbd>"
+      },
+      "btn2": {
+        "content": "<kbd>.</kbd>"
+      },
+      "seconds": {
+        "content": "<span data-forward-sec>5</span>"
+      }
+    }
+  },
+  "optionsCustomizationIntroduction": {
+    "message": "Je kunt het aantal seconden om terug of vooruit te spoelen aanpassen.",
+    "description": "Introduction to the customization section."
+  },
+  "optionsNoteNetflixDefaults": {
+    "message": "Opmerking: de standaard instelling op Netflix is 10 seconden.",
+    "description": "Note about the default value on Netflix."
+  },
+  "optionsForwardSeconds": {
+    "message": "Vooruit spoelen",
+    "description": "Label for the forward seconds setting."
+  },
+  "optionsRewindSeconds": {
+    "message": "Terugspoelen",
+    "description": "Label for the rewind seconds setting."
+  },
+  "optionsResetToDefaults": {
+    "message": "Herstel standaardinstellingen",
+    "description": "Button to reset settings to defaults."
+  },
+  "optionsDefaultsSaved": {
+    "message": "Standaardinstellingen opgeslagen!",
+    "description": "Message to show when settings are reset to defaults."
+  },
+  "optionsSave": {
+    "message": "Opslaan",
+    "description": "Button to save settings."
+  },
+  "optionsSaved": {
+    "message": "Opgeslagen!",
+    "description": "Message to show when settings are saved."
+  },
+  "optionsSourceCode": {
+    "message": "Broncode",
+    "description": "Link to the source code."
+  },
+  "optionsReportIssue": {
+    "message": "Meld bug",
+    "description": "Link to report an issue."
+  },
+  "optionsRequestFeature": {
+    "message": "Feature verzoek",
+    "description": "Link to request a feature."
+  },
+  "optionsDonate": {
+    "message": "Doneer een kop koffie",
+    "description": "Link to donate."
+  }
+}
diff --git a/contentscript.js b/contentscript.js
@@ -6,10 +6,26 @@
   }
 
   function onError(error) {
-    console.warn(`Could not load settings for Netflix Rewind 1 Sec, falling back to defaults...`, error);
+    console.warn(browser.i18n.getMessage("debugCouldNotLoadSettings", browser.i18n.getMessage("extensionName")), error);
     inject();
   }
 
+  window.addEventListener("message", (event) => {
+    if (event.origin === window.origin) {
+      if (event.data.type === 'getI18nMessage') {
+        try {
+          if (typeof event.data.key !== 'string') {
+            throw new Error("key must be a string");
+          }
+          event.ports[0].postMessage({ result: browser.i18n.getMessage(event.data.key, ...event.data.params) });
+        } catch (e) {
+          if (!event.ports[0]) return;
+          event.ports[0].postMessage({ error: e });
+        }
+      }
+    }
+  }, false)
+
   function onGot(item) {
     if (item.rewindSec > 0) {
       settings.rewindSec = item.rewindSec;

diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,9 @@
 {
   "manifest_version": 3,
-  "name": "Netflix Rewind 1 sec",
-  "version": "3.0.1",
-  "description": "Allows you to rewind the video for 1 second each time you press the < key",
+  "name": "__MSG_extensionName__",
+  "version": "4.0.0",
+  "description": "__MSG_extensionDescription__",
+  "default_locale": "en",
   "icons": {
     "48": "icons/128.png"
   },
@@ -40,4 +41,4 @@
       "strict_min_version": "109.0"
     }
   }
-}
+}
diff --git a/netflix-rewind-1-sec.js b/netflix-rewind-1-sec.js
@@ -1,4 +1,9 @@
-console.debug("💾 'Netflix Rewind 1 sec' plugin loaded.");
+!async function () {
+  const extensionName = await getI18nMessage('extensionName'),
+    debugPluginLoadedMessage = await getI18nMessage('debugPluginLoaded', extensionName);
+  console.debug(`💾 ${debugPluginLoadedMessage}`);
+}();
+
 const params = new URLSearchParams(document.currentScript.src.split('?')[1]);
 
 window.netflixRewindPlugin = {};
@@ -73,3 +78,20 @@ setInterval(window.netflixRewindPlugin.initPluginLogic, 3000);
 
 // Listen to keydown events:
 document.addEventListener('keydown', window.netflixRewindPlugin.seek);
+
+function getI18nMessage(key, ...params) {
+  return new Promise((res, rej) => {
+    const channel = new MessageChannel();
+
+    channel.port1.onmessage = ({ data }) => {
+      channel.port1.close();
+      if (data.error) {
+        rej(data.error);
+      } else {
+        res(data.result);
+      }
+    };
+
+    window.postMessage({ type: 'getI18nMessage', key: key, params }, window.location.origin, [channel.port2]);
+  })
+};
diff --git a/options.html b/options.html
@@ -4,56 +4,54 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Options for Netflix Rewind 1 sec</title>
-
   <link rel="icon" href="./icons/netflix-rewind-1-sec.svg">
   <link rel="stylesheet" href="./options/options.css">
   <script type="application/javascript" src="browser-polyfill.min.js"></script>
   <script src="./options/options.js" defer></script>
 </head>
 
 <body>
-  <div class="wrapper">
+  <div id="wrapper">
     <fieldset>
       <legend>
         <h1 style="display: flex; align-items: center; gap: 1em;">
           <img style="width: 2em; height: 2em;" src="./icons/netflix-rewind-1-sec.svg" alt="">
-          Options for Netflix Rewind 1 sec
+          %optionsTitle%
         </h1>
       </legend>
 
       <p>
-        Use <kbd>&lt;</kbd> (or <kbd>,</kbd>) to rewind with <span data-rewind-sec>1</span> seconds<br>
-        Use <kbd>&gt;</kbd> (or <kbd>.</kbd>) to seek forward with <span data-forward-sec>5</span> seconds
+        %optionsKeyboardControlsRewind%<br>
+        %optionsKeyboardControlsForward%
       </p>
 
       <p>
-        You can change the amount of seconds to rewind or seek forward.<br>
-        <i>Note: the default value on Netflix is 10 seconds.</i>
+        %optionsCustomizationIntroduction%<br>
+        <i>%optionsNoteNetflixDefaults%</i>
       </p>
 
       <form action="options.html" method="post">
-        <label for="rewind-seconds">Rewind Seconds
+        <label for="rewind-seconds">%optionsRewindSeconds%
           <input type="number" name="rewind-seconds" id="rewind-seconds" value="1" min="1">
         </label>
 
-        <label for="forward-seconds">Forward Seconds
+        <label for="forward-seconds">%optionsForwardSeconds%
           <input type="number" name="forward-seconds" id="forward-seconds" value="5" min="1">
         </label>
 
-        <button type="reset" id="reset">Reset to defaults</button>
-        <button type="submit" id="save">Save</button>
+        <button type="reset" id="reset">%optionsResetToDefaults%</button>
+        <button type="submit" id="save">%optionsSave%</button>
       </form>
     </fieldset>
 
     <div class="footer">
       <a href="https://github.com/laurens94/netflix-rewind-browser-extension" target="_blank"
-        rel="noopener noreferrer">👨‍💻 Source Code</a>
+        rel="noopener noreferrer">👨‍💻 %optionsSourceCode%</a>
       <a href="https://github.com/laurens94/netflix-rewind-browser-extension/issues/new" target="_blank"
-        rel="noopener noreferrer"><span>🐛 Report issue</span> &nbsp; <span>✨ Request feature</span></a>
-      <a href="https://ko-fi.com/lauwerens" target="_blank" rel="noopener noreferrer">☕ Buy me a coffee 🫶</a>
+        rel="noopener noreferrer"><span>🐛 %optionsReportIssue%</span> &nbsp; <span>✨ %optionsRequestFeature%</span></a>
+      <a href="https://ko-fi.com/lauwerens" target="_blank" rel="noopener noreferrer">☕ %optionsDonate% 🫶</a>
     </div>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/options/options.css b/options/options.css
@@ -9,7 +9,7 @@ body {
   line-height: 1.5;
 }
 
-.wrapper {
+#wrapper {
   max-width: 40rem;
   margin: 2.5em auto;
 }
@@ -96,4 +96,4 @@ button#save {
 
 button#save:hover {
   background-color: black;
-}
+}