Add Filter Feature (#35)

* Add Search Function * Fix Popup Link Parsing * Fix Filter and Copy * Fix Display * Remove Open Count * Update Copy Button Logic * Update README.md
cssnr · Nov 22, 2023 · bc1345a · bc1345a
1 parent 70e4664
commit bc1345a
Show file tree

Hide file tree

Showing 12 changed files with 190 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,8 @@
 [![Mozilla Add-on Version](https://img.shields.io/amo/v/link-extractor?label=firefox&logo=firefox)](https://addons.mozilla.org/addon/link-extractor)
 [![GitHub Release Version](https://img.shields.io/github/v/release/cssnr/link-extractor?logo=github)](https://github.com/cssnr/link-extractor/releases/latest)
 [![Manifest Version](https://img.shields.io/github/manifest-json/v/cssnr/link-extractor?filename=manifest.json&logo=json&label=manifest)](https://github.com/cssnr/link-extractor/blob/master/manifest.json)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=cssnr_link-extractor&metric=alert_status&label=quality)](https://sonarcloud.io/summary/overall?id=cssnr_link-extractor)
 [![Build](https://github.com/cssnr/link-extractor/actions/workflows/build.yaml/badge.svg)](https://github.com/cssnr/link-extractor/actions/workflows/build.yaml)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=cssnr_link-extractor&metric=alert_status&label=quality)](https://sonarcloud.io/summary/overall?id=cssnr_link-extractor)
 # Link Extractor
 
 Modern Chrome and Firefox Addon to easily extract, parse, or open all links/domains from a site or text with optional filters.
@@ -24,25 +24,20 @@ Website: https://link-extractor.cssnr.com/
 *   [Google Chrome Web Store](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
 *   [Mozilla Firefox Add-ons](https://addons.mozilla.org/addon/link-extractor)
 
-<a href="https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp" target="_blank">
-    <img alt="Chrome" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/google.com/google-chrome.svg" width="42" height="42" /></a>
-<a href="https://addons.mozilla.org/addon/link-extractor" target="_blank">
-    <img alt="Firefox" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/firefox.com/firefox.svg" width="42" height="42" /></a>
-<a href="https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp" target="_blank">
-    <img alt="Edge" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/microsoft.com/microsoft-edge.svg" width="42" height="42" /></a>
-<a href="https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp" target="_blank">
-    <img alt="Opera" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/opera.com/opera.svg" width="42" height="42" /></a>
-<a href="https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp" target="_blank">
-    <img alt="Brave" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/brave.com/brave.svg" width="42" height="42" /></a>
-<a href="https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp" target="_blank">
-    <img alt="Vivaldi" src="https://raw.githubusercontent.com/raivo-otp/issuer-icons/master/vectors/vivaldi.com/vivaldi.svg" width="42" height="42" /></a>
-
+[![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png)](https://addons.mozilla.org/addon/link-extractor)
+[![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Chromium](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Brave](https://raw.githubusercontent.com/alrra/browser-logos/main/src/brave/brave_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Vivaldi](https://raw.githubusercontent.com/alrra/browser-logos/main/src/vivaldi/vivaldi_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+
 All **Chromium** Based Browsers can install the extension from the
 [Chrome Web Store](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp).
 
 # Features
 
-Please submit a [Feature Request](https://github.com/cssnr/link-extractor/discussions/new?category=feature-requests) for new features.   
+Please submit a [Feature Request](https://github.com/cssnr/link-extractor/discussions/new?category=feature-requests) for new features.  
 For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssnr/link-extractor/issues/new).  
 
 *   Extract All Links and Domains from Any Site
@@ -56,7 +51,7 @@ For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssn
 *   Automatic Dark/Light Mode based on Browser Setting
 *   Activate from Icon, Context Menu, or Keyboard Shortcuts
 
-[![Screenshot of Links and Popup](https://repository-images.githubusercontent.com/707614074/b9e7a09f-ed07-40c0-84e5-8efeb4fbd7f4)](https://github.com/cssnr/link-extractor)
+[![Screenshot of Links and Popup](https://repository-images.githubusercontent.com/707614074/0944a60d-058b-4269-954c-8aec6ab59f4c)](https://link-extractor.cssnr.com/screenshots/)
 
 # Configuration
 

diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "description": "Easily extract, parse, or open all links/domains from a site or text with optional filters.",
   "homepage_url": "https://link-extractor.cssnr.com/",
   "author": "Shane",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

diff --git a/src/css/links.css b/src/css/links.css
@@ -6,4 +6,5 @@ a:visited {
     margin-top: 10px;
     margin-right: 10px;
     width: 160px;
+    z-index: 10;
 }
diff --git a/src/html/links.html b/src/html/links.html
@@ -11,65 +11,72 @@
 <body>
 
 <div id="top-container" class="position-fixed top-0 end-0 user-select-none visually-hidden links domains">
-    <div class="row g-1">
+    <div class="row g-1 visually-hidden links">
         <div class="col">
             <a href="#links"><span class="badge text-bg-success visually-hidden w-100 links">Links</span></a>
         </div>
         <div class="col">
-            <a role="button" class="clip" data-clipboard-target="#links-clip">
-                <span class="badge text-bg-success visually-hidden w-100 links">Copy</span></a>
+            <a role="button" class="clip" data-clipboard-target="#links-body" data-toast="Copied Links">
+                <span class="badge text-bg-success w-100">Copy</span></a>
         </div>
     </div>
-    <div class="row g-1">
+    <div class="row g-1 visually-hidden domains">
         <div class="col">
-            <a href="#domains"><span class="badge text-bg-primary visually-hidden w-100 domains">Domains</span></a>
+            <a href="#domains"><span class="badge text-bg-primary w-100">Domains</span></a>
         </div>
         <div class="col">
-            <a role="button" class="clip" data-clipboard-target="#domains-clip">
-                <span class="badge text-bg-primary visually-hidden w-100 domains">Copy</span></a>
+            <a role="button" class="clip" data-clipboard-target="#domains-body" data-toast="Copied Domains">
+                <span class="badge text-bg-primary w-100">Copy</span></a>
         </div>
     </div>
 </div>
 
 <div class="container-fluid p-3">
     <h2 id="loading-message" class="user-select-none">Loading...</h2>
     <div class="visually-hidden links">
-        <input id="links-clip" class="visually-hidden" type="hidden" value="">
         <div class="user-select-none">
             <h2 id="links">Links <span id="links-count" class="badge bg-success-subtle"></span></h2>
-            <a id="copy-links" class="btn btn-sm btn-success me-1 clip" role="button" data-clipboard-target="#links-clip">
+            <a id="copy-links" class="btn btn-sm btn-success clip me-1 mb-2" role="button" data-clipboard-target="#links-body" data-toast="Copied Links">
                 Copy Links</a>
-            <a id="down-links" class="btn btn-sm btn-outline-info download-file" role="button" data-target="#links-clip" data-filename="links.txt">
+            <a id="down-links" class="btn btn-sm btn-outline-info download-file me-1 mb-2" role="button" data-target="#links-body" data-filename="links.txt">
                 Download</a>
-            <button type="button" id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-3" data-target="#links-clip">
-                Open <span id="open-links-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
+            <button type="button" id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-1 mb-2" data-target="#links-body">
+                Open
+<!--                <span id="open-links-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>-->
             </button>
-            Press <kbd>C</kbd> or <kbd>L</kbd> to Copy Links.
+            <span class="d-inline-block me-1 mb-2">Press <kbd>C</kbd> or <kbd>L</kbd> to Copy Links.</span>
         </div>
+
+        <div class="input-group mb-2">
+            <input id="filter-links" type="text" class="form-control filter-input" list="savedFilters" placeholder="Press F and Type to Filter..." aria-label="Filter" aria-describedby="reset-button">
+            <button class="btn btn-outline-secondary" type="button" id="reset-button">Reset</button>
+        </div>
+        <datalist id="savedFilters"></datalist>
+
         <table id="links-table" class="table table-sm table-striped table-hover">
-            <caption class="visually-hidden user-select-none">Links</caption>
-            <thead><tr><th></th></tr></thead>
-            <tbody></tbody>
+            <caption class="visually-hidden user-select-none" style="display: none;">Links</caption>
+            <thead class="visually-hidden"><tr><th></th></tr></thead>
+            <tbody id="links-body"></tbody>
         </table>
     </div>
 
     <div class="visually-hidden domains">
-        <input id="domains-clip" class="visually-hidden" type="hidden" value="">
         <div class="user-select-none">
             <h2 id="domains">Domains <span id="domains-count" class="badge bg-primary-subtle"></span></h2>
-            <a id="copy-domains" class="btn btn-sm btn-primary me-1 clip" role="button" data-clipboard-target="#domains-clip">
+            <a id="copy-domains" class="btn btn-sm btn-primary clip me-1 mb-2" role="button" data-clipboard-target="#domains-body" data-toast="Copied Domains">
                 Copy Domains</a>
-            <a id="down-domains" class="btn btn-sm btn-outline-info download-file" role="button" data-target="#domains-clip"  data-filename="domains.txt">
+            <a id="down-domains" class="btn btn-sm btn-outline-info download-file me-1 mb-2" role="button" data-target="#domains-body" data-filename="domains.txt">
                 Download</a>
-            <button type="button" id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-3" data-target="#domains-clip">
-                Open <span id="open-domains-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
+            <button type="button" id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-1 mb-2" data-target="#domains-body">
+                Open
+<!--                <span id="open-domains-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>-->
             </button>
-            Press <kbd>D</kbd> or <kbd>M</kbd> to Copy Domains.
+            <span class="d-inline-block me-1 mb-2">Press <kbd>D</kbd> or <kbd>M</kbd> to Copy Domains.</span>
         </div>
         <table id="domains-table" class="table table-sm table-striped table-hover">
-            <caption class="visually-hidden user-select-none">Domains</caption>
-            <thead><tr><th></th></tr></thead>
-            <tbody></tbody>
+            <caption class="visually-hidden user-select-none" style="display: none;">Domains</caption>
+            <thead class="visually-hidden"><tr><th></th></tr></thead>
+            <tbody id="domains-body"></tbody>
         </table>
     </div>
 </div>
@@ -90,6 +97,7 @@ <h5 class="modal-title">Keyboard Shortcuts</h5>
                     <div class="col">
                         <p><kbd>C</kbd> or <kbd>L</kbd> Copy All Links</p>
                         <p><kbd>D</kbd> or <kbd>M</kbd> Copy All Domains</p>
+                        <p><kbd>F</kbd> or <kbd>I</kbd> Focus Filter Input</p>
                         <p><kbd>T</kbd> or <kbd>O</kbd> Open Options</p>
                         <p><kbd>Z</kbd> or <kbd>K</kbd> Keyboard Shortcuts</p>
                     </div>

diff --git a/src/html/options.html b/src/html/options.html
@@ -59,6 +59,10 @@ <h1 class="align-middle">Link Extractor</h1>
                                 </svg>
                             </label>
                         </div>
+                        <div class="form-check form-switch mb-3">
+                            <input class="form-check-input" type="checkbox" role="switch" id="showUpdate">
+                            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
+                        </div>
                         <hr>
                         <span id="add-input" class="badge text-bg-primary" role="button">Add Filter</span>
                         <div id="filters-inputs" class="my-2"></div>

diff --git a/src/js/exports.js b/src/js/exports.js
@@ -1,4 +1,4 @@
-// JS Exports
+// JS exports
 
 /**
  * Create Context Menus
@@ -48,7 +48,7 @@ export function createContextMenus(patterns) {
 }
 
 /**
- * Inject inject.js to Tab and Open links.html with params
+ * Inject extract.js to Tab and Open links.html with params
  * @function processLinks
  * @param {String} filter
  * @param {Boolean} domains
@@ -70,7 +70,7 @@ export async function injectTab(filter, domains, selection) {
     }
     await chrome.scripting.executeScript({
         target: { tabId: tab.id },
-        files: ['/js/inject.js'],
+        files: ['/js/extract.js'],
     })
     console.log(`url: ${url.toString()}`)
     await chrome.tabs.create({ active: true, url: url.toString() })

diff --git a/src/js/inject.js → src/js/extract.js b/src/js/inject.js → src/js/extract.js
@@ -1,4 +1,4 @@
-// JS injected into active tab on popup
+// JS injected into active tab to extract links
 
 chrome.runtime.onMessage.addListener(onMessage)