🐛 Use the right module to make i18n works with all browsers

src/scripts/contentscript.js

@@ -7,6 +7,7 @@ var extractTags = () => {
   var data = {
     title: "",
     description: "",
+    image: "",
     url: document.location.href
   };
 
@@ -17,11 +18,21 @@ var extractTags = () => {
     data.title = document.title
   }
 
-  var descriptionTag = document.querySelector("meta[property='og:description']") || document.querySelector("meta[name='description']")
+  var descriptionTag = document.querySelector("meta[property='og:description']") || document.querySelector("meta[name='description']");
   if(descriptionTag) {
     data.description = descriptionTag.getAttribute("content")
   }
 
+  var imgTag = document.querySelector("meta[property='og:image']") || document.querySelector("meta[property='twitter-image']");
+    if(imgTag) {
+        data.image = imgTag.getAttribute("content")
+    } else {
+        imgTag = document.querySelector("link[rel=icon]") || document.querySelector("link[rel=apple-touch-icon]");
+        if (imgTag) {
+          data.image = imgTag.getAttribute("href");
+        }
+    }
+
   return data;
 };
 

src/scripts/options.js

@@ -6,7 +6,7 @@ var tokenInput = document.querySelector("[name=token]");
 var message = document.getElementById("msg");
 
 storage.get('url', function(resp) {
-    urlInput.value = resp.url || "https://bookmarklet.shikiryu.com";
+    urlInput.value = resp.url || "https://app.readlater.shikiryu.com";
 });
 
 storage.get('token', function(resp) {
@@ -16,17 +16,17 @@ storage.get('token', function(resp) {
 urlInput.addEventListener("blur", function(e) {
     var value = this.value;
     storage.set({ url: value }, function() {
-      message.innerHTML = browser.i18n.getMessage("URLChanged");
+      message.innerHTML = ext.browser.i18n.getMessage("URLChanged");
     });
 });
 
 tokenInput.addEventListener("blur", function(e) {
     var value = this.value;
     storage.set({ token: value }, function() {
-      message.innerHTML = browser.i18n.getMessage("tokenSaved");
+      message.innerHTML = ext.browser.i18n.getMessage("tokenSaved");
     });
 });
 
 document.querySelectorAll("[data-message]").forEach(function(elt) {
-   elt.innerHTML = browser.i18n.getMessage(elt.dataset.message);
+   elt.innerHTML = ext.browser.i18n.getMessage(elt.dataset.message);
 });

src/scripts/popup.js

@@ -4,6 +4,8 @@ import storage from "./utils/storage";
 var page_data = {
     title: "",
     description: "",
+    image: "",
+    comment: "",
     url: document.location.href
 };
 
@@ -20,6 +22,11 @@ var template = (data) => {
   <div class="site-description">
     <h3 class="title">${data.title}</h3>
     <p class="description">${data.description}</p>
+    <p class="image"><img src="${data.image}"></p>
+    <div>
+        <label for="comment">Comment:</label>
+        <textarea id="comment" name="comment"></textarea>
+    </div>
     <a href="${data.url}" target="_blank" class="url">${data.url}</a>
   </div>
   <div class="action-container">
@@ -38,7 +45,7 @@ var renderBookmark = (data) => {
       page_data = data;
       displayContainer.innerHTML = template(data);
   } else {
-    renderMessage(browser.i18n.getMessage("cantExtractTitle"));
+    renderMessage(ext.browser.i18n.getMessage("cantExtractTitle"));
   }
 };
 
@@ -50,12 +57,13 @@ ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
 popup.addEventListener("click", function(e) {
   if(e.target && e.target.matches("#save-btn")) {
       e.preventDefault();
+      page_data.comment = document.getElementById("comment").innerText;
       // var data = e.target.getAttribute("data-bookmark");
       ext.runtime.sendMessage({action: "perform-save", data: page_data}, function (response) {
           if (response && response.action === "saved") {
-              renderMessage(browser.i18n.getMessage("savedSuccessfully"));
+              renderMessage(ext.browser.i18n.getMessage("savedSuccessfully"));
           } else {
-              renderMessage(browser.i18n.getMessage("unknownError"));
+              renderMessage(ext.browser.i18n.getMessage("unknownError"));
           }
       });
   }
@@ -64,7 +72,7 @@ popup.addEventListener("click", function(e) {
 var dataMessages = document.querySelectorAll("[data-message]");
 [].forEach.call(dataMessages, function(elt) {
     console.log(elt.dataset.message);
-    elt.innerHTML = browser.i18n.getMessage(elt.dataset.message);
+    elt.innerHTML = ext.browser.i18n.getMessage(elt.dataset.message);
 });
 
 var optionsLink = document.querySelector(".js-options");