fixes #101

extension/_locales/en/messages.json

@@ -70,6 +70,9 @@
   "exportSettings": {
     "message": "Export Settings"
   },
+  "exportSettingsTitle": {
+    "message": "To generate minified version, press Shift key while pressing this button"
+  },
   "help": {
     "message": "FAQs Page (Help)"
   },
@@ -172,6 +175,15 @@
   "uaPlaceholder": {
     "message": "Your preferred user-agent string"
   },
+  "ztoa": {
+    "message": "Z to A"
+  },
+  "atoz": {
+    "message": "A to Z"
+  },
+  "filterAmong": {
+    "message": "Filter among $1"
+  },
   "msgDefaultUA": {
     "message": "Default UA, press the reset button instead"
   },

extension/data/options/index.html

@@ -66,7 +66,7 @@
   <div class="admin" data-localize="managedStorage">This extension supports managed storage. All the preferences can be pre-configured by the domain administrator</div>
   <div id="backup">
     <button id="import" data-localize="importSettings">Import Settings</button>
-    <button title="to generate minified version, press Shift key while pressing this button" id="export" data-localize="exportSettings">Export Settings</button>
+    <button data-localized-title="exportSettingsTitle" title="To generate minified version, press Shift key while pressing this button" id="export" data-localize="exportSettings">Export Settings</button>
   </div>
   <div id="tools">
     <button id="help" data-localize="help">FAQs Page (Help)</button>

extension/data/options/index.js

@@ -8,6 +8,13 @@ document.querySelectorAll('[data-localize]').forEach(e => {
     e.textContent = translated;
   }
 });
+document.querySelectorAll('[data-localized-title]').forEach(e => {
+  const ref = e.dataset.localizedTitle;
+  const translated = chrome.i18n.getMessage(ref);
+  if (translated) {
+    e.title = translated;
+  }
+});
 
 function notify(msg, period = 750) {
   // Update status to let user know options were saved.

extension/data/popup/index.html

@@ -40,8 +40,8 @@
           <th>
             <input type="search" id="custom" placeholder="Filter items">&nbsp;
             <select id="sort">
-              <option value="descending">Z to A</option>
+              <option value="descending" data-localize="ztoa">Z to A</option>
-              <option value="ascending">A to Z</option>
+              <option value="ascending" data-localize="atoz">A to Z</option>
             </select>
           </th>
         </tr>

extension/data/popup/index.js

@@ -8,7 +8,6 @@ document.querySelectorAll('[data-localized-value]').forEach(e => {
     e.value = translated;
   }
 });
-
 document.querySelectorAll('[data-localized-title]').forEach(e => {
   const ref = e.dataset.localizedTitle;
   const translated = chrome.i18n.getMessage(ref);
@@ -16,6 +15,13 @@ document.querySelectorAll('[data-localized-title]').forEach(e => {
     e.title = translated;
   }
 });
+document.querySelectorAll('[data-localize]').forEach(e => {
+  const ref = e.dataset.localize;
+  const translated = chrome.i18n.getMessage(ref);
+  if (translated) {
+    e.textContent = translated;
+  }
+});
 
 const DCSI = 'firefox-default';
 
@@ -155,7 +161,7 @@ function update(ua) {
             inline: 'nearest'
           });
         }
-        document.getElementById('custom').placeholder = `Filter among ${list.length}`;
+        document.getElementById('custom').placeholder = chrome.i18n.getMessage('filterAmong', [list.length]);
         [...document.getElementById('os').querySelectorAll('option')].forEach(option => {
           option.disabled = (map.matching[browser.toLowerCase()] || []).indexOf(option.value.toLowerCase()) === -1;
         });