Minor Fixes (#2)

* Fix Input Display, Update README.md, Minor Misc Fixes

* Update README.md 📖

README.md

@@ -5,48 +5,52 @@
 [![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..._
+Modern Chrome and Firefox Addon to extract all links from a web page with optional filters.
 
 *   Firefox: https://addons.mozilla.org/addon/link-extractor
 *   Chrome: https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp
 
-## Table of Contents
+# Table of Contents
 
 *   [Overview](#overview)
 *   [Features](#features)
 *   [Development](#development)
+*   [Configuration](#configuration)
     -   [Chrome Setup](#chrome-setup)
     -   [Firefox Setup](#firefox-setup)
     -   [Building](#building)
 
-## Overview
+# Overview
 
-Easily extract links and/or domains from any site with an optional quick filter.
+Easily extract links and/or domains from any site with an optional filter including automatic dark/light mode.
 
-## Features
+# 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 
+*   Quick Filter links by a saved regular expression
+*   Automatic Dark/Light mode based on browser setting
+
+# Configuration
+
+You can optionally pin the Addon by clicking the `Puzzle Piece`, then;  
+**Chrome**, click the `Pin` icon.  
+**Firefox**, click the `Settings Wheel` and `Pin to Toolbar`.  
 
-## Development
+# Development
 
-### Chrome Setup
+Instructions to run from source, build locally, or test/develop the extension.
+
+## Chrome Setup
 
 1.  Download (or clone) the repo: [link-extractor-master.zip](https://github.com/cssnr/link-extractor/archive/refs/heads/master.zip)
 1.  Unzip the archive, place the folder where it must remain and note its location for later.
 1.  Open Chrome, click the `3 dots` in the top right, click `Extensions`, click `Manage Extensions`.
 1.  In the top right, click `Developer Mode` then on the top left click `Load unpacked`.
 1.  Navigate to the folder you extracted in step #3 then click `Select Folder`.
 
-Addon should now be installed.  
-You can optionally pin the Addon by clicking the `Puzzle Piece`.  
-in the top right corner then clicking the `Pin` icon.  
-
-### Firefox Setup
+## Firefox Setup
 
 > **Note**
 >
@@ -58,14 +62,10 @@ in the top right corner then clicking the `Pin` icon.
 1.  Open `about:addons` and drag the zip file to the page or choose Install from File from the Settings wheel.
 1.  You may also load temporary from: `about:debugging#/runtime/this-firefox`
 
-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`.
-
-### Building
+## Building
 
-The extension is automatically built on a new release which then uploads the artifacts to the release.
+The extension is automatically built on every release which uploads the artifacts to that 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.
+You can then run the addon from the [src](src) directory as normal.

src/css/popup.css

@@ -1,3 +1,7 @@
 body {
   width: 220px;
 }
+
+input::placeholder {
+  text-align: center;
+}

src/html/links.html

@@ -13,16 +13,20 @@ <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-success 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">
+            <caption class="visually-hidden">Links</caption>
             <tbody></tbody>
         </table>
     </div>
 
     <div id="domains-div" style="display: none">
     <h2>Domains</h2>
-        <a id="domains-clip" class="clip btn btn-sm btn-outline-primary mb-2" role="button" data-clipboard-text="">Copy Domains</a>
+        <a id="domains-clip" class="clip btn btn-sm btn-outline-primary mb-2" role="button" data-clipboard-text="">
+            Copy Domains</a>
     <table id="domains" class="table table-sm table-striped table-hover">
+        <caption class="visually-hidden">Domains</caption>
         <tbody></tbody>
     </table>
     </div>

src/html/popup.html

@@ -12,8 +12,8 @@
     <div class="d-grid g-2 gap-2">
         <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">
+            <label for="filter-input" class="visually-hidden"></label>
+            <input id="filter-input" class="form-control" 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>

src/js/links.js

@@ -6,8 +6,6 @@ const urlParams = new URLSearchParams(window.location.search)
 const tabId = parseInt(urlParams.get('tab'))
 
 chrome.tabs.sendMessage(tabId, { action: 'extract' }, (links) => {
-    console.log('sendMessage')
-    console.log(links)
     processLinks(links)
 })
 
@@ -17,10 +15,10 @@ chrome.tabs.sendMessage(tabId, { action: 'extract' }, (links) => {
  * @param links
  */
 function processLinks(links) {
-    // TODO: Cleanup this entire function...
-    const pattern = urlParams.get('filter')
+    // TODO: Cleanup this WHOLE function...
+    const urlFilter = urlParams.get('filter')
     const onlyDomains = urlParams.has('domains')
-    console.log(`pattern: ${pattern}`)
+    console.log(`urlFilter: ${urlFilter}`)
     console.log(`onlyDomains: ${onlyDomains}`)
     console.log(links)
 
@@ -37,8 +35,8 @@ function processLinks(links) {
     let items = [...new Set(filteredLinks)].sort()
 
     // Filter links based on pattern
-    const re = pattern ? new RegExp(pattern, 'g') : null
-    if (re) {
+    if (urlFilter) {
+        const re = new RegExp(urlFilter, 'g')
         console.log(`Filtering Links by: ${re}`)
         items = items.filter((item) => item.match(re))
     }
@@ -47,13 +45,11 @@ function processLinks(links) {
     const messageEl = document.getElementById('message')
     if (!items.length) {
         messageEl.textContent = 'No matches'
-        console.log('return: !items.length')
-        return
+        return console.log('return: !items.length')
     }
 
     // Update links if onlyDomains is not set
     if (!onlyDomains) {
-        console.log('updating links now...')
         document
             .getElementById('links-clip')
             .setAttribute('data-clipboard-text', items.join('\n'))
@@ -62,7 +58,6 @@ function processLinks(links) {
     }
 
     // Extract domains from items and sort
-    console.log('updating domains now...')
     const domains = [...new Set(items.map((link) => getBaseURL(link)))].sort()
     document
         .getElementById('domains-clip')

src/js/popup.js

@@ -2,13 +2,13 @@
 
 jQuery('html').hide().fadeIn('slow')
 
+const filterInput = document.getElementById('filter-input')
+filterInput.focus()
+
 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

src/manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "Link Extractor",
-  "description": "Extract links from web pages with an optional filters.",
+  "description": "Modern Chrome and Firefox Addon to extract all links from a web page with optional filters.",
   "homepage_url": "https://github.com/cssnr/link-extractor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "manifest_version": 3,
   "permissions": [
     "scripting",