Add Download Links/Domains Option (#32)

* Add Download Links/Domains Option

* Update README.md

README.md

@@ -49,6 +49,7 @@ For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssn
 *   Extract Links from Selected Text on any Site
 *   Extract Links from Clipboard or Any Text
 *   Open Multiple Links in Tabs from Text
+*   Download Links and Domains as a Text File
 *   Copy the Text from a Link via Context Menu
 *   Quick Filter Links with a Regular Expression
 *   Store Regular Expressions for Quick Filtering

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

src/html/links.html

@@ -39,11 +39,10 @@ <h2 id="loading-message" class="user-select-none">Loading...</h2>
             <h2 id="links">Links <span id="links-count" class="badge bg-success-subtle"></span></h2>
             <a id="copy-links" class="btn btn-sm btn-success me-1 clip" role="button" data-clipboard-target="#links-clip">
                 Copy Links</a>
-<!--            <a id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs" role="button" data-target="#links-clip">-->
-<!--                Open ALL</a>-->
+            <a id="down-links" class="btn btn-sm btn-outline-info download-file" role="button" data-target="#links-clip" data-filename="links.txt">
+                Download</a>
             <button type="button" id="open-links" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-3" data-target="#links-clip">
-                Open Links
-                <span id="open-links-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
+                Open <span id="open-links-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
             </button>
             Press <kbd>C</kbd> or <kbd>L</kbd> to Copy Links.
         </div>
@@ -60,11 +59,10 @@ <h2 id="links">Links <span id="links-count" class="badge bg-success-subtle"></sp
             <h2 id="domains">Domains <span id="domains-count" class="badge bg-primary-subtle"></span></h2>
             <a id="copy-domains" class="btn btn-sm btn-primary me-1 clip" role="button" data-clipboard-target="#domains-clip">
                 Copy Domains</a>
-<!--            <a id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs" role="button" data-target="#domains-clip">-->
-<!--                Open Domains</a>-->
+            <a id="down-domains" class="btn btn-sm btn-outline-info download-file" role="button" data-target="#domains-clip"  data-filename="domains.txt">
+                Download</a>
             <button type="button" id="open-domains" class="btn btn-sm btn-outline-warning open-in-tabs position-relative me-3" data-target="#domains-clip">
-                Open Domains
-                <span id="open-domains-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
+                Open <span id="open-domains-count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger visually-hidden"></span>
             </button>
             Press <kbd>D</kbd> or <kbd>M</kbd> to Copy Domains.
         </div>

src/js/links.js

@@ -18,6 +18,8 @@ document.addEventListener('keyup', (event) => {
 
 const openLinksBtns = document.querySelectorAll('.open-in-tabs')
 openLinksBtns.forEach((el) => el.addEventListener('click', openLinksClick))
+const downFileBtns = document.querySelectorAll('.download-file')
+downFileBtns.forEach((el) => el.addEventListener('click', downloadFileClick))
 
 /**
  * Links Init
@@ -223,3 +225,38 @@ function openLinksClick(event) {
     console.log('links:', links)
     openLinksInTabs(links)
 }
+
+/**
+ * Download links Button Click Callback
+ * @function downloadLinksClick
+ * @param {KeyboardEvent} event
+ */
+function downloadFileClick(event) {
+    console.log('downloadLinksClick:', event)
+    console.log(`openLinksBtn: ${event.target.dataset.target}`)
+    const input = document.querySelector(event.target.dataset.target)
+    const links = input.value.toString()
+    console.log('links:', links)
+    download(event.target.dataset.filename, links)
+    // showToast('File Downloaded.')
+}
+
+/**
+ * Download filename with text
+ * @function download
+ * @param {String} filename
+ * @param {String} text
+ */
+function download(filename, text) {
+    console.log(`download: ${filename}`)
+    const element = document.createElement('a')
+    element.setAttribute(
+        'href',
+        'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
+    )
+    element.setAttribute('download', filename)
+    element.style.display = 'none'
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
+}