mess with i18n a little bit

_locales/de/messages.json

@@ -0,0 +1,24 @@
+{
+  "extension_name": {
+    "message": "HyperTab",
+    "description": "The display name for the extension."
+  },
+  "extension_description": {
+    "message": "Schnelle Suche und Wechsel von Registerkarten",
+    "description": "Description of what the extension does."
+  },
+  "ui_open_tabs": {
+    "message": "Öffnen Sie Registerkarten ($COUNT$)",
+    "description": "Text denoting the section in the UI of open tabs",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "82"
+      }
+    }
+  },
+  "ui_search_tabs": {
+    "message": "Suchregisterkarten",
+    "description": "Placeholder text in the tab search box"
+  }
+}

manifest.json

@@ -2,9 +2,9 @@
   "manifest_version": 2,
   "default_locale": "en",
 
-  "name": "HyperTab",
-  "description": "Quick tabs search and switch",
-  "version": "0.1",
+  "name": "__MSG_extension_name__",
+  "description": "__MSG_extension_description__",
+  "version": "@@replaced_by_package_sh",
 
   "icons": {
     "48": "images/icon-48.png",

src/popup/main.tsx

@@ -11,6 +11,13 @@ import ReactDOM from "react-dom/client";
 import { useHotkeys } from "react-hotkeys-hook";
 import "./scrollIntoViewIfNeededPolyfill";
 
+function t(
+  messageName: string,
+  substitutions?: string | string[] | undefined
+): string {
+  return browser.i18n.getMessage(messageName, substitutions);
+}
+
 function hostname(url: string): string {
   try {
     const u = new URL(url);
@@ -314,7 +321,7 @@ const Popup: FunctionComponent = () => {
           className="ht-search-input"
           type="text"
           autoFocus
-          placeholder="Search Tabs"
+          placeholder={t("ui_search_tabs")}
           value={searchQuery}
           style={{
             width: "100%",
@@ -340,7 +347,7 @@ const Popup: FunctionComponent = () => {
       </div>
       <hr style={{ opacity: "0.3", marginTop: "0px" }} />
       <div style={{ padding: "1em", fontWeight: "bold" }}>
-        Open Tabs ({tabs.length})
+        {t("ui_open_tabs", `${tabs.length}`)}
       </div>
       <div
         style={{