mirror of
https://github.com/thedevs-network/kutt-extension.git
synced 2026-02-03 13:53:23 +00:00
fixed bugs
This commit is contained in:
abhijithvijayan
@@ -28,6 +28,7 @@
|
||||
- Minimal UI
|
||||
- Instant QR Code
|
||||
- Supports Password for URLs
|
||||
- History Feature
|
||||
- Free and Open Source
|
||||
- WebExtensions API
|
||||
|
||||
@@ -51,17 +52,18 @@
|
||||
<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/fJasvmv.png" alt="image2" />
|
||||
|
||||
<hr />
|
||||
|
||||
## Screenshots
|
||||
|
||||
<div align="center">
|
||||
<div>
|
||||
<img width="350" src="https://i.imgur.com/n44Eytz.gif" alt="image1" />
|
||||
<img width="350" src="https://i.imgur.com/FJJ2FPU.gif" alt="image2" />
|
||||
</div>
|
||||
<img width="500" src="https://i.imgur.com/Tlkxbav.png" alt="image3" />
|
||||
<img width="500" src="https://i.imgur.com/tgLecm2.png" alt="image4" />
|
||||
<img width="500" src="https://i.imgur.com/kjHY6aa.png" alt="image5" />
|
||||
|
||||
## Note:
|
||||
- <a href="https://kutt.it">Kutt.it</a> API permits **50** URLs shortening per day using the API Key.
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@@ -4717,12 +4717,6 @@
|
||||
"resolve-dir": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"global-modules-path": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/global-modules-path/-/global-modules-path-2.3.1.tgz",
|
||||
"integrity": "sha512-y+shkf4InI7mPRHSo2b/k6ix6+NLDtyccYv86whhxrSGX9wjPX1VMITmrDbE1eh7zkzhiWtW2sHklJYoQ62Cxg==",
|
||||
"dev": true
|
||||
},
|
||||
"global-prefix": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
|
||||
@@ -5799,12 +5793,6 @@
|
||||
"type-check": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"lightercollective": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lightercollective/-/lightercollective-0.1.0.tgz",
|
||||
"integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ==",
|
||||
"dev": true
|
||||
},
|
||||
"load-json-file": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
|
||||
@@ -10611,9 +10599,9 @@
|
||||
"integrity": "sha512-ISB42vlgMyM7xE1u6pREeCqmmXjLsYu/nqAR8Dl/gIAnylb+KpRpvKbVkUYNFePhhXn0Obkkc3jasOII9ztUtg=="
|
||||
},
|
||||
"webpack": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.29.0.tgz",
|
||||
"integrity": "sha512-pxdGG0keDBtamE1mNvT5zyBdx+7wkh6mh7uzMOo/uRQ/fhsdj5FXkh/j5mapzs060forql1oXqXN9HJGju+y7w==",
|
||||
"version": "4.29.3",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-4.29.3.tgz",
|
||||
"integrity": "sha512-xPJvFeB+8tUflXFq+OgdpiSnsCD5EANyv56co5q8q8+YtEasn5Sj3kzY44mta+csCIEB0vneSxnuaHkOL2h94A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@webassemblyjs/ast": "1.7.11",
|
||||
@@ -10635,29 +10623,17 @@
|
||||
"mkdirp": "~0.5.0",
|
||||
"neo-async": "^2.5.0",
|
||||
"node-libs-browser": "^2.0.0",
|
||||
"schema-utils": "^0.4.4",
|
||||
"schema-utils": "^1.0.0",
|
||||
"tapable": "^1.1.0",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"watchpack": "^1.5.0",
|
||||
"webpack-sources": "^1.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"schema-utils": {
|
||||
"version": "0.4.7",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
|
||||
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "^6.1.0",
|
||||
"ajv-keywords": "^3.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-cli": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.2.1.tgz",
|
||||
"integrity": "sha512-jeJveHwz/vwpJ3B8bxEL5a/rVKIpRNJDsKggfKnxuYeohNDW4Y/wB9N/XHJA093qZyS0r6mYL+/crLsIol4WKA==",
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.2.3.tgz",
|
||||
"integrity": "sha512-Ik3SjV6uJtWIAN5jp5ZuBMWEAaP5E4V78XJ2nI+paFPh8v4HPSwo/myN0r29Xc/6ZKnd2IdrAlpSgNOu2CDQ6Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
@@ -10665,10 +10641,8 @@
|
||||
"enhanced-resolve": "^4.1.0",
|
||||
"findup-sync": "^2.0.0",
|
||||
"global-modules": "^1.0.0",
|
||||
"global-modules-path": "^2.3.0",
|
||||
"import-local": "^2.0.0",
|
||||
"interpret": "^1.1.0",
|
||||
"lightercollective": "^0.1.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"supports-color": "^5.5.0",
|
||||
"v8-compile-cache": "^2.0.2",
|
||||
|
||||
@@ -36,8 +36,8 @@
|
||||
"sass-loader": "^7.1.0",
|
||||
"terser-webpack-plugin": "^1.2.2",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.29.0",
|
||||
"webpack-cli": "^3.2.1",
|
||||
"webpack": "^4.29.3",
|
||||
"webpack-cli": "^3.2.3",
|
||||
"webpack-dev-server": "^3.1.14",
|
||||
"zip-webpack-plugin": "^3.0.0"
|
||||
},
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<section id="history">
|
||||
<div class="container history__content--holder">
|
||||
<div class="table__content--holder">
|
||||
<h2 class="table__content--title">Recent shortened links.</h2>
|
||||
<h2 class="table__content--title">Recent shortened links. (last 10 results)</h2>
|
||||
<table class="table__content--wrapper" id="URL_table">
|
||||
<thead class="table__content--head">
|
||||
<tr class="table__head--holder">
|
||||
@@ -23,14 +23,17 @@
|
||||
<th class="table__head--shortURL">
|
||||
Short URL
|
||||
</th>
|
||||
<th class="table__head--clearAll">
|
||||
<!-- <th class="table__head--clearAll">
|
||||
<ul class="table__list--clearAll">
|
||||
<li class="table__listItem--clear">
|
||||
<button class="table__clearAll--btn" id="table__clearAll--btn" title="Delete All">
|
||||
Clear All <img class="selectDisable icon__img" src="assets/delete.svg" alt="Delete All" />
|
||||
<button class="table__clearAll--btn" id="table__clearAll--btn">
|
||||
Clear All <img class="selectDisable icon__img" src="assets/delete.svg" alt="Clear All" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</th> -->
|
||||
<th class="table__head--actions">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import Kutt from 'kutt';
|
||||
import browser from 'webextension-polyfill';
|
||||
|
||||
let URLs_array = [];
|
||||
let targetURLs = [];
|
||||
|
||||
// Shorten url
|
||||
async function getShortURL(API_key, URLtoShorten, password) {
|
||||
@@ -41,15 +41,20 @@ browser.runtime.onMessage.addListener(async (request, sender, response) => {
|
||||
});
|
||||
}
|
||||
// store urls to history
|
||||
if (request.msg === 'store') {
|
||||
if (request.count >= 10) {
|
||||
else if (request.msg === 'store') {
|
||||
let counter = request.count;
|
||||
if (counter >= 3) {
|
||||
// delete first element
|
||||
URLs_array.shift();
|
||||
browser.storage.local.set({ count: --request.count });
|
||||
targetURLs.shift();
|
||||
--counter;
|
||||
browser.storage.local.set({ count: counter });
|
||||
}
|
||||
if (request.count < 10) {
|
||||
URLs_array.push(request.URLs);
|
||||
browser.storage.local.set({ URL_array: URLs_array, count: ++request.count });
|
||||
if (counter < 3) {
|
||||
targetURLs.push(request.mix_URLs);
|
||||
++counter;
|
||||
browser.storage.local.set({ URL_array: targetURLs, count: counter });
|
||||
// console.log(targetURLs);
|
||||
}
|
||||
// console.log('count in bg: ' + counter);
|
||||
}
|
||||
});
|
||||
@@ -7,20 +7,27 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let updatedHTML, html;
|
||||
html = '<tr class="table__body--holder" id="table__body-%num%"><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"><a href="%shortLink%" id="shortUrl-%num%" class="table__body--shortenURL" target="_blank" rel="noopener">%shortLink%</a></div></td><td class="table__body--functionBtns"><div class="table__body--btnHolder" id="btns-%num%"><button class="table__body--copy" id="copy-%num%" title="Copy"><img class="selectDisable icon__img" src="assets/copy.svg" alt="copy" /></button><button class="table__body--qrcode" id="qrcode-%num%" title="QR Code"><img class="selectDisable icon__img" src="assets/qrcode.svg" alt="QR Code" /></button></div></td></tr>';
|
||||
// get longURL, shortURL
|
||||
browser.storage.local.get(['URL_array', 'count']).then(result => {
|
||||
// update DOM
|
||||
if (result.count > 0) {
|
||||
let pass = 0;
|
||||
for (let el of result.URL_array) {
|
||||
// Regular Expression Based Implementation
|
||||
updatedHTML = html.replace(/%longLink%/g, el.longUrl);
|
||||
updatedHTML = updatedHTML.replace(/%num%/g, ++pass);
|
||||
updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
|
||||
// inject to DOM
|
||||
document.getElementById('delegation__element').insertAdjacentHTML('afterbegin', updatedHTML);
|
||||
browser.storage.local.get(['URL_array', 'count'])
|
||||
.then(result => {
|
||||
// console.log(`count in history ${result.count}`);
|
||||
// update DOM
|
||||
if (result.count > 0) {
|
||||
let pass = 0;
|
||||
for (let el of result.URL_array) {
|
||||
// Regular Expression Based Implementation
|
||||
updatedHTML = html.replace(/%longLink%/g, el.longUrl);
|
||||
updatedHTML = updatedHTML.replace(/%num%/g, ++pass);
|
||||
updatedHTML = updatedHTML.replace(/%shortLink%/g, el.shortUrl);
|
||||
// inject to DOM
|
||||
document.getElementById('delegation__element').insertAdjacentHTML('afterbegin', updatedHTML);
|
||||
}
|
||||
} else {
|
||||
console.log('Empty History');
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('localstorage_warning : Failed to Fetch.');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -60,23 +67,6 @@ function buttonAction(type, id) {
|
||||
}
|
||||
|
||||
|
||||
// Clear all history
|
||||
document.getElementById('table__clearAll--btn').addEventListener('click', () => {
|
||||
browser.storage.local.get(['count']).then(result => {
|
||||
let emptyArray = [];
|
||||
if (result.count > 0) {
|
||||
// empty array in storage and set count to 0
|
||||
let count = 0;
|
||||
browser.storage.local.set({ URL_array: emptyArray, count: count }).then(() => {
|
||||
// remove children
|
||||
let el = document.getElementById('delegation__element');
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// get the delegation id
|
||||
function getButtonDetails(e) {
|
||||
let eventId, splitId, type, id;
|
||||
@@ -91,4 +81,30 @@ function getButtonDetails(e) {
|
||||
|
||||
|
||||
// Button Action (qrcode / copy)
|
||||
document.getElementById('delegation__element').addEventListener('click', getButtonDetails);
|
||||
document.getElementById('delegation__element').addEventListener('click', getButtonDetails);
|
||||
|
||||
|
||||
// Clear all history
|
||||
// document.getElementById('table__clearAll--btn').addEventListener('click', () => {
|
||||
// browser.storage.local.get(['count'])
|
||||
// .then(result => {
|
||||
// console.log('count = ' + result.count);
|
||||
// // empty the array
|
||||
// let emptyArray = [];
|
||||
// emptyArray.splice(0, emptyArray.length);
|
||||
// // let emptyArray = result.URL_array.length = 0;
|
||||
// // console(emptyArray);
|
||||
// if (result.count > 0) {
|
||||
// // empty array in storage and set count to 0
|
||||
// browser.storage.local.remove(['URL_array', 'count']).then(() => {
|
||||
// browser.storage.local.set({ URL_array: emptyArray, count: 0 });
|
||||
// // remove children
|
||||
// let el = document.getElementById('delegation__element');
|
||||
// el.parentNode.removeChild(el);
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.log('localstorage_warning: Failed to Fetch.');
|
||||
// });
|
||||
// });
|
||||
|
||||
@@ -20,10 +20,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let saveData = () => {
|
||||
let API_KEY = document.getElementById('api__key--value').value;
|
||||
let password = document.getElementById('password--value').value;
|
||||
let emptyArray = [];
|
||||
|
||||
// store value locally
|
||||
browser.storage.local.set({ key: API_KEY, pwd: password, URL_array: emptyArray, count: 0 }).then(() => {
|
||||
browser.storage.local.set({ key: API_KEY, pwd: password, count: 0, URL_array: [] }).then(() => {
|
||||
// Saved Alert
|
||||
let element = document.querySelector('.saved__alert');
|
||||
element.classList.toggle('v-none');
|
||||
|
||||
@@ -8,19 +8,21 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// 1. Initialize
|
||||
browser.tabs.query({ 'active': true, 'lastFocusedWindow': true }).then(tabs => {
|
||||
|
||||
let longUrl, start, qrcode__src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=';
|
||||
let API_key, password, URLs;
|
||||
let longUrl, start, qrcode__backup = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data='; // in case package fails
|
||||
let API_key, password;
|
||||
|
||||
// extract page url
|
||||
longUrl = tabs[0].url;
|
||||
// extract first 4 chars
|
||||
start = longUrl.substr(0, 4);
|
||||
|
||||
// i) Get api key from options page
|
||||
// i) Get api key from storage
|
||||
browser.storage.local.get(['key', 'pwd']).then(result => {
|
||||
|
||||
API_key = result.key;
|
||||
password = result.pwd;
|
||||
|
||||
// update DOM
|
||||
// update DOM function
|
||||
let updateContent = (value) => {
|
||||
document.getElementById('url__content-inner').textContent = value;
|
||||
};
|
||||
@@ -57,18 +59,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('qr_code').src = url;
|
||||
})
|
||||
.catch(err => {
|
||||
// fetch qrcode from http://goqr.me
|
||||
document.getElementById('qr_code').src = `${qrcode__src}${shortUrl}`;
|
||||
// fetch qrcode from http://goqr.me (in case package fails)
|
||||
document.getElementById('qr_code').src = `${qrcode__backup}${shortUrl}`;
|
||||
});
|
||||
// 4. Add to history
|
||||
URLs = {
|
||||
longUrl: `${longUrl}`,
|
||||
shortUrl: `${shortUrl}`
|
||||
let long_short_URLs = {
|
||||
longUrl: longUrl,
|
||||
shortUrl: shortUrl
|
||||
};
|
||||
// pass the object
|
||||
browser.storage.local.get(['count']).then(result => {
|
||||
browser.runtime.sendMessage({ msg: 'store', URLs: URLs, count: result.count });
|
||||
});
|
||||
// pass the object of URLs
|
||||
browser.storage.local.get(['count'])
|
||||
.then(result => {
|
||||
browser.runtime.sendMessage({ msg: 'store', mix_URLs: long_short_URLs, count: result.count });
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('localstorage_warning : Failed to Fetch.' + err);
|
||||
});
|
||||
}
|
||||
else {
|
||||
updateContent('Invalid Response!');
|
||||
|
||||
@@ -71,6 +71,14 @@ button > * {
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.table__head--actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-right: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.table__head--clearAll {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -153,8 +161,9 @@ button > * {
|
||||
}
|
||||
.table__body--shortened {
|
||||
white-space: nowrap;
|
||||
flex: 1 1 0px;
|
||||
// flex: 1 1 23px;
|
||||
overflow: hidden;
|
||||
flex: 1 1 23px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
Reference in New Issue
Block a user