history items injection (10 entries)

Author: abhijithvijayan

CONTRIBUTING.md

@@ -2,6 +2,7 @@
 
 ## Assets
 - [kutt.it API](https://github.com/thedevs-network/kutt#api) is used to retreive shortened URLs.
+- [node-kutt](https://github.com/ardalanamini/node-kutt) is used for API calls
 
 ## Development
 - `npm install` to install dependencies.
@@ -53,6 +54,9 @@ height="50">](https://github.com/abhijithvijayan/kutt-extension/releases)
 - [x] Fix UI issues in Firefox
 - [x] Using Node-Kutt package(feature request)
 - [ ] History Feature
+- [ ] Context Menu
+- [ ] Auto Copy Clipboard
+- [ ] Toggleable Options
 
 
 ## Note:

src/history.html

@@ -26,7 +26,8 @@ <h2 class="table__content--title">Recent shortened links.</h2>
                         </tr>
                     </thead>
                     <tbody class="table__content--body">
-                        <tr class="table__body--holder">
+                        <!-- TEMPLATE TO USE -->
+                        <!-- <tr class="table__body--holder">
                             <td class="table__body--original">
                                 <a href="#" class="table__body--originalURL" target="_blank" rel="noopener">https://google.com</a>
                             </td>
@@ -48,7 +49,7 @@ <h2 class="table__content--title">Recent shortened links.</h2>
                                     </button>
                                 </div>
                             </td>
-                        </tr>
+                        </tr> -->
                     </tbody>
                 </table>
           </div>

src/manifest.chrome.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Kutt",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "description": "URL Shortener",
     "icons": {
         "16": "assets/favicon-16.png",

src/manifest.firefox.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Kutt",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "browser_specific_settings": {
         "gecko": {
             "id": "[email protected]"

src/manifest.opera.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Kutt",
-    "version": "0.8.0",
+    "version": "0.9.0",
     "description": "URL Shortener",
     "developer": {
         "name": "abhijithvijayan"

src/scripts/background.js

@@ -1,7 +1,7 @@
 import Kutt from 'kutt';
 import browser from 'webextension-polyfill';
 
-let count = 0, sample = [];
+let count = 0, URLs_array = [];
 
 // Shorten url
 async function getShortURL(API_key, URLtoShorten, password) {
@@ -42,23 +42,19 @@ browser.runtime.onMessage.addListener(async (request, sender, response) => {
     }
     // store urls to history
     if (request.msg === 'store') {
-        // get the object
-        console.log(request.URLs);
-        console.log(count);
-        // sample.push(request.URLs);
-        if (count >= 3) {
+        // console.log(request.URLs);
+        // console.log(count);
+        if (count >= 10) {
             // delete first element
-            sample.shift();
+            URLs_array.shift();
             --count;
             browser.storage.local.set({ count: count });
         }
-        if (count < 3) {
-            sample.push(request.URLs);
-            browser.storage.local.set({ URL_array: sample, count: ++count });
-            console.log(sample);
+        if (count < 10) {
+            URLs_array.push(request.URLs);
+            browser.storage.local.set({ URL_array: URLs_array, count: ++count });
+            // console.log(URLs_array);
         } 
-        // store upto 10
-        // console.log(count);
     }
 
 

src/scripts/history.js

@@ -1,11 +1,22 @@
 import browser from 'webextension-polyfill';
 
-// get longURL, shortURL
-browser.storage.local.get(['URL_array', 'count']).then(result => {
-    console.log(result.URL_array);
-});
 
-// update DOM
+// on page load
+document.addEventListener('DOMContentLoaded', () => {
+    let updatedHTML, html = '<tr class="table__body--holder"><td class="table__body--original"><a href="%longLink%" class="table__body--originalURL" target="_blank" rel="noopener">%longLink%</a></td><td class="table__body--shortened"><div class="table__body--shortenBody"><button class="table__body--copyBtn" title="Copy"><img id="" class="selectDisable icon__img" src="assets/copy.svg" alt="copy" /></button><a href="%shortLink%" class="table__body--shortenURL" target="_blank" rel="noopener">%shortLink%</a></div></td><td class="table__body--functionBtns"><div class="table__body--btnHolder"><button class="table__body--qrcode" title="QR Code"><img id="" class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" /></button><button class="table__body--delete" title="Delete"><img id="" class="selectDisable icon__img" src="assets/delete.svg" alt="Delete" /></button></div></td></tr>';
+    // get longURL, shortURL
+    browser.storage.local.get(['URL_array', 'count']).then(result => {
+        // console.log(result.URL_array);
+        // update DOM
+        for (let el of result.URL_array) {             
+            // Regular Expression Based Implementation
+            updatedHTML = html.replace(/%longLink%/g, el.longUrl);
+            updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
+            // inject to DOM
+            document.querySelector('.table__content--body').insertAdjacentHTML('afterbegin', updatedHTML);
+        }
+    });
+});
 
 // copy button