♻️ Simplify usage of object and JSON

src/scripts/background.js

@@ -4,7 +4,7 @@ import storage from "./utils/storage";
 ext.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
     if(request.action === "perform-save") {
-      var data = JSON.parse(request.data);
+      var data = request.data;
       var url;
       var token;
       storage.get(['url', 'token'], function(resp) {

src/scripts/contentscript.js

@@ -8,7 +8,7 @@ var extractTags = () => {
     title: "",
     description: "",
     url: document.location.href
-  }
+  };
 
   var ogTitle = document.querySelector("meta[property='og:title']");
   if(ogTitle) {
@@ -23,7 +23,7 @@ var extractTags = () => {
   }
 
   return data;
-}
+};
 
 function onRequest(request, sender, sendResponse) {
   if (request.action === 'process-page') {

src/scripts/popup.js

@@ -1,6 +1,12 @@
 import ext from "./utils/ext";
 import storage from "./utils/storage";
 
+var page_data = {
+    title: "",
+    description: "",
+    url: document.location.href
+};
+
 var popup = document.getElementById("app");
 storage.get('color', function(resp) {
   var color = resp.color;
@@ -10,7 +16,6 @@ storage.get('color', function(resp) {
 });
 
 var template = (data) => {
-  var json = JSON.stringify(data);
   return (`
   <div class="site-description">
     <h3 class="title">${data.title}</h3>
@@ -18,7 +23,7 @@ var template = (data) => {
     <a href="${data.url}" target="_blank" class="url">${data.url}</a>
   </div>
   <div class="action-container">
-    <button data-bookmark='${json}' id="save-btn" class="btn btn-primary">Save</button>
+    <button id="save-btn" class="btn btn-primary">Save</button>
   </div>
   `);
 };
@@ -30,12 +35,12 @@ var renderMessage = (message) => {
 var renderBookmark = (data) => {
   var displayContainer = document.getElementById("display-container")
   if(data) {
-    var tmpl = template(data);
+      page_data = data;
-    displayContainer.innerHTML = tmpl;  
+      displayContainer.innerHTML = template(data);
   } else {
     renderMessage(browser.i18n.getMessage("cantExtractTitle"));
   }
-}
+};
 
 ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
   var activeTab = tabs[0];
@@ -45,8 +50,8 @@ ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
 popup.addEventListener("click", function(e) {
   if(e.target && e.target.matches("#save-btn")) {
       e.preventDefault();
-      var data = e.target.getAttribute("data-bookmark");
+      // var data = e.target.getAttribute("data-bookmark");
-      ext.runtime.sendMessage({action: "perform-save", data: data}, function (response) {
+      ext.runtime.sendMessage({action: "perform-save", data: page_data}, function (response) {
           if (response && response.action === "saved") {
               renderMessage(browser.i18n.getMessage("savedSuccessfully"));
           } else {
@@ -57,7 +62,6 @@ popup.addEventListener("click", function(e) {
 });
 
 var dataMessages = document.querySelectorAll("[data-message]");
-console.dir(dataMessages);
 [].forEach.call(dataMessages, function(elt) {
     console.log(elt.dataset.message);
     elt.innerHTML = browser.i18n.getMessage(elt.dataset.message);