amitt001 · oriolrius · Jul 18, 2018
diff --git a/README.md b/README.md
@@ -25,6 +25,8 @@ Check link stats by adding **+** to the URL. Example [pygy.co/pygmy+](https://py
 - [How Link Stats Are Generated?](#how-link-stats-are-generated)
 - [How Pygmy Auth Token Works?](#how-pygmy-auth-token-works)
 - [Development](#development)
+- [Browser extension](#browser-extension)
+    - [Development of the extension](#development-of-the-extension)
 - [Contributions](#contributions)
 - [Sponsorship](#sponsorship)
 - [License](#license)
@@ -247,10 +249,24 @@ See coverage report(Coverage is bad because the coverage for integration tests i
 
 `coverage report`
 
+Browser extension
+=================
+
+Chrome extension is available on Chrome Store with the name: [your ShortURL service (pygmy)](https://chrome.google.com/webstore/detail/your-shorturl-service-pyg/kchefoihlnhfcaphckpopdknaolfegkp).
+
+Development of the extension
+----------------------------
+
+* Enable development switch button on Crhome extension manager section
+* Load extension from a folder
+* Now you can start evolving the code and reload it with just one click on the Chrome extensions
+
+
 Contributions
 =============
 
-Thanks [batarian71](https://github.com/batarian71) for providing the logo icon.
+* Thanks [batarian71](https://github.com/batarian71) for providing the logo icon.
+* [oriolrius](http://oriolrius.cat) Chrome extension.
 
 Sponsorship
 ===========

diff --git a/extensions/chrome/clipboard.min.js b/extensions/chrome/clipboard.min.js
diff --git a/extensions/chrome/icon.png b/extensions/chrome/icon.png
diff --git a/extensions/chrome/manifest.json b/extensions/chrome/manifest.json
@@ -0,0 +1,24 @@
+{
+  "manifest_version": 2,
+  "name": "your ShortURL service (pygmy)",
+  "version": "0.4",
+    "description": "pygmy shorturl Chrome extension",
+  "icons": {
+    "16": "icon.png"
+  },
+  "browser_action": {
+    "default_icon": "icon.png",
+    "default_title": "Create short URLs",
+    "default_popup": "popup.html"
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": false
+  },
+  "permissions": [
+    "tabs",
+    "clipboardWrite",
+    "activeTab",
+    "storage"
+  ]
+}
diff --git a/extensions/chrome/options.html b/extensions/chrome/options.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>pymyg shorturl settings</title>
+  </head>
+  <body>
+    <div align="center">
+      <fieldset>
+        <label for="rest_url"><strong>pymyg service REST URL:</strong></label>
+        <input type="text" size="40" id="rest_url"><br />
+        <div id="status"></div>
+        <button id="save">Save</button>
+      </fieldset>       
+    </div>
+    <script src="options.js"></script>
+  </body>
+</html>
diff --git a/extensions/chrome/options.js b/extensions/chrome/options.js
@@ -0,0 +1,29 @@
+// Saves settings to chrome.storage
+function save_options() {
+  var rest_url = document.getElementById('rest_url').value;
+  chrome.storage.sync.set({ 'restUrl': rest_url}, 
+    function() {
+      console.log('saved');
+      // Update status to let user know options were saved.
+      var status = document.getElementById('status');
+      status.innerHTML = '<br /><strong>Settings saved.</strong><br /><br />';
+      setTimeout(function() {
+        status.innerHTML = '';
+      }, 1500);
+    }
+  );
+}
+
+// Restore settings from chrome.storage
+function restore_options() {
+  // Set default
+  chrome.storage.sync.get({ restUrl: 'https://api.url.joor.net'}, 
+    function(items) {
+      document.getElementById('rest_url').value = items.restUrl;
+    }
+  );
+}
+
+// linking events to the previous functions
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click', save_options);
diff --git a/extensions/chrome/popup.html b/extensions/chrome/popup.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>ShortURL</title>
+  <script src="clipboard.min.js"></script>
+  <script src="popup.js"></script>
+</head>
+<body>
+  <div align="center">
+    <fieldset>
+      <label for="long-url"><strong>Current tab URL:</strong></label>
+      <input type="text" size="40" id="long-url" value="long url"><br />
+      <input type="button" id="short" value="Make Short"><br /><br />
+      <label for="short-url"><strong>Short URL:</strong></label>
+      <div id="short-url">--- not defined ---</div><br />
+      <input type="button" id="cc" data-clipboard-target="#short-url" value="Copy to clipboard"><br / -->
+      <div id="status"></div>
+    </fieldset>
+    <br />
+    <div id="backend"></div>
+  </div>
+</body>
+</html>
diff --git a/extensions/chrome/popup.js b/extensions/chrome/popup.js
@@ -0,0 +1,65 @@
+var su = 'default value';
+
+function makeShort(tablink) {
+  chrome.storage.sync.get({ restUrl: 'https://api.url.joor.net'}, 
+    function(items) {
+      var rest_url = items.restUrl;
+      document.getElementById("backend").innerHTML = '\
+        Backend used: <a href="'+rest_url+'">'+rest_url+'</a><br />\
+        Change the backend using extension options.';
+      rest_query( tablink, rest_url);
+    }
+  );
+}
+
+// REST client query
+function rest_query(tablink, rest_url) { 
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", rest_url + '/api/shorten', true);
+  xhr.setRequestHeader("Content-Type", "application/json");
+  var req = {name:"John Rambo", time:"2pm"};
+  var req = {
+    secret_key: "", 
+    expire_after: null, 
+    is_protected: false, 
+    owner: null, 
+    is_custom: false, 
+    short_code: "", 
+    long_url: tablink, 
+    description: null
+  };
+  var data = JSON.stringify(req);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      var jresponse = JSON.parse(xhr.responseText);
+      su = jresponse.short_url; //+ '/' + jresponse.short_code;
+      var link = "<a href=\""+su+"\">"+su+"</a>";
+      document.getElementById("short-url").innerHTML = link;
+      document.getElementById("short-url").addEventListener('click', function() {
+        chrome.tabs.create({ url: su});
+      })
+    }
+  }
+  xhr.send(data);
+}
+
+chrome.tabs.getSelected(null,function(tab) {
+  var tablink = tab.url; 
+  document.getElementById("long-url").setAttribute('value',tablink);
+  document.getElementById("short").onclick = function() {
+    makeShort(tablink);
+  };
+
+  var cc = new ClipboardJS('#cc');
+  cc.on('success', function(e) {
+    document.getElementById('status').innerHTML = '<br /><strong>Copied to clipboard.</strong><br /><br />';
+    setTimeout(function() {
+      document.getElementById('status').innerHTML = '';
+    }, 1500);
+  });
+  cc.on('error', function(e) {
+      console.error('Action:', e.action);
+      console.error('Trigger:', e.trigger);
+  });
+});
+