Add Drag and Drop Support

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

src/html/options.html

@@ -144,15 +144,14 @@ <h1>Link Extractor</h1>
     <table id="filters-table" class="table table-sm table-hover bg-transparent">
         <caption>
             Saved Filters
-            <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Click on an Existing Filter to Edit it.">
+            <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Click on a Filter to Edit or Drag and Drop to Reorder.">
                 <i class="fa-solid fa-lightbulb text-warning-emphasis ms-1"></i>
             </span>
         </caption>
         <thead><tr>
-            <th scope="col" class="text-center" style="width: 36px;">
-                <i class="fa-solid fa-trash-can"></i>
-            </th>
+            <th scope="col" class="text-center" style="width: 36px;"><i class="fa-solid fa-trash-can"></i></th>
             <th scope="col">Filter</th>
+            <th scope="col" class="text-center" style="width: 36px;"><i class="fa-solid fa-arrow-down-up-across-line"></i></th>
         </tr></thead>
         <tbody></tbody>
     </table>
@@ -184,6 +183,7 @@ <h1>Link Extractor</h1>
         <div class="toast-body"></div>
     </div>
     <i class="fa-regular fa-trash-can"></i>
+    <i class="fa-solid fa-grip"></i>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-dot" viewBox="0 0 16 16">
         <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
     </svg>

src/js/exports.js

@@ -6,17 +6,16 @@
  * @param {String} [filter] Regex Filter
  * @param {Boolean} [domains] Only Domains
  * @param {Boolean} [selection] Only Selection
- * @param {chrome.tabs[]} tabs Tabs for Extraction
  */
 export async function injectTab({
     filter = null,
     domains = false,
     selection = false,
 } = {}) {
     console.log('injectTab:', filter, domains, selection)
-    const tabIds = []
 
     // Extract tabIds from tabs
+    const tabIds = []
     const tabs = await chrome.tabs.query({ highlighted: true })
     if (!tabs.length) {
         const [tab] = await chrome.tabs.query({
@@ -56,6 +55,7 @@ export async function injectTab({
             files: ['/js/extract.js'],
         })
     }
+
     // Open Tab to links.html with desired params
     console.debug(`url: ${url.toString()}`)
     await chrome.tabs.create({ active: true, url: url.toString() })

src/js/links.js

@@ -4,6 +4,7 @@ import { textFileDownload } from './exports.js'
 
 window.addEventListener('keydown', handleKeyboard)
 document.addEventListener('DOMContentLoaded', initLinks)
+
 document
     .querySelectorAll('.open-in-tabs')
     .forEach((el) => el.addEventListener('click', openLinksClick))
@@ -12,7 +13,6 @@ document
     .forEach((el) => el.addEventListener('click', downloadFileClick))
 
 const urlParams = new URLSearchParams(window.location.search)
-
 const dtOptions = {
     info: false,
     processing: true,
@@ -37,17 +37,15 @@ const dtOptions = {
  * @function initLinks
  */
 async function initLinks() {
-    console.log('initLinks: urlParams:', urlParams)
+    console.log('initLinks:', urlParams)
     try {
         const tabIds = urlParams.get('tabs')
-        const tabs = tabIds.split(',')
+        const tabs = tabIds?.split(',')
         console.log('tabs:', tabs)
         const selection = urlParams.has('selection')
-        // console.debug(`tabId: ${tabId}, selection: ${selection}`)
 
-        // TODO: Populate Links to links then processLinks
         const allLinks = []
-        if (tabs.length) {
+        if (tabs?.length) {
             console.log('processing tabs:', tabs)
             // const tabId = parseInt(tabs[0])
             for (const tabId of tabs) {

src/js/main.js

@@ -53,13 +53,18 @@ function onScroll() {
  * @param {String} type
  */
 function showToast(message, type = 'success') {
-    console.log(`showToast: ${type}:`, message)
-    const element = document.querySelector('.d-none .toast').cloneNode(true)
-    element.addEventListener('mousemove', () => toast.hide())
-    element.classList.add(`text-bg-${type}`)
+    console.debug(`showToast: ${type}: ${message}`)
+    const clone = document.querySelector('.d-none .toast')
+    const container = document.getElementById('toast-container')
+    if (!clone || !container) {
+        return console.warn('Missing clone or container:', clone, container)
+    }
+    const element = clone.cloneNode(true)
     element.querySelector('.toast-body').innerHTML = message
-    document.getElementById('toast-container').appendChild(element)
+    element.classList.add(`text-bg-${type}`)
+    container.appendChild(element)
     const toast = new bootstrap.Toast(element)
+    element.addEventListener('mousemove', () => toast.hide())
     toast.show()
 }