diff --git a/background.js b/background.js index d505194..d6b780f 100644 --- a/background.js +++ b/background.js @@ -1,4 +1,4 @@ -let redirect_link = {} +let redirect_link = {}; chrome.storage.sync.get(['redirect_link'], (result) => { if (result.redirect_link !== undefined) { redirect_link = result.redirect_link; @@ -6,10 +6,10 @@ chrome.storage.sync.get(['redirect_link'], (result) => { }); chrome.omnibox.onInputEntered.addListener((text) => { - if (redirect_link[text] !== undefined){ - chrome.tabs.update({url: redirect_link[text]}); + if (redirect_link[text] !== undefined) { + chrome.tabs.update({ url: redirect_link[text] }); } else { - chrome.tabs.update({url: "./error.html"}); + chrome.tabs.update({ url: "./error.html" }); } }); @@ -19,7 +19,22 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { const key = data[0]; const url = data[1]; redirect_link[key] = url; - chrome.storage.sync.set({redirect_link}); + chrome.storage.sync.set({ redirect_link }); sendResponse({ message: "Form submitted successfully!" }); + + } else if (message.type === 'edit_submission') { + const oldKey = message.oldKey; + const newKey = message.newKey; + const newUrl = message.newUrl; + delete redirect_link[oldKey]; + redirect_link[newKey] = newUrl; + chrome.storage.sync.set({ redirect_link }); + sendResponse({ message: "Edit submitted successfully!" }); + + } else if (message.type === 'delete_link') { + const key = message.key; + delete redirect_link[key]; + chrome.storage.sync.set({ redirect_link }); + sendResponse({ message: "Link deleted successfully!" }); } -}); \ No newline at end of file +}); diff --git a/error.html b/error.html index 8fc8d99..976a5c5 100644 --- a/error.html +++ b/error.html @@ -4,12 +4,11 @@ - All Quick Link + Quick Link - 404 - -

Sorry, no URL found for the entered keyword.

+

+ Sorry, no URL found for the entered keyword. +

\ No newline at end of file diff --git a/index.html b/index.html index eccbdc3..1a5d2d2 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,22 @@ + Quick Link - - +

Q-Links

-

Add a new link to local storage

- +

Add a new link to storage

+ +
-
-
+
+

Q-link added successfully.

@@ -23,12 +24,42 @@

Q-Links

Something went wrong

