Added multi-language support

src/_locales/de/messages.json

@@ -0,0 +1,44 @@
+{
+    "appName": {
+        "message": "Tab Porter",
+        "description": "Tab Porter ist ein gratis Plugin, welches Tabs von Google Chrome exportieren und importieren kann."
+    },
+    "appDesc": {
+        "message": "Tab Porter wurde dafür geschaffen, Ihr alltägliches browsen im Internet zu vereinfachen.",
+        "description": "Tab Porter ist ein gratis Plugin, welches Tabs von Google Chrome exportieren und importieren kann."
+    },
+
+    "introText": {
+        "message": "Tab Porter wurde dafür geschaffen, Ihr alltägliches browsen im Internet zu vereinfachen.",
+        "description": ""
+    },
+    "howTo_one": {
+        "message": "Tabs, die Sie nicht verlieren wollen können Sie mit diesem Plugin einfach auf Ihrem PC speichern. Die gespeicherten Tabs können jederzeit wieder in Google Chrome importiert werden, indem Sie die Datei, die beim Export automatisch heruntergeladen wurde einfach wieder auf das untere Feld ziehen.",
+        "description": ""
+    },
+    "howTo_two": {
+        "message": "Sie haben zwei Optionen, Tabs aus Google Chrome zu exportieren: Entweder können Sie alle Tabs aus dem aktuellen Chrome Fenster exportieren, indem Sie auf \"Alle Tabs exportieren\" klicken, oder Sie machen vorher eine Auswahl, indem Sie die Tabs mit gehaltener Shift-Taste zuvor auswählen, die Sie exportieren möchten und klicken dann auf \"Ausgewählte Tabs exportieren\".",
+        "description": ""
+    },
+    "dropzone": {
+        "message": "Ziehen Sie die JSON Datei <b>hier</b> hinein oder klicken Sie <b>hier</b>",
+        "description": ""
+    },
+
+    "export_all_tabs_btn": {
+        "message": "Alle Tabs exportieren",
+        "description": ""
+    },
+    "export_selected_tabs_btn": {
+        "message": "Ausgewählte Tabs exportieren",
+        "description": ""
+    },
+    "about_btn": {
+        "message": "Über TabPorter",
+        "description": ""
+    },
+    "source_btn": {
+        "message": "Source Code",
+        "description": ""
+    }
+}

src/_locales/en/messages.json

@@ -0,0 +1,44 @@
+{
+    "appName": {
+        "message": "Tab Porter",
+        "description": "Tab Porter is a free plugin to import/export Tabs from Google Chrome."
+    },
+    "appDesc": {
+        "message": "Tab Porter aims to assist you in your daily life browsing the world wide web.",
+        "description": "Tab Porter is a free plugin to import/export Tabs from Google Chrome."
+    },
+
+    "introText": {
+        "message": "Tab Porter aims to assist you in your daily life browsing the world wide web.",
+        "description": ""
+    },
+    "howTo_one": {
+        "message": "You can backup tabs you don't want to loose and restore them at any time you want. Just select one of the buttons below to either export all opened tabs in the current window, or make a selection before by shift-selecting your tabs and then select \"Export selected tabs\".",
+        "description": ""
+    },
+    "howTo_two": {
+        "message": "To restore your tabs just drag- and drop the exported file onto the dropzone below.",
+        "description": ""
+    },
+        "dropzone": {
+        "message": "<b>Drag- and drop</b> json files or <b>click</b> here to import new tabs",
+        "description": ""
+    },
+
+    "export_all_tabs_btn": {
+        "message": "Export all tabs",
+        "description": ""
+    },
+    "export_selected_tabs_btn": {
+        "message": "Export selected tabs",
+        "description": ""
+    },
+    "about_btn": {
+        "message": "About TabPorter",
+        "description": ""
+    },
+    "source_btn": {
+        "message": "Source code",
+        "description": ""
+    }
+}

src/dropzone.css

@@ -12,7 +12,7 @@
 
 .dropzone p
 {
-    margin-top: 25px;
+    margin-top: 40px;
 }
 
 .dropzone .dropzone-items

src/manifest.json

@@ -1,7 +1,8 @@
 {
     "manifest_version": 3,
-    "name": "Tab Porter",
-    "description": "Tab Porter is a free plugin to import/export Tabs from Google Chrome.",
+    "name": "__MSG_appName__",
+    "description": "__MSG_appDesc__",
+    "default_locale": "en",
     "version": "1.0.0",
     "icons": { "128": "images/icon_128.png" },
     "action": {

src/popup.html

@@ -25,13 +25,17 @@ <h1 class="logo">
             <p class="intro">
                 Tab Porter aims to assist you in your daily life browsing the world wide web.
             </p>
-			<br><br>
+			<br>
 			<p class="explanation">
-				You can backup tabs you don't want to loose and restore them at any time you want.
-				Just select one of the buttons below to either export all opened tabs in the current window,
-				or make a selection before by shift-selecting your tabs and then select "Export selected tabs".
+                <span class="part-one">
+                    You can backup tabs you don't want to loose and restore them at any time you want.
+                    Just select one of the buttons below to either export all opened tabs in the current window,
+                    or make a selection before by shift-selecting your tabs and then select "Export selected tabs".
+                </span>
 				<br><br>
-				To restore your tabs just drag- and drop the exported file onto the dropzone below.
+                <span class="part-two">
+                    To restore your tabs just drag- and drop the exported file onto the dropzone below.
+                </span>
 			</p>
         </div>
 
@@ -45,7 +49,7 @@ <h1 class="logo">
 
         <div class="modal-icons">
             <div class="buttons">
-                <button type="button" class="btn btn-primary exportTabs">Export all tabs</button>
+                <button type="button" class="btn btn-primary exportTabs exportAllTabs">Export all tabs</button>
                 <button type="button" class="btn btn-primary exportTabs exportSelected">Export selected tabs</button>
 				<br>
                 <button type="button" class="btn btn-secondary aboutTabPorter">About</button>
@@ -54,5 +58,6 @@ <h1 class="logo">
         </div>
 
         <script src="dropzone.js"></script>
+        <script src="translations.js"></script>
     </body>
 </html>

src/style.css

@@ -3,7 +3,7 @@ html, body
     font-size: 14px;
     margin: 0;
     padding: 0;
-    width: 384px;
+    width: 700px;
     min-height: 180px;
     }
 

src/translations.js

@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", function()
+    {
+    document.querySelector('.intro').textContent = chrome.i18n.getMessage('introText');
+    document.querySelector('.explanation .part-one').textContent = chrome.i18n.getMessage('howTo_one');
+    document.querySelector('.explanation .part-two').textContent = chrome.i18n.getMessage('howTo_two');
+    document.querySelector('.dropzone p').innerHTML = chrome.i18n.getMessage('dropzone');
+    document.querySelector('.exportTabs.exportAllTabs').innerText = chrome.i18n.getMessage('export_all_tabs_btn');
+    document.querySelector('.exportTabs.exportSelected').innerText = chrome.i18n.getMessage('export_selected_tabs_btn');
+    document.querySelector('.aboutTabPorter').innerText = chrome.i18n.getMessage('about_btn');
+    document.querySelector('.sourceCode').innerText = chrome.i18n.getMessage('source_btn');
+    });
+