🎉 Hello World

src/scripts/background.js

@@ -0,0 +1,31 @@
+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 = JSON.parse(request.data);
+      var url;
+      var token;
+      storage.get('url', function(resp) {
+        url = resp.url;
+        storage.get('token', function(resp) {
+          token = resp.token;
+          console.log("Extension Type: ", "/* @echo extension */");
+          console.log("PERFORM AJAX", request.data);
+          var destination = url+"?v=1&u="+encodeURIComponent(data.url)+"&t="+encodeURIComponent(data.title)+"&m="+encodeURIComponent(token);
+    
+          console.log("Destination: ", destination);
+          fetch(destination)
+          .then(function(response) {
+            console.log(response);
+          });
+          
+          sendResponse({ action: "saved" });
+        });
+      });
+      
+      
+    }
+  }
+);

src/scripts/contentscript.js

@@ -0,0 +1,34 @@
+import ext from "./utils/ext";
+
+var extractTags = () => {
+  var url = document.location.href;
+  if(!url || !url.match(/^http/)) return;
+
+  var data = {
+    title: "",
+    description: "",
+    url: document.location.href
+  }
+
+  var ogTitle = document.querySelector("meta[property='og:title']");
+  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")
+  }
+
+  return data;
+}
+
+function onRequest(request, sender, sendResponse) {
+  if (request.action === 'process-page') {
+    sendResponse(extractTags())
+  }
+}
+
+ext.runtime.onMessage.addListener(onRequest);

src/scripts/livereload.js

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

src/scripts/options.js

@@ -0,0 +1,28 @@
+import ext from "./utils/ext";
+import storage from "./utils/storage";
+
+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://bookmarklet.shikiryu.com";
+});
+
+storage.get('token', function(resp) {
+    tokenInput.value = resp.token;
+});
+
+urlInput.addEventListener("blur", function(e) {
+    var value = this.value;
+    storage.set({ url: value }, function() {
+      message.innerHTML = "URL changed!";
+    });
+});
+
+tokenInput.addEventListener("blur", function(e) {
+    var value = this.value;
+    storage.set({ token: value }, function() {
+      message.innerHTML = "Token saved!";
+    });
+});

src/scripts/popup.js

@@ -0,0 +1,63 @@
+import ext from "./utils/ext";
+import storage from "./utils/storage";
+
+var popup = document.getElementById("app");
+storage.get('color', function(resp) {
+  var color = resp.color;
+  if(color) {
+    popup.style.backgroundColor = color
+  }
+});
+
+var template = (data) => {
+  var json = JSON.stringify(data);
+  return (`
+  <div class="site-description">
+    <h3 class="title">${data.title}</h3>
+    <p class="description">${data.description}</p>
+    <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>
+  </div>
+  `);
+}
+var renderMessage = (message) => {
+  var displayContainer = document.getElementById("display-container");
+  displayContainer.innerHTML = `<p class='message'>${message}</p>`;
+}
+
+var renderBookmark = (data) => {
+  var displayContainer = document.getElementById("display-container")
+  if(data) {
+    var tmpl = template(data);
+    displayContainer.innerHTML = tmpl;  
+  } else {
+    renderMessage("Sorry, could not extract this page's title and URL")
+  }
+}
+
+ext.tabs.query({active: true, currentWindow: true}, function(tabs) {
+  var activeTab = tabs[0];
+  chrome.tabs.sendMessage(activeTab.id, { action: 'process-page' }, renderBookmark);
+});
+
+popup.addEventListener("click", function(e) {
+  if(e.target && e.target.matches("#save-btn")) {
+    e.preventDefault();
+    var data = e.target.getAttribute("data-bookmark");
+    ext.runtime.sendMessage({ action: "perform-save", data: data }, function(response) {
+      if(response && response.action === "saved") {
+        renderMessage("Your bookmark was saved successfully!");
+      } else {
+        renderMessage("Sorry, there was an error while saving your bookmark.");
+      }
+    })
+  }
+});
+
+var optionsLink = document.querySelector(".js-options");
+optionsLink.addEventListener("click", function(e) {
+  e.preventDefault();
+  ext.tabs.create({'url': ext.extension.getURL('options.html')});
+})

src/scripts/utils/ext.js

@@ -0,0 +1,68 @@
+const apis = [
+  '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
+
+  apis.forEach(function (api) {
+
+    _this[api] = null
+
+    try {
+      if (chrome[api]) {
+        _this[api] = chrome[api]
+      }
+    } catch (e) {}
+
+    try {
+      if (window[api]) {
+        _this[api] = window[api]
+      }
+    } catch (e) {}
+
+    try {
+      if (browser[api]) {
+        _this[api] = browser[api]
+      }
+    } catch (e) {}
+    try {
+      _this.api = browser.extension[api]
+    } catch (e) {}
+  })
+
+  try {
+    if (browser && browser.runtime) {
+      this.runtime = browser.runtime
+    }
+  } catch (e) {}
+
+  try {
+    if (browser && browser.browserAction) {
+      this.browserAction = browser.browserAction
+    }
+  } catch (e) {}
+
+}
+
+module.exports = new Extension();

src/scripts/utils/storage.js

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