Updates (#5)

* Minor Updates

* Update Badge

* Add Version

* Update options.html

README.md

@@ -2,27 +2,24 @@
 [![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)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=cssnr_link-extractor&metric=alert_status)](https://sonarcloud.io/summary/overall?id=cssnr_link-extractor)
 # Link Extractor
 
-Modern Chrome and Firefox Addon to extract all links from a web page with optional filters.
+Modern Chrome and Firefox Addon to easily extract all links/domains from a web page with optional filters.
+Including automatic dark/light mode, copy all links or domains, striped tables, and more...
 
-*   [Overview](#overview)
+*   [Download](#download)
 *   [Features](#features)
 *   [Configuration](#configuration)
 *   [Development](#development)
     -   [Chrome Setup](#chrome-setup)
     -   [Firefox Setup](#firefox-setup)
 
-# Overview
-
-Easily extract links and/or domains from any site with an optional filter including automatic dark/light mode.
+# Download
 
 *   Firefox: https://addons.mozilla.org/addon/link-extractor
 *   Chrome: https://chrome.google.com/webstore/detail/link-extractor/ifefifghpkllfibejafbakmflidjcjfp
 
-[![Screenshot of Links and Popup](https://raw.githubusercontent.com/cssnr/link-extractor-site/main/screenshots/links-popup_640x400.jpg)](https://github.com/cssnr/link-extractor)
-
 # Features
 
 *   Extract all Links and/or Domains
@@ -31,6 +28,8 @@ Easily extract links and/or domains from any site with an optional filter includ
 *   Quick Filter links by a saved regular expression
 *   Automatic Dark/Light mode based on browser setting
 
+[![Screenshot of Links and Popup](https://repository-images.githubusercontent.com/707614074/90f0725b-9197-42fb-ac3f-d78b864cc7d8)](https://github.com/cssnr/link-extractor)
+
 # Configuration
 
 You can optionally pin the Addon by clicking the `Puzzle Piece`, then;  
@@ -39,12 +38,12 @@ You can optionally pin the Addon by clicking the `Puzzle Piece`, then;
 
 # Development
 
-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](src) directory as normal.
 
+The extension is automatically built on every release which uploads the artifacts to that release.
+See [build.yaml](.github/workflows/build.yaml) for more information.
+
 ## Chrome Setup
 
 1.  Download (or clone) the repo [master.zip](https://github.com/cssnr/link-extractor/archive/refs/heads/master.zip) or a [Release](https://github.com/cssnr/link-extractor/releases).

src/html/options.html

@@ -12,11 +12,12 @@
 <div class="container-fluid p-3">
     <div class="row">
         <div class="col-md-6 col-12 m-auto">
-            <div class="card p-3" >
+            <div class="card" >
                 <div class="card-body">
                     <h1 class="text-center">Link Extractor Options</h1>
-                    <img src="../images/logo128.png" class="img-fluid m-auto d-block my-3" alt="Link Extractor" height="128" width="128">
-                    <div class="alert alert-danger text-center" role="alert">INOP: Options are <strong>not</strong> implemented!</div>
+                    <img src="../images/logo128.png" class="img-fluid m-auto d-block" alt="Link Extractor" height="128" width="128">
+                    <p class="text-center lead"><span id="version" class=""></span></p>
+                    <div class="alert alert-danger text-center" role="alert"><strong>INOP:</strong> Options are not yet implemented!</div>
                     <form>
                         <div class="mb-3">
                             <label for="pattern" class="form-label">Default Pattern</label>
@@ -26,7 +27,7 @@ <h1 class="text-center">Link Extractor Options</h1>
                         <button id="submit" type="submit" class="btn btn-success w-100">Save Options</button>
                     </form>
                 </div>
-                <div class="text-center">
+                <div class="text-center mb-3">
                     <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#link-extractor">Get Help</a>
                     |

src/html/popup.html

@@ -21,7 +21,7 @@
 <!--        <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>
+               data-href="">Link Extractor</a> <span id="version" class=""></span>
         </small></p>
     </div>
 </div>

src/js/options.js

@@ -12,6 +12,8 @@ async function initOptions() {
     const { pattern } = await chrome.storage.sync.get(['pattern'])
     console.log(`pattern: ${pattern}`)
     document.getElementById('pattern').value = pattern || ''
+    const manifest = chrome.runtime.getManifest()
+    document.getElementById('version').outerText = `Version ${manifest.version}`
 }
 
 /**

src/js/popup.js

@@ -9,6 +9,11 @@ const buttons = document.querySelectorAll('.popup-click')
 buttons.forEach((el) => el.addEventListener('click', popupClick))
 document.getElementById('filter-form').addEventListener('submit', popupClick)
 
+document.addEventListener('DOMContentLoaded', function () {
+    const manifest = chrome.runtime.getManifest()
+    document.getElementById('version').outerText = `v${manifest.version}`
+})
+
 /**
  * Handle Popup Clicks
  * @function popupClick