Merge branch 'master' into webextension

CONTRIBUTING.md

@@ -7,12 +7,26 @@
 ## Development
 - `npm install` to install dependencies.
 - `npm run dev` to to watch file changes in developement 
-    - (Reload Extension Manually with reload button in `chrome://extensions`)
-- Load extension via `chrome://extensions` as unpacked from `extension/` directory.
-- You need to generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a> (Settings page)
+    - (Reload Extension Manually in the browser)
+- Load extension via as unpacked from `extension/` directory.
+- Generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a> (Settings page)
 - Paste and Save the `Key` in extension's `options page`.
 
 `npm run build` builds the extension to `extension/` directory.
 
+## Testing
+Download latest `Pre-Release`
+
+[<img src=".github/assets/direct-download.png"
+alt="Direct download"
+height="70">](https://github.com/abhijithvijayan/kuttUrl-browser-extension/releases)
+
+## ToDO
+
+- [ ] Switch to Promise return Method
+- [ ] Fix UI issues in Firefox
+- [ ] Using Node-Kutt package(feature request)
+
+
 ## Note:
 Shortening may take a while, it's not the issue with the extension but with <a href="https://github.com/thedevs-network/kutt">Kutt.it's API</a>.

README.md

@@ -1,26 +1,31 @@
 <div align="center"><img width="150" src="src/assets/logo.png" /></div>
-<h1 align="center">kuttURL-Chrome</h1>
-<p align="center">Chrome browser extension to to shorten URLs for <a href="https://kutt.it">Kutt.it</a></p>
+<h1 align="center">kuttURL-browser-extension</h1>
+<p align="center">Browser extension to to shorten URLs for <a href="https://kutt.it">Kutt.it</a></p>
 
 <div align="center">
-  <a href="https://travis-ci.org/abhijithvijayan/kuttUrl-Chrome-extension">
-    <img src="https://travis-ci.org/abhijithvijayan/kuttUrl-Chrome-extension.svg?branch=master" alt="Travis Build" />
+  <a href="https://travis-ci.org/abhijithvijayan/kuttUrl-browser-extension">
+    <img src="https://travis-ci.org/abhijithvijayan/kuttUrl-browser-extension.svg?branch=master" alt="Travis Build" />
   </a>
-  <a href="https://github.com/abhijithvijayan/kuttUrl-Chrome-extension/issues?q=is%3Aopen+is%3Aissue">
-    <img src="https://img.shields.io/github/issues-raw/abhijithvijayan/kuttUrl-Chrome-extension.svg?colorB=blue" alt="Open Issues" />
+  <a href="https://github.com/abhijithvijayan/kuttUrl-browser-extension/releases/latest">
+    <img src="https://img.shields.io/github/release/abhijithvijayan/kuttUrl-browser-extension.svg?colorB=blue" alt="Releases" />
   </a>
-  <a href="https://github.com/abhijithvijayan/kuttUrl-Chrome-extension/issues?q=is%3Aissue+is%3Aclosed">
-    <img src="https://img.shields.io/github/issues-closed-raw/abhijithvijayan/kuttUrl-Chrome-extension.svg?colorB=red" alt="Closed Issues" />
+  <a href="https://github.com/abhijithvijayan/kuttUrl-browser-extension/issues?q=is%3Aopen+is%3Aissue">
+    <img src="https://img.shields.io/github/issues-raw/abhijithvijayan/kuttUrl-browser-extension.svg?colorB=lightgrey" alt="Open Issues" />
   </a>
-  <a href="https://david-dm.org/abhijithvijayan/kuttUrl-Chrome-extension">
-    <img src="https://img.shields.io/david/abhijithvijayan/kuttUrl-Chrome-extension.svg?colorB=orange" alt="DEPENDENCIES" />
+  <a href="https://github.com/abhijithvijayan/kuttUrl-browser-extension/issues?q=is%3Aissue+is%3Aclosed">
+    <img src="https://img.shields.io/github/issues-closed-raw/abhijithvijayan/kuttUrl-browser-extension.svg?colorB=red" alt="Closed Issues" />
   </a>
-  <a href="https://github.com/abhijithvijayan/kuttUrl-Chrome-extension">
-    <img src="https://img.shields.io/github/license/abhijithvijayan/kuttUrl-Chrome-extension.svg" alt="LICENSE" />
+  <a href="https://david-dm.org/abhijithvijayan/kuttUrl-browser-extension">
+    <img src="https://img.shields.io/david/abhijithvijayan/kuttUrl-browser-extension.svg?colorB=orange" alt="DEPENDENCIES" />
+  </a>
+  <a href="https://github.com/abhijithvijayan/kuttUrl-browser-extension">
+    <img src="https://img.shields.io/github/license/abhijithvijayan/kuttUrl-browser-extension.svg" alt="LICENSE" />
   </a>
 </div>
 
 ## Features
+- Cross Browser Support
+- WebExtensions API
 - Clean UI
 - Instant QR Code
 - Supports Password for URLs
@@ -35,13 +40,45 @@
 </div>
 
 ## How to use
-- Download and Extract the latest zip file from [here](https://github.com/abhijithvijayan/kuttUrl-Chrome-extension/releases/latest)
-- Load extension via `chrome://extensions` as unpacked from extracted directory.
-- You'll need to generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a>. (Settings page)
-- Paste and Save this `Key` in extension's `options page`.
+
+
+- Download and Extract the latest `stable` release `zip` file 
+
+  [<img src=".github/assets/direct-download.png"
+        alt="Direct download"
+        height="70">](https://github.com/abhijithvijayan/kuttUrl-browser-extension/releases/latest)
+
+- Install in browser
+    - ### Chrome
+      - Go to the browser address bar and type `chrome://extensions`
+      - Check the `Developer Mode` button to enable it.
+      - Click on the `Load Unpacked Extension…` button.
+      - Select your extension’s extracted directory.
+
+        <img width="400" src="https://i.imgur.com/dJRL7By.png" />
+
+    - ### Firefox
+      - Load the Add-on via `about:debugging` as temporary Add-on.
+      - Choose the `manifest.json` file in the extracted directory
+
+        <img width="400" src="https://i.imgur.com/aAL5dQg.png" />
+
+    - ### Opera
+      - Load the extension via `opera:extensions`
+      - Check the `Developer Mode` and load as unpacked from extension’s extracted directory.
+
+        <img width="400" src="https://i.imgur.com/qUwfSNJ.png" />
+
+- Generate an API Key from <a href="https://kutt.it">`https://kutt.it/`</a>. (Settings page)
+
+  <img width="400" src="https://i.imgur.com/qQwqeH5.png" />
+
+- Paste and Save this `Key` in extension's `options page` when asked.
+
+  <img width="250" src="https://i.imgur.com/6qsNUbf.png" alt="image2" />
 
 ## Note:
-<a href="https://kutt.it">Kutt.it</a> API permits **50** URLs shortening per day using the API Key. Upgrade to Paid plan for more.
+<a href="https://kutt.it">Kutt.it</a> API permits **50** URLs shortening per day using the API Key.
 
 ## Contributing and Support
 View the Contributing guidelines [here](CONTRIBUTING.md).

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "kutturl",
-  "version": "1.0.0",
+  "name": "kutturl-browser-extension",
+  "version": "1.0.1",
   "main": "background.js",
   "scripts": {
     "dev": "webpack --watch --mode=development",
@@ -35,20 +35,19 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "babel-polyfill": "^6.26.0",
-    "webextension-polyfill": "^0.3.1"
+    "babel-polyfill": "^6.26.0"
   },
-  "description": "<div align=\"center\"><img width=\"100\" src=\"src/assets/logo.png\" /></div>\r <h1 align=\"center\">kuttURL-Chrome</h1>\r <p align=\"center\">Chrome extension to to shorten URLs</p>",
+  "description": "kuttUrl webextension",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/abhijithvijayan/kuttUrl-Chrome.git"
+    "url": "git+https://github.com/abhijithvijayan/kuttUrl-browser-extension.git"
   },
   "keywords": [
     "url",
     "shortener"
   ],
   "bugs": {
-    "url": "https://github.com/abhijithvijayan/kuttUrl-Chrome/issues"
+    "url": "https://github.com/abhijithvijayan/kuttUrl-browser-extension/issues"
   },
-  "homepage": "https://github.com/abhijithvijayan/kuttUrl-Chrome#readme"
+  "homepage": "https://github.com/abhijithvijayan/kuttUrl-browser-extension#readme"
 }

src/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "kuttUrl - Shorten URLs",
-    "version": "1.0.0",
+    "version": "0.4.0",
     "manifest_version": 2,
     "description": "URL Shortener",
     "icons": {
@@ -17,7 +17,7 @@
             "48": "assets/favicon-48.png",
             "128": "assets/favicon-128.png" 
         },
-        "browser_style": true
+        "browser_style": false
     },
     "author": "abhijithvijayan",
     "background": {
@@ -28,7 +28,8 @@
     "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
     "homepage_url": "https://github.com/abhijithvijayan/kuttUrl-Chrome",    	
     "options_ui": {
-        "page": "options.html"
+        "page": "options.html",
+        "open_in_tab": true
     },
     "permissions": ["tabs", "storage", "clipboardWrite", "clipboardRead", "https://kutt.it/*/*"],
     "short_name": "kuttUrl"

src/options.html

@@ -36,7 +36,7 @@ <h2 class="head__content--title">kuttUrl</h2>
               </form>              
           </div>
           <div class="footer__text--holder text-center mt-3">
-             Made with ❤️ on <a class="github__repo--link" href="https://github.com/abhijithvijayan/kuttUrl-Chrome-extension" target="_blank">GitHub</a>
+             Made with ❤️ on <a class="github__repo--link" href="https://github.com/abhijithvijayan/kuttUrl-browser-extension" target="_blank">GitHub</a>
           </div>
         </div>
       </section>

src/popup.html

@@ -16,7 +16,7 @@
                   <img class="main__logo" src="assets/logo.png">
                 </li>
                 <li class="github__content-holder">
-                  <a href="https://github.com/abhijithvijayan/kuttUrl-Chrome-extension" target="_blank" rel="noopener" title="GitHub">
+                  <a href="https://github.com/abhijithvijayan/kuttUrl-browser-extension" target="_blank" rel="noopener" title="GitHub">
                       <img class="github__logo" src="assets/github.svg"></a>
                 </li>
                 <li class="options__content-holder" id="options__content-holder" title="Options">

src/scripts/background.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import browser from "webextension-polyfill";
+import browser from "../scripts/vendor/browser-polyfill";
 
 // Shorten url
 async function getShortURL(API_key, URLtoShorten, password) {

src/scripts/options.js

@@ -1,4 +1,4 @@
-import browser from "webextension-polyfill";
+import browser from "../scripts/vendor/browser-polyfill";
 
 // update UI - API Key on options page load
 document.addEventListener('DOMContentLoaded', () => {

src/scripts/popup.js

@@ -1,4 +1,4 @@
-import browser from "webextension-polyfill";
+import browser from "../scripts/vendor/browser-polyfill";
 
 let shortUrl;
 
@@ -11,15 +11,15 @@ document.addEventListener('DOMContentLoaded', () => {
         let API_key, password;
 
         longUrl = tabs[0].url;
-        start = longUrl.substr(0, 6);
+        start = longUrl.substr(0, 4);
 
         // i) Get api key from options page
         browser.storage.local.get(['key', 'pwd']).then(result => {
 
             API_key = result.key;
             password = result.pwd;
 
-            if(start !== 'chrome' && API_key !== '' && API_key !== undefined) {
+            if(start === 'http' && API_key !== '' && API_key !== undefined) {
                 // send start message to background.js and receive response
 
                 browser.runtime.sendMessage({ msg: "start", API_key: `${API_key}`, pageUrl: `${longUrl}`, password: `${password}` }).then(response => {
@@ -50,7 +50,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 });
 
             }
-            else if (start === 'chrome') {
+            else if (start !== 'http') {
                 document.getElementById('url__content-inner').textContent = 'Not a Valid URL!!';
             }
             else if (API_key === '' || API_key === undefined) {