Add Quick Filter and Update URL Handling (#1)

* Add Quick Filter and Update URL Handling * Update README.md and links * Fix links
cssnr · Oct 21, 2023 · 7f0a486 · 7f0a486
1 parent e07e114
commit 7f0a486
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -2,23 +2,35 @@
 [![GitHub Release](https://img.shields.io/github/v/release/cssnr/link-extractor)](https://github.com/cssnr/link-extractor/releases/latest)
 [![Mozilla Add-on Version](https://img.shields.io/amo/v/link-extractor?label=firefox&logo=firefox)](https://addons.mozilla.org/addon/link-extractor)
 [![Chrome Web Store Version](https://img.shields.io/chrome-web-store/v/ifefifghpkllfibejafbakmflidjcjfp?label=chrome&logo=googlechrome)](https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp)
+[![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=cssnr_link-extractor&metric=ncloc)](https://sonarcloud.io/summary/overall?id=cssnr_link-extractor)
 # Link Extractor
 
-Extract all links from a page or use a regex filter. Coming Soon...
+Extract all links from a page or use a regex filter.
+
+_Coming Soon..._
 
 *   Firefox: https://addons.mozilla.org/addon/link-extractor
 *   Chrome: https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp
 
 ## Table of Contents
 
 *   [Overview](#overview)
+*   [Features](#features)
 *   [Development](#development)
     -   [Chrome Setup](#chrome-setup)
     -   [Firefox Setup](#firefox-setup)
+    -   [Building](#building)
 
 ## Overview
 
-Because a once good project **turned into bloatware**: https://github.com/az0/linkgopher
+Easily extract links and/or domains from any site with an optional quick filter.
+
+## Features
+
+*   Extract all Links and/or Domains
+*   Copy all URLs or Domains to the clipboard
+*   Quick Filter URLs with a regular expression
+*   Quick Filter links by a saved regular expression 
 
 ## Development
 
@@ -48,4 +60,12 @@ in the top right corner then clicking the `Pin` icon.
 
 Addon should now be installed.  
 You can optionally pin the Addon by clicking the `Puzzle Piece`.  
-in the top right corner then clicking the Settings wheel and then `Pin to Toolbar`.  
+in the top right corner then clicking the Settings wheel and then `Pin to Toolbar`.
+
+### Building
+
+The extension is automatically built on a new release which then uploads the artifacts to the release.
+See [build.yaml](.github%2Fworkflows%2Fbuild.yaml) for more information.
+
+To build locally, clone the repository then run `npm install`.
+You can then run the addon from the `src` directory as normal.
diff --git a/src/html/links.html b/src/html/links.html
@@ -13,7 +13,7 @@ <h1 id="message">Loading...</h1>
 
     <div id="links-div" style="display: none">
         <h2>Links</h2>
-        <a id="links-clip" class="clip btn btn-sm btn-outline-warning mb-2" role="button" data-clipboard-text="">Copy Links</a>
+        <a id="links-clip" class="clip btn btn-sm btn-outline-success mb-2" role="button" data-clipboard-text="">Copy Links</a>
         <table id="links" class="table table-sm table-striped table-hover">
             <tbody></tbody>
         </table>

diff --git a/src/html/options.html b/src/html/options.html
@@ -27,11 +27,14 @@ <h1 class="text-center">Link Extractor Options</h1>
                     </form>
                 </div>
                 <div class="text-center">
-                    <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" target="_blank"
-                       href="https://github.com/cssnr/link-extractor">Get Help</a>
+                    <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" target="_blank" rel="noopener"
+                       href="https://github.com/cssnr/link-extractor#table-of-contents">Get Help</a>
                     |
-                    <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" target="_blank"
-                       href="https://github.com/cssnr/link-extractor">View Source</a>
+                    <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" target="_blank" rel="noopener"
+                       href="https://github.com/cssnr/link-extractor/discussions/new?category=feature-requests">Request Feature</a>
+                    |
+                    <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" target="_blank" rel="noopener"
+                       href="https://github.com/cssnr/link-extractor/issues/new">Open Issue</a>
                 </div>
             </div>
         </div>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -10,11 +10,19 @@
 
 <div class="container-fluid p-3">
     <div class="d-grid g-2 gap-2">
-        <a id="btn-all" class="btn btn-outline-warning btn-sm" role="button">All Links</a>
-        <a id="btn-filter" class="btn btn-outline-info btn-sm" role="button">Links by Filter</a>
-        <a id="btn-domains" class="btn btn-outline-primary btn-sm" role="button">Only Domains</a>
-        <button id="btn-options" data-href="html/options.html" type="button" class="btn btn-sm btn-outline-secondary">Open Options</button>
-        <a id="btn-about" class="btn btn-outline-secondary btn-sm" role="button">Visit Homepage</a>
+        <button id="btn-all" class="btn btn-success btn-sm popup-click" type="button">All Links w/ Filter</button>
+        <form id="filter-form" class="my-0">
+            <label for="filter-input" class="sr-only" style="display: none"></label>
+            <input id="filter-input" class="text-center" type="text" placeholder="Filter">
+        </form>
+        <button id="btn-default" class="btn btn-info btn-sm popup-click" type="button">Links w/ Default Filter</button>
+        <button id="btn-domains" class="btn btn-primary btn-sm popup-click" type="button">Only Domains</button>
+        <button id="btn-options" class="btn btn-outline-warning btn-sm popup-click" type="button" data-href="html/options.html">Open Options</button>
+<!--        <button id="btn-about" class="btn btn-outline-warning btn-sm popup-click" type="button">Open Homepage</button>-->
+        <p class="mb-0 text-center"><small>
+            <a id="btn-about" class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover popup-click" type="button" rel="noopener"
+               data-href="">Homepage</a>
+        </small></p>
     </div>
 </div>
 

diff --git a/src/js/links.js b/src/js/links.js
@@ -3,34 +3,27 @@
 new ClipboardJS('.clip')
 
 const urlParams = new URLSearchParams(window.location.search)
-console.log(`urlParams: ${urlParams}`)
-
-const tabId = parseInt(urlParams.get('tabId'))
-const onlyDomains = urlParams.get('onlyDomains')
-const filterLinks = urlParams.get('filterLinks')
-
-// TODO: Make a modal and function for this prompt
-const pattern = filterLinks === 'true' ? window.prompt('Enter Filter:') : null
-console.log(`pattern: ${pattern}`)
+const tabId = parseInt(urlParams.get('tab'))
 
 chrome.tabs.sendMessage(tabId, { action: 'extract' }, (links) => {
     console.log('sendMessage')
     console.log(links)
-    processLinks(links, pattern, onlyDomains)
+    processLinks(links)
 })
 
 /**
  * Process Links
  * @function processLinks
  * @param links
- * @param {string} pattern -- Pattern for filtering
- * @param onlyDomains
  */
-function processLinks(links, pattern, onlyDomains) {
+function processLinks(links) {
     // TODO: Cleanup this entire function...
+    const pattern = urlParams.get('filter')
+    const onlyDomains = urlParams.has('domains')
     console.log(`pattern: ${pattern}`)
     console.log(`onlyDomains: ${onlyDomains}`)
     console.log(links)
+
     if (chrome.runtime.lastError) {
         return window.alert(chrome.runtime.lastError)
     }
@@ -59,7 +52,7 @@ function processLinks(links, pattern, onlyDomains) {
     }
 
     // Update links if onlyDomains is not set
-    if (onlyDomains !== 'true') {
+    if (!onlyDomains) {
         console.log('updating links now...')
         document
             .getElementById('links-clip')

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -2,45 +2,57 @@
 
 jQuery('html').hide().fadeIn('slow')
 
-document.getElementById('btn-all').addEventListener('click', popupClick)
-document.getElementById('btn-filter').addEventListener('click', popupClick)
-document.getElementById('btn-domains').addEventListener('click', popupClick)
-document.getElementById('btn-options').addEventListener('click', popupClick)
-
-document.getElementById('btn-about').addEventListener('click', () => {
-    const manifest = chrome.runtime.getManifest()
-    console.log(`url: ${manifest.homepage_url}`)
-    chrome.tabs.create({ active: true, url: manifest.homepage_url }).then()
-    window.close()
-})
+const buttons = document.querySelectorAll('.popup-click')
+buttons.forEach((el) => el.addEventListener('click', popupClick))
+document.getElementById('filter-form').addEventListener('submit', popupClick)
+
+const filterInput = document.getElementById('filter-input')
+filterInput.focus()
 
 /**
  * Handle Popup Clicks
  * @function popupClick
  * @param {MouseEvent} event
  */
 async function popupClick(event) {
+    event.preventDefault()
     console.log(event)
     if (event.target.dataset.href) {
-        console.log(`href: ${event.target.dataset.href}`)
         const url = chrome.runtime.getURL(event.target.dataset.href)
         console.log(`url: ${url}`)
         await chrome.tabs.create({ active: true, url })
         window.close()
         return
     }
-    const filterLinks = event.target.id === 'btn-filter'
-    const onlyDomains = event.target.id === 'btn-domains'
+    if (event.target.id === 'btn-about') {
+        const manifest = chrome.runtime.getManifest()
+        console.log(`url: ${manifest.homepage_url}`)
+        await chrome.tabs.create({ active: true, url: manifest.homepage_url })
+        window.close()
+        return
+    }
+
+    const url = new URL(chrome.runtime.getURL('../html/links.html'))
+    if (event.target.id === 'btn-domains') {
+        console.log('domains: yes')
+        url.searchParams.set('domains', 'yes')
+    }
+    if (filterInput.value) {
+        console.log(`filterInput.value: ${filterInput.value}`)
+        url.searchParams.set('filter', filterInput.value)
+    }
+
     const queryOptions = { active: true, lastFocusedWindow: true }
     const [tab] = await chrome.tabs.query(queryOptions)
-    console.log(`chrome.scripting.executeScript(inject.js) tab.id: ${tab.id}`)
+    console.log(`tab.id: ${tab.id}`)
+    url.searchParams.set('tab', tab.id.toString())
+
     await chrome.scripting.executeScript({
         target: { tabId: tab.id },
         files: ['/js/inject.js'],
     })
-    const linksUrl = chrome.runtime.getURL('../html/links.html')
-    const url = `${linksUrl}?tabId=${tab.id}&filterLinks=${filterLinks}&onlyDomains=${onlyDomains}`
-    console.log(`chrome.tabs.create: ${url}`)
-    await chrome.tabs.create({ active: true, url })
+
+    console.log(`url: ${url.toString()}`)
+    await chrome.tabs.create({ active: true, url: url.toString() })
     window.close()
 }