Fix Open URLs and Add Lazy Loading (#75)

* Fix Open URLs and Add Lazy Loading * Cleanup * Cleanup Logging * Make lazy Optional * Add Protocol Check to openURL * Change onFocus to Window * Add Comments * Fix Options... Wow...
cssnr · May 25, 2024 · 3a8c446 · 3a8c446
1 parent df929df
commit 3a8c446
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 10 deletions.
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.6.0",
+  "version": "0.6.1",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

diff --git a/src/css/lazy.css b/src/css/lazy.css
@@ -0,0 +1,5 @@
+/* CSS for lazy.html */
+
+body {
+    background-color: #1c1b21;
+}
diff --git a/src/html/lazy.html b/src/html/lazy.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../css/lazy.css">
+</head>
+<body>
+
+<script type="text/javascript" src="../js/lazy.js"></script>
+
+</body>
+</html>
diff --git a/src/html/options.html b/src/html/options.html
@@ -52,6 +52,15 @@ <h1>Link Extractor</h1>
             </div>
         </div>
 
+        <div class="form-check form-switch">
+            <input class="form-check-input form-control" type="checkbox" role="switch" id="lazyLoad">
+            <label class="form-check-label" for="lazyLoad" aria-describedby="lazyLoadHelp">
+                Lazy Load Opened Tabs
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Don't Load Tabs Until Clicked On">
+                    <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="removeDuplicates">
             <label class="form-check-label" for="removeDuplicates" aria-describedby="removeDuplicatesHelp">

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="lazyLoad">
+                <label class="form-check-label" for="lazyLoad" aria-describedby="lazyLoadHelp">
+                    Lazy Load Opened Tabs
+                    <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Don't Load Tabs Until Clicked On">
+                        <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="removeDuplicates">
                 <label class="form-check-label" for="removeDuplicates" aria-describedby="removeDuplicatesHelp">

diff --git a/src/js/exports.js b/src/js/exports.js
@@ -128,6 +128,27 @@ export async function saveOptions(event) {
     }
 }
 
+/**
+ * Open URL
+ * @function openURL
+ * @param {String} url
+ * @param {Boolean} [lazy]
+ */
+export function openURL(url, lazy = false) {
+    // console.debug('openLink:', url, lazy)
+    if (!url.includes('://')) {
+        url = `http://${url}`
+    }
+    // console.debug('url:', url)
+    if (lazy) {
+        const lazyURL = new URL(chrome.runtime.getURL('/html/lazy.html'))
+        lazyURL.searchParams.append('url', url)
+        chrome.tabs.create({ active: false, url: lazyURL.href })
+    } else {
+        chrome.tabs.create({ active: false, url })
+    }
+}
+
 export function updateManifest() {
     const manifest = chrome.runtime.getManifest()
     document

diff --git a/src/js/lazy.js b/src/js/lazy.js
@@ -0,0 +1,16 @@
+// JS for lazy.html
+
+const searchParams = new URLSearchParams(window.location.search)
+const url = new URL(searchParams.get('url'))
+
+document.title = `${url.host}${url.pathname}`
+
+const link = document.createElement('link')
+link.rel = 'icon'
+link.href = `${url.origin}/favicon.ico`
+document.head.appendChild(link)
+
+window.addEventListener('focus', () => {
+    console.log('url:', url)
+    window.location = url.href
+})
diff --git a/src/js/links.js b/src/js/links.js
@@ -1,6 +1,6 @@
 // JS for links.html
 
-import { textFileDownload } from './exports.js'
+import { openURL, textFileDownload } from './exports.js'
 
 window.addEventListener('keydown', handleKeyboard)
 document.addEventListener('DOMContentLoaded', initLinks)
@@ -314,14 +314,15 @@ function downloadFileClick(event) {
  * @function openLinksClick
  * @param {MouseEvent} event
  */
-function openLinksClick(event) {
+async function openLinksClick(event) {
     console.debug('openLinksClick:', event)
     const closest = event.target?.closest('button')
     const links = getTableLinks(closest?.dataset?.target)
     // console.debug('links:', links)
+    const { options } = await chrome.storage.sync.get(['options'])
     if (links) {
         links.split('\n').forEach(function (url) {
-            chrome.tabs.create({ active: false, url }).then()
+            openURL(url, options.lazyLoad)
         })
     } else {
         showToast('No Links to Open.', 'warning')

diff --git a/src/js/options.js b/src/js/options.js
@@ -31,7 +31,7 @@ document
     .getElementById('options-form')
     .addEventListener('submit', (e) => e.preventDefault())
 document
-    .querySelectorAll('#options-form > input, select')
+    .querySelectorAll('#options-form input, select')
     .forEach((el) => el.addEventListener('change', saveOptions))
 document
     .querySelectorAll('[data-bs-toggle="tooltip"]')

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -3,6 +3,7 @@
 import {
     checkPerms,
     injectTab,
+    openURL,
     requestPerms,
     saveOptions,
     updateManifest,
@@ -139,6 +140,7 @@ async function linksForm(event) {
     event.preventDefault()
     const value = event.target.elements['links-text'].value
     // console.debug('value:', value)
+    const { options } = await chrome.storage.sync.get(['options'])
     if (event.submitter.id === 'parse-links') {
         const urls = extractURLs(value)
         // console.debug('urls:', urls)
@@ -149,17 +151,14 @@ async function linksForm(event) {
         const urls = extractURLs(value)
         // console.debug('urls:', urls)
         urls.forEach(function (url) {
-            chrome.tabs.create({ active: false, url })
+            openURL(url.href, options.lazyLoad)
         })
     } else if (event.submitter.id === 'open-text') {
         let text = value.split(/\s+/).filter((s) => s !== '')
         // console.debug('text:', text)
         text.forEach(function (url) {
             // links without a : get prepended the web extension url by default
-            if (!url.includes(':')) {
-                url = `http://${url}`
-            }
-            chrome.tabs.create({ active: false, url })
+            openURL(url, options.lazyLoad)
         })
     } else {
         console.error('Unknown event.submitter:', event.submitter)

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -45,6 +45,7 @@ async function onInstalled(details) {
         setDefaultOptions({
             linksDisplay: -1,
             flags: 'ig',
+            lazyLoad: true,
             removeDuplicates: true,
             defaultFilter: true,
             saveState: true,