Extract Additional Link Details (#74)

* Fully utilize DataTables for Links Results Page * Allow Extracting Additional Link Details
cssnr · May 24, 2024 · df929df · df929df
1 parent 352adbb
commit df929df
Show file tree

Hide file tree

Showing 13 changed files with 354 additions and 173 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -21,6 +21,11 @@ gulp.task('datatables', () => {
             'node_modules/datatables.net/js/dataTables.min.js',
             'node_modules/datatables.net-bs5/js/dataTables.bootstrap5.min.js',
             'node_modules/datatables.net-bs5/css/dataTables.bootstrap5.min.css',
+            'node_modules/datatables.net-buttons/js/dataTables.buttons.min.js',
+            'node_modules/datatables.net-buttons/js/buttons.colVis.min.js',
+            'node_modules/datatables.net-buttons/js/buttons.html5.min.js',
+            'node_modules/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js',
+            'node_modules/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css',
         ])
         .pipe(gulp.dest('src/dist/datatables'))
 })

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.5.2",
+  "version": "0.6.0",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,8 @@
     "clipboard": "^2.0.11",
     "datatables.net": "^2.0.7",
     "datatables.net-bs5": "^2.0.7",
+    "datatables.net-buttons": "^3.0.2",
+    "datatables.net-buttons-bs5": "^3.0.2",
     "jquery": "^3.7.1"
   },
   "devDependencies": {

diff --git a/src/html/links.html b/src/html/links.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../dist/fontawesome/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="../dist/datatables/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" type="text/css" href="../dist/datatables/buttons.bootstrap5.min.css">
     <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/links.css">
     <script type="text/javascript" src="../js/theme.js"></script>
@@ -19,7 +20,7 @@
             <a href="#links"><span class="badge text-bg-success w-100">Links</span></a>
         </div>
         <div class="col">
-            <a role="button" class="clip" data-clipboard-target="#links-body" data-toast="Copied Links">
+            <a href="#" class="copy-links">
                 <span class="badge text-bg-success w-100">Copy</span></a>
         </div>
     </div>
@@ -28,7 +29,7 @@
             <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-body" data-toast="Copied Domains">
+            <a href="#" class="clip" data-clipboard-target="#domains-body" data-toast="Copied Domains">
                 <span class="badge text-bg-primary w-100">Copy</span></a>
         </div>
     </div>
@@ -39,47 +40,50 @@ <h2 id="loading-message" class="user-select-none d-none">Loading...</h2>
     <div class="links d-none">
         <div class="user-select-none">
             <h2 id="links">Links <span class="badge bg-success-subtle"><span id="links-count">0</span>/<span id="links-total"></span></span></h2>
-            <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 <i class="fa-solid fa-copy ms-1"></i></a>
-            <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 <i class="fa-solid fa-download m-1"></i></a>
-            <a id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#links-body">
-                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></a>
+            <button id="copy-links" class="btn btn-sm btn-success me-1 mb-2 copy-links" type="button">
+                Copy Links <i class="fa-solid fa-copy ms-1"></i></button>
+            <button id="down-links" class="btn btn-sm btn-outline-info download-file me-1 mb-2" type="button" data-target="#links-body" data-filename="links.txt">
+                Download <i class="fa-solid fa-download m-1"></i></button>
+            <button id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#links-body">
+                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
             <span class="d-inline-block me-1 mb-2">
                 <kbd>C</kbd> <i class="fa-regular fa-keyboard"></i> <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>-->
-
+            <span class="d-inline-block me-1 mt-md-1 float-end">
+                <kbd>K</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>Z</kbd> Keyboard Shortcuts.
+            </span>
+        </div> <!-- links-buttons -->
         <table id="links-table" class="table table-sm table-striped table-hover table-responsive small" data-counter="links-count" style="width:100%">
-            <caption class="visually-hidden user-select-none">Links</caption>
-            <thead class=""><tr><th>Link</th></tr></thead>
+            <thead class="">
+                <tr>
+                    <th>Link</th>
+                    <th>Text</th>
+                    <th>Title</th>
+                    <th>Label</th>
+                    <th>Rel</th>
+                    <th>Target</th>
+                </tr>
+            </thead>
             <tbody id="links-body"></tbody>
-        </table>
-    </div>
+        </table> <!-- links-table -->
+    </div> <!-- links -->
 
     <div class="domains d-none">
         <div class="user-select-none">
             <h2 id="domains">Domains <span class="badge bg-primary-subtle"><span id="domains-count">0</span>/<span id="domains-total"></span></span></h2>
-            <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 <i class="fa-solid fa-copy ms-1"></i></a>
-            <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 <i class="fa-solid fa-download ms-1"></i></a>
-            <a id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#domains-body">
-                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></a>
+            <button id="copy-domains" class="btn btn-sm btn-primary clip me-1 mb-2" type="button" data-clipboard-target="#domains-body" data-toast="Copied Domains">
+                Copy Domains <i class="fa-solid fa-copy ms-1"></i></button>
+            <button id="down-domains" class="btn btn-sm btn-outline-info download-file me-1 mb-2" type="button" data-target="#domains-body" data-filename="domains.txt">
+                Download <i class="fa-solid fa-download ms-1"></i></button>
+            <button id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-2 mb-2" type="button" data-target="#domains-body">
+                Open <i class="fa-solid fa-up-right-from-square ms-1"></i></button>
             <span class="d-inline-block me-1 mb-2">
                 <kbd>D</kbd> <i class="fa-regular fa-keyboard"></i> <kbd>M</kbd> to Copy Domains.</span>
-        </div>
+        </div> <!-- domains-buttons -->
         <table id="domains-table" class="table table-sm table-striped table-hover table-responsive small" data-counter="domains-count" style="width:100%">
-            <caption class="visually-hidden user-select-none">Domains</caption>
             <thead class=""><tr><th>Domain</th></tr></thead>
             <tbody id="domains-body"></tbody>
-        </table>
-    </div>
+        </table> <!-- domains-table -->
+    </div> <!-- domains -->
 </div> <!-- container-fluid -->
 
 <div id="keybinds-modal" class="modal" tabindex="-1">
@@ -98,6 +102,7 @@ <h5 class="modal-title">Keyboard Shortcuts <i class="fa-regular fa-keyboard ms-2
                         <p><kbd>G</kbd> or <kbd>H</kbd> Focus Domains Filter</p>
                         <p><kbd>T</kbd> or <kbd>O</kbd> Open Options</p>
                         <p><kbd>Z</kbd> or <kbd>K</kbd> Keyboard Shortcuts</p>
+                        <p><kbd class="me-1">Escape</kbd> Unfocus Filter Input</p>
                     </div>
                 </div>
             </div>
@@ -123,6 +128,10 @@ <h5 class="modal-title">Keyboard Shortcuts <i class="fa-regular fa-keyboard ms-2
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="text/javascript" src="../dist/datatables/dataTables.min.js"></script>
 <script type="text/javascript" src="../dist/datatables/dataTables.bootstrap5.min.js"></script>
+<script type="text/javascript" src="../dist/datatables/dataTables.buttons.min.js"></script>
+<script type="text/javascript" src="../dist/datatables/buttons.bootstrap5.min.js"></script>
+<script type="text/javascript" src="../dist/datatables/buttons.colVis.min.js"></script>
+<script type="text/javascript" src="../dist/datatables/buttons.html5.min.js"></script>
 <script type="text/javascript" src="../dist/clipboard/clipboard.min.js"></script>
 <script type="text/javascript" src="../js/main.js"></script>
 <script type="module" src="../js/links.js"></script>

diff --git a/src/html/options.html b/src/html/options.html
@@ -39,36 +39,28 @@ <h1>Link Extractor</h1>
 
     <form id="options-form" class="mb-3">
         <div class="row">
-            <div class="col-sm-6 col-12 mb-2">
-                <label for="linksDisplay" class="form-label"><i class="fa-solid fa-list-ol me-2"></i> Links to Show</label>
-                <select id="linksDisplay" class="form-control form-select" aria-label="Number of Links" aria-describedby="linksDisplayHelp">
-                    <option value="-1" selected>All</option>
-                    <option value="10">10</option>
-                    <option value="25">25</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                    <option value="250">250</option>
-                    <option value="500">500</option>
-                    <option value="1000">1000</option>
-                </select>
-                <div class="form-text" id="linksDisplayHelp">Initial # of Links to Show.</div>
-            </div>
-            <div class="col-sm-6 col-12 mb-2">
+            <div class="col-12 mb-2">
                 <label for="flags" class="form-label"><i class="fa-solid fa-code me-2"></i> Regex Flags</label>
-                <a id="reset-default" class="float-end align-bottom small" role="button">Reset</a>
+                <a id="reset-default" class="float-end align-bottom small text-decoration-none" role="button">Reset</a>
                 <input id="flags" type="text" class="form-control" autocomplete="off">
                 <div class="form-text" id="flagsHelp">
                     Regex Flags for Filtering.
-<!--                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Regex Flags Used When Filtering Links.">-->
-<!--                        <i class="fa-solid fa-circle-info ms-1"></i>-->
-<!--                    </span>-->
-                    <a target="_blank" rel="noopener" class="ms-1"
+                    <a target="_blank" rel="noopener" class="ms-1 text-decoration-none"
                        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags">
-                        <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
+                        More Info <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                 </div>
             </div>
         </div>
 
+        <div class="form-check form-switch">
+            <input class="form-check-input form-control" type="checkbox" role="switch" id="removeDuplicates">
+            <label class="form-check-label" for="removeDuplicates" aria-describedby="removeDuplicatesHelp">
+                Remove Duplicate Links
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Filter Out Links with the same URL">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input form-control" type="checkbox" role="switch" id="defaultFilter">
             <label class="form-check-label" for="defaultFilter" aria-describedby="defaultFilterHelp">
@@ -79,10 +71,10 @@ <h1>Link Extractor</h1>
             </label>
         </div>
         <div class="form-check form-switch">
-            <input class="form-check-input form-control" type="checkbox" role="switch" id="sortLinks">
-            <label class="form-check-label" for="sortLinks" aria-describedby="sortLinksHelp">
-                Auto Sort Alphabetically
-                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Sort Links and Domains Alphabetically">
+            <input class="form-check-input form-control" type="checkbox" role="switch" id="saveState">
+            <label class="form-check-label" for="saveState" aria-describedby="saveStateHelp">
+                Save Links Page Options
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Remember Links Display, Columns, and Sorting">
                     <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -47,6 +47,15 @@
         </div>
 
         <form id="options-form">
+            <div class="form-check form-switch">
+                <input class="form-check-input form-control" type="checkbox" role="switch" id="removeDuplicates">
+                <label class="form-check-label" for="removeDuplicates" aria-describedby="removeDuplicatesHelp">
+                    Remove Duplicate Links
+                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Filter Out Links with the same URL">
+                        <i class="fa-solid fa-circle-info ms-1"></i>
+                    </span>
+                </label>
+            </div>
             <div class="form-check form-switch">
                 <input class="form-check-input me-2" type="checkbox" role="switch" id="defaultFilter">
                 <label class="form-check-label" for="defaultFilter" aria-describedby="defaultFilterHelp">
@@ -57,10 +66,10 @@
                 </label>
             </div>
             <div class="form-check form-switch">
-                <input class="form-check-input form-control" type="checkbox" role="switch" id="sortLinks">
-                <label class="form-check-label" for="sortLinks" aria-describedby="sortLinksHelp">
-                    Auto Sort Alphabetically
-                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Sort Links and Domains Alphabetically">
+                <input class="form-check-input form-control" type="checkbox" role="switch" id="saveState">
+                <label class="form-check-label" for="saveState" aria-describedby="saveStateHelp">
+                    Save Links Page Options
+                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Remember Links Display, Columns, and Sorting">
                         <i class="fa-solid fa-circle-info ms-1"></i>
                     </span>
                 </label>

diff --git a/src/js/extract.js b/src/js/extract.js
@@ -78,7 +78,16 @@ function extractSelection() {
  */
 function pushElement(array, element) {
     try {
-        array.push(decodeURI(element.href))
+        const data = {
+            href: decodeURI(element.href),
+            text: element.textContent,
+            title: element.title,
+            label: element.ariaLabel,
+            rel: element.rel,
+            target: element.target,
+            origin: element.origin,
+        }
+        array.push(data)
     } catch (e) {
         console.log(e)
     }