🚨 Add prettier

Fix #2

package.json

@@ -47,8 +47,16 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.4",
     "gulp-zip": "^2.0.3",
+    "husky": "^2.2.0",
     "preprocessify": "^1.0.1",
+    "prettier": "^1.17.0",
+    "pretty-quick": "^1.10.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
 }

src/scripts/background.js

@@ -1,44 +1,47 @@
 import ext from "./utils/ext";
 import storage from "./utils/storage";
 
-ext.runtime.onMessage.addListener(
-  function(request, sender, sendResponse) {
-    if(request.action === "perform-save") {
-      var data = request.data;
-      var url;
-      var token;
-      storage.get(['url', 'token'], function(resp) {
-        url = resp.url;
-        token = resp.token;
-        var params = {
-            v: 1,
-            u: encodeURIComponent(data.url),
-            t: encodeURIComponent(data.title),
-            d: encodeURIComponent(data.description),
-            api_token: encodeURIComponent(token),
-            i: encodeURIComponent(data.image),
-            c: encodeURIComponent(data.comment),
-        };
-          var queryString = Object.keys(params).map((key) => {
-              return key + '=' + params[key];
-          }).join('&');
-        fetch(url + "/api/links", {
-            method: 'POST',
-            headers: {
-              'Accept': 'application/json'
-            },
-            body: new URLSearchParams(queryString)
+ext.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  if (request.action === "perform-save") {
+    var data = request.data;
+    var url;
+    var token;
+    storage.get(["url", "token"], function(resp) {
+      url = resp.url;
+      token = resp.token;
+      var params = {
+        v: 1,
+        u: encodeURIComponent(data.url),
+        t: encodeURIComponent(data.title),
+        d: encodeURIComponent(data.description),
+        api_token: encodeURIComponent(token),
+        i: encodeURIComponent(data.image),
+        c: encodeURIComponent(data.comment)
+      };
+      var queryString = Object.keys(params)
+        .map(key => {
+          return key + "=" + params[key];
         })
-        .then(function(response) {
-            if (200 === response.status) {
-                sendResponse({action: "saved"});
-            } else {
-                sendResponse({action: "error", status: response.status, error: response.statusText});
-            }
-        });
+        .join("&");
+      fetch(url + "/api/links", {
+        method: "POST",
+        headers: {
+          Accept: "application/json"
+        },
+        body: new URLSearchParams(queryString)
+      }).then(function(response) {
+        if (200 === response.status) {
+          sendResponse({ action: "saved" });
+        } else {
+          sendResponse({
+            action: "error",
+            status: response.status,
+            error: response.statusText
+          });
+        }
       });
+    });
 
-      return true; // https://stackoverflow.com/a/20077854
-    }
+    return true; // https://stackoverflow.com/a/20077854
   }
-);
+});

src/scripts/contentscript.js

@@ -16,34 +16,40 @@ var extractTags = () => {
   };
 
   var ogTitle = document.querySelector("meta[property='og:title']");
-  if(ogTitle) {
+  if (ogTitle) {
     data.title = ogTitle.getAttribute("content");
   } else {
     data.title = document.title;
   }
 
-  var descriptionTag = document.querySelector("meta[property='og:description']") || document.querySelector("meta[name='description']");
-  if(descriptionTag) {
-    data.description = descriptionTag.getAttribute("content")
+  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");
-        }
+  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;
 };
 
 function onRequest(request, sender, sendResponse) {
-  if (request.action === 'process-page') {
-    sendResponse(extractTags())
+  if (request.action === "process-page") {
+    sendResponse(extractTags());
   }
 }
 
-ext.runtime.onMessage.addListener(onRequest);
+ext.runtime.onMessage.addListener(onRequest);

src/scripts/livereload.js

@@ -1,20 +1,22 @@
-'use strict';
+"use strict";
 
 import ext from "./utils/ext";
 
-var LIVERELOAD_HOST = 'localhost:';
+var LIVERELOAD_HOST = "localhost:";
 var LIVERELOAD_PORT = 35729;
-var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');
+var connection = new WebSocket(
+  "ws://" + LIVERELOAD_HOST + LIVERELOAD_PORT + "/livereload"
+);
 
-connection.onerror = function (error) {
-  console.log('reload connection got error:', error);
+connection.onerror = function(error) {
+  console.log("reload connection got error:", error);
 };
 
-connection.onmessage = function (e) {
+connection.onmessage = function(e) {
   if (e.data) {
     var data = JSON.parse(e.data);
-    if (data && data.command === 'reload') {
+    if (data && data.command === "reload") {
       ext.runtime.reload();
     }
   }
-};
+};

src/scripts/options.js

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

src/scripts/popup.js

@@ -2,69 +2,80 @@ import ext from "./utils/ext";
 import storage from "./utils/storage";
 
 var page_data = {
-    title: "",
-    description: "",
-    image: "",
-    comment: "",
-    url: document.location.href
+  title: "",
+  description: "",
+  image: "",
+  comment: "",
+  url: document.location.href
 };
 
 var popup = document.getElementById("app");
-storage.get('color', function(resp) {
+storage.get("color", function(resp) {
   var color = resp.color;
-  if(color) {
-    popup.style.backgroundColor = color
+  if (color) {
+    popup.style.backgroundColor = color;
   }
 });
 
-var renderMessage = (message) => {
+var renderMessage = message => {
   var displayContainer = document.getElementById("display-container");
   displayContainer.textContent = message;
 };
 
-var renderBookmark = (data) => {
+var renderBookmark = data => {
   if (data) {
-      page_data = data;
-      document.querySelector("[data-template=title]").textContent = page_data.title;
-      document.querySelector("[data-template=description]").textContent = page_data.description;
-      if ("" !== img) {
-		  var img = document.createElement("image");
-		  img.src = page_data.image;
-		  document.querySelector("[data-template=image]").appendChild(img);
-	  }
-      document.querySelector("[data-template=url]").textContent = page_data.url;
-      document.querySelector("[data-template=url]").setAttribute("href", page_data.url);
+    page_data = data;
+    document.querySelector("[data-template=title]").textContent =
+      page_data.title;
+    document.querySelector("[data-template=description]").textContent =
+      page_data.description;
+    if ("" !== img) {
+      var img = document.createElement("image");
+      img.src = page_data.image;
+      document.querySelector("[data-template=image]").appendChild(img);
+    }
+    document.querySelector("[data-template=url]").textContent = page_data.url;
+    document
+      .querySelector("[data-template=url]")
+      .setAttribute("href", page_data.url);
   } else {
     renderMessage(ext.i18n.getMessage("cantExtractTitle"));
   }
 };
 
-ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
+ext.tabs.query({ active: true, currentWindow: true }, function(tabs) {
   var activeTab = tabs[0];
-  chrome.tabs.sendMessage(activeTab.id, { action: 'process-page' }, renderBookmark);
+  chrome.tabs.sendMessage(
+    activeTab.id,
+    { action: "process-page" },
+    renderBookmark
+  );
 });
 
 popup.addEventListener("click", function(e) {
-  if(e.target && e.target.matches("#save-btn")) {
-      e.preventDefault();
-      page_data.comment = document.getElementById("comment").value;
-      ext.runtime.sendMessage({action: "perform-save", data: page_data}, function (response) {
-          if (response && response.action === "saved") {
-              renderMessage(ext.i18n.getMessage("savedSuccessfully"));
-          } else {
-              renderMessage(response.error + " ("+response.status+")");
-          }
-      });
+  if (e.target && e.target.matches("#save-btn")) {
+    e.preventDefault();
+    page_data.comment = document.getElementById("comment").value;
+    ext.runtime.sendMessage(
+      { action: "perform-save", data: page_data },
+      function(response) {
+        if (response && response.action === "saved") {
+          renderMessage(ext.i18n.getMessage("savedSuccessfully"));
+        } else {
+          renderMessage(response.error + " (" + response.status + ")");
+        }
+      }
+    );
   }
 });
 
 var dataMessages = document.querySelectorAll("[data-message]");
 [].forEach.call(dataMessages, function(elt) {
-    elt.textContent = ext.i18n.getMessage(elt.dataset.message);
+  elt.textContent = ext.i18n.getMessage(elt.dataset.message);
 });
 
 var optionsLink = document.querySelector(".js-options");
 optionsLink.addEventListener("click", function(e) {
   e.preventDefault();
-  ext.tabs.create({'url': ext.extension.getURL('options.html')});
+  ext.tabs.create({ url: ext.extension.getURL("options.html") });
 });

src/scripts/utils/ext.js

@@ -1,68 +1,66 @@
 const apis = [
-  'alarms',
-  'bookmarks',
-  'browserAction',
-  'commands',
-  'contextMenus',
-  'cookies',
-  'downloads',
-  'events',
-  'extension',
-  'extensionTypes',
-  'history',
-  'i18n',
-  'idle',
-  'notifications',
-  'pageAction',
-  'runtime',
-  'storage',
-  'tabs',
-  'webNavigation',
-  'webRequest',
-  'windows',
-]
+  "alarms",
+  "bookmarks",
+  "browserAction",
+  "commands",
+  "contextMenus",
+  "cookies",
+  "downloads",
+  "events",
+  "extension",
+  "extensionTypes",
+  "history",
+  "i18n",
+  "idle",
+  "notifications",
+  "pageAction",
+  "runtime",
+  "storage",
+  "tabs",
+  "webNavigation",
+  "webRequest",
+  "windows"
+];
 
-function Extension () {
-  const _this = this
+function Extension() {
+  const _this = this;
 
-  apis.forEach(function (api) {
-
-    _this[api] = null
+  apis.forEach(function(api) {
+    _this[api] = null;
 
     try {
       if (chrome[api]) {
-        _this[api] = chrome[api]
+        _this[api] = chrome[api];
       }
     } catch (e) {}
 
     try {
       if (window[api]) {
-        _this[api] = window[api]
+        _this[api] = window[api];
       }
     } catch (e) {}
 
     try {
       if (browser[api]) {
-        _this[api] = browser[api]
+        _this[api] = browser[api];
       }
     } catch (e) {}
     try {
-      _this.api = browser.extension[api]
+      _this.api = browser.extension[api];
     } catch (e) {}
-  })
+  });
 
   try {
     if (browser && browser.runtime) {
-      this.runtime = browser.runtime
+      this.runtime = browser.runtime;
     }
   } catch (e) {}
 
   try {
     if (browser && browser.browserAction) {
-      this.browserAction = browser.browserAction
+      this.browserAction = browser.browserAction;
     }
   } catch (e) {}
-
 }
 
-module.exports = new Extension();
+module.exports = new Extension();

src/scripts/utils/storage.js

@@ -1,3 +1,3 @@
 import ext from "./ext";
 
-module.exports = (ext.storage.sync ? ext.storage.sync : ext.storage.local);
+module.exports = ext.storage.sync ? ext.storage.sync : ext.storage.local;