-
-
- - View Storage
+ + + +
+ View Storage
-
- Click here for more details on when stored data is deleted. + + + + + + + +
+ + Click here for more details on + when stored data is deleted. + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json index 8958dab..b3087dd 100644 --- a/manifest.json +++ b/manifest.json @@ -1,14 +1,16 @@ { "name": "Quick Link", - "version": "2.0", + "version": "3.0", "author": "Mufasa A. (mufasa159)", "manifest_version": 3, "description": "Quickly access links using shortened text on your browser's search bar.", - "omnibox": { "keyword" : "q" }, + "omnibox": { + "keyword": "q" + }, "background": { "service_worker": "background.js" }, - "action":{ + "action": { "default_popup": "index.html", "default_title": "Quick Link" }, @@ -18,5 +20,7 @@ "48": "assets/logo_48px.png", "128": "assets/logo_128px.png" }, - "permissions": [ "storage", "tabs" ] + "permissions": [ + "storage" + ] } \ No newline at end of file diff --git a/popup.js b/popup.js index 10d79fa..1c0baaf 100644 --- a/popup.js +++ b/popup.js @@ -1,51 +1,107 @@ -const form = document.getElementById("user-input"); -const alert_success = document.getElementById("alert-success"); -const alert_error = document.getElementById("alert-error"); -const storage = document.getElementById("storage-container"); -storage.style.display = 'none'; - -form.addEventListener("submit", (event) => { - event.preventDefault(); - const data = []; - const key = form.elements["quick-link-key"].value; - const url = form.elements["quick-link-url"].value; - data.push(key); - data.push(url); - chrome.runtime.sendMessage({ type: 'form_submission', data } , (response) => { - console.log(response.message); - }); - alert_success.style.display = 'block'; - document.getElementById("user-input").reset(); +document.addEventListener('DOMContentLoaded', () => { + const form = document.getElementById("user-input"); + const alert_success = document.getElementById("alert-success"); + const storage = document.getElementById("storage-container"); + const editForm = document.getElementById("edit-form"); + const editButton = document.getElementById("edit-button"); + const cancelEditButton = document.getElementById("cancel-edit-button"); + storage.style.display = 'none'; - storage.innerHTML = ""; -}); + editForm.style.display = 'none'; -const getLinks = document.getElementById('get-links'); -getLinks.addEventListener('click', getQuickLinks); + form.addEventListener("submit", (event) => { + event.preventDefault(); + const data = []; + const key = form.elements["quick-link-key"].value; + const url = form.elements["quick-link-url"].value; + data.push(key); + data.push(url); + chrome.runtime.sendMessage({ type: 'form_submission', data }, (response) => { + console.log(response.message); + }); + alert_success.style.display = 'block'; + document.getElementById("user-input").reset(); + storage.style.display = 'none'; + storage.innerHTML = ""; + getLinks.innerHTML = "View Links"; + }); + const getLinks = document.getElementById('get-links'); + getLinks.addEventListener('click', getQuickLinks); -function getQuickLinks() { - if (getLinks.innerHTML == "Hide Links") { - getLinks.innerHTML = "View Links"; - storage.style.display != 'none'; - storage.innerHTML = ""; - } else { - getLinks.innerHTML = "Hide Links"; - chrome.storage.sync.get(['redirect_link'], (result) => { - if (storage.style.display != 'none') { - storage.innerHTML = ""; - } - for (let key in result.redirect_link) { - const link = document.createElement('p'); - const bold = document.createElement('span'); - const breakLine = document.createElement('br'); - bold.textContent = key; - link.textContent = result.redirect_link[key]; - link.prepend(breakLine); - link.prepend(bold); - storage.appendChild(link); - } - storage.style.display = 'block'; + cancelEditButton.addEventListener('click', () => { + editForm.style.display = 'none'; + storage.style.display = 'block'; + }); + + + function getQuickLinks() { + if (getLinks.innerHTML == "Hide Links") { + getLinks.innerHTML = "View Links"; + storage.style.display != 'none'; + storage.innerHTML = ""; + + } else { + getLinks.innerHTML = "Hide Links"; + chrome.storage.sync.get(['redirect_link'], (result) => { + if (storage.style.display != 'none') { + storage.innerHTML = ""; + } + for (let key in result.redirect_link) { + const template = document.getElementById('link-template').content.cloneNode(true); + const linkItem = template.querySelector('.link-item'); + template.querySelector('.link-key').textContent = key; + template.querySelector('.link-url').textContent = result.redirect_link[key]; + + const deleteButton = template.querySelector('.delete-button'); + deleteButton.addEventListener('click', () => deleteLink(key)); + deleteButton.addEventListener('mouseover', () => linkItem.classList.add('strike-through')); + deleteButton.addEventListener('mouseout', () => linkItem.classList.remove('strike-through')); + + template.querySelector('.edit-button').addEventListener('click', () => showEditForm(key, result.redirect_link[key])); + storage.appendChild(template); + } + storage.style.display = 'block'; + }); + } + } + + function showEditForm(key, url) { + storage.style.display = 'none'; + editForm.style.display = 'block'; + editForm.elements["edit-link-key"].value = key; + editForm.elements["edit-link-url"].value = url; + editButton.onclick = (event) => { + event.preventDefault(); + editLink(key); + }; + } + + function editLink(oldKey) { + const newKey = editForm.elements["edit-link-key"].value; + const newUrl = editForm.elements["edit-link-url"].value; + if (newKey && newUrl) { + chrome.runtime.sendMessage({ + type: 'edit_submission', + oldKey: oldKey, + newKey: newKey, + newUrl: newUrl + }, (response) => { + console.log(response.message); + editForm.style.display = 'none'; + storage.style.display = 'block'; + getQuickLinks(); + }); + } + } + + function deleteLink(key) { + chrome.runtime.sendMessage({ + type: 'delete_link', + key: key + }, (response) => { + console.log(response.message); + getQuickLinks(); }); } -} \ No newline at end of file +}); diff --git a/readme.md b/readme.md index c03d4a2..fb34e85 100644 --- a/readme.md +++ b/readme.md @@ -2,12 +2,6 @@ A lightweight and simple link management extension for Chrome based browsers. - - -[Chrome Web Store](https://chrome.google.com/webstore/detail/quick-link/napbhpnpfhkeaemdbclbncchalbialkc) - -[Chrome Web Store](https://chrome.google.com/webstore/detail/quick-link/napbhpnpfhkeaemdbclbncchalbialkc) - ### Usage 1. Install the extension diff --git a/style.css b/style.css index e26f8d4..d6f3fd3 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,8 @@ body { min-width: 300px; } -h2, p { +h2, +p { margin: 0; padding: 0; } @@ -28,14 +29,15 @@ input { padding: 6px 8px; } -input::after, input:focus { +input::after, +input:focus { outline: none; border-left: 3px solid #da4162; min-width: 298px; } -input::placeholder{ +input::placeholder { color: #a4a4a4; } @@ -61,7 +63,8 @@ a { cursor: pointer; } -#alert-success, #alert-error { +#alert-success, +#alert-error { margin: 5px 0px 0px 0px; font-size: 10px; display: none; @@ -87,12 +90,46 @@ small a { text-decoration: underline; } -#storage-container span { - font-weight: 700; - color: #da4162; +.top { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; +} + +.edit-button, +.delete-button { + margin: 0px 0px 7px 5px; + background-color: transparent; + color: black; + border: 1px solid #cdcdcd; + border-radius: 3px; + cursor: pointer; + padding: 2px 5px; + font-size: 11px; + font-weight: 300; } -#storage-container p { +.link-item { margin-bottom: 5px; font-size: 12px; +} + +.link-key { + color: #da4162; + font-weight: 700; +} + +.link-url { + color: black; + font-weight: 400; +} + +.strike-through .link-key, +.strike-through .link-url { + text-decoration: line-through; +} + +#edit-form { + margin-top: 15px; } \ No newline at end of file