Add Open in Background Option (#34)

* Add Open in Background Option * Update Options Handling * Cleanup * Update README.md
cssnr · Aug 5, 2024 · 31c2cbc · 31c2cbc
1 parent 66b85f2
commit 31c2cbc
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,7 @@ Modern Chrome Web Extension and Firefox Browser Addon to Open Links in New Tabs
 
 *   [Install](#install)
 *   [Features](#features)
+    -   [Upcoming Features](#Upcoming-Features)
 *   [Known Issues](#known-issues)
 *   [Configuration](#configuration)
 *   [Support](#support)
@@ -35,7 +36,6 @@ Modern Chrome Web Extension and Firefox Browser Addon to Open Links in New Tabs
 [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)](https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc)
 [![Chromium](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium_48x48.png)](https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc)
 [![Brave](https://raw.githubusercontent.com/alrra/browser-logos/main/src/brave/brave_48x48.png)](https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc)
-[![Vivaldi](https://raw.githubusercontent.com/alrra/browser-logos/main/src/vivaldi/vivaldi_48x48.png)](https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc)
 [![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png)](https://chromewebstore.google.com/detail/open-links-in-new-tab/efahmjakjnnmleokcaomicgfhobabdkc)
 
 All **Chromium** Based Browsers can install the extension from the
@@ -48,12 +48,14 @@ For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssn
 
 *   Toggle Sites to Always Open Links in New Tabs
 *   Temporarily Open All Links in New Tabs for Current Site
+*   Option to Open Links in the Background
 *   Update on Scroll Option to Always Update Links
+*   Update on Any Attributes Changes and New Links
 *   Options Page to View and Edit Toggled Sites and More
 *   Automatic Dark/Light Mode based on Browser Setting
 *   Activate from Icon, Context Menu, or Keyboard Shortcuts
 
-### Planned Upcoming Features
+### Upcoming Features
 
 *   Enable for Specific URL Only
 *   Enable for Matching Regex URL Only
@@ -68,8 +70,8 @@ For any issues, bugs or concerns; please [Open an Issue](https://github.com/cssn
 
 ## Known Issues
 
-*    Does not work on sites that use JavaScript events to handle links
-     -   `search.yahoo.com`
+*    Does not work on some sites that use JavaScript events to handle links.
+     -   Many of these sites should be fixed when v3 is released.
 
 > [!TIP]
 > **Don't see your issue here?**

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/html/options.html b/src/html/options.html
@@ -38,8 +38,9 @@ <h1>Open Links in New Tab</h1>
     </table>
     <hr>
     <p>
-        For more information on options,
-        <a href="https://open-links-in-new-tab.cssnr.com/docs/#options" target="_blank" rel="noopener">read the documentation</a>.
+        For more information on options
+        <a href="https://open-links-in-new-tab.cssnr.com/docs/#options" target="_blank" rel="noopener">read the docs
+            <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
     </p>
     <div class="d-none grant-perms">
         <button class="btn btn-lg btn-success w-100 mb-3 grant-permissions" type="button"
@@ -52,10 +53,25 @@ <h1>Open Links in New Tab</h1>
     </div>
 
     <form id="options-form" class="mb-3">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="openBackground">
+            <label class="form-check-label" for="openBackground" aria-describedby="openBackgroundHelp">
+                Open Links in Background
+                <span class="text-warning-emphasis me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Experimental Feature.">
+                    <i class="fa-solid fa-flask ms-1"></i>
+                </span>
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Open Updated Links in the Background.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="onScroll">
             <label class="form-check-label" for="onScroll" aria-describedby="onScrollHelp">
                 Update Links On Scroll
+                <span class="text-warning-emphasis me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Experimental Feature.">
+                    <i class="fa-solid fa-flask ms-1"></i>
+                </span>
                 <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update Links after Every Scroll Event.">
                     <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -36,10 +36,25 @@
         <i class="fa-solid fa-stopwatch me-2"></i> Enable Temporarily</a>
     <hr>
     <form id="options-form" class="mb-3">
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="openBackground">
+            <label class="form-check-label" for="openBackground" aria-describedby="openBackgroundHelp">
+                Open Links in Background
+                <span class="text-warning-emphasis me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Experimental Feature.">
+                    <i class="fa-solid fa-flask ms-1"></i>
+                </span>
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Open Updated Links in the Background.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="onScroll">
             <label class="form-check-label" for="onScroll" aria-describedby="onScrollHelp">
                 Update Links On Scroll
+                <span class="text-warning-emphasis me-1" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Experimental Feature.">
+                    <i class="fa-solid fa-flask ms-1"></i>
+                </span>
                 <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update Links after Every Scroll Event.">
                     <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>

diff --git a/src/js/options.js b/src/js/options.js
@@ -174,8 +174,7 @@ async function addHost(event) {
 async function deleteHost(event) {
     console.debug('deleteHost:', event)
     event.preventDefault()
-    const anchor = event.target.closest('a')
-    const host = anchor?.dataset?.value
+    const host = event.currentTarget?.dataset?.value
     console.info(`Delete Host: ${host}`)
     const { sites } = await chrome.storage.sync.get(['sites'])
     // console.debug('sites:', sites)
@@ -202,7 +201,7 @@ async function exportHosts(event) {
     if (!sites) {
         return showToast('No Hosts Found!', 'warning')
     }
-    const json = JSON.stringify(sites)
+    const json = JSON.stringify(sites, null, 2)
     textFileDownload('open-in-tab-sites.txt', json)
 }
 

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -82,8 +82,7 @@ async function initPopup() {
 async function popupLinks(event) {
     console.debug('popupLinks:', event)
     event.preventDefault()
-    const anchor = event.target.closest('a')
-    const href = anchor.getAttribute('href').replace(/^\.+/g, '')
+    const href = event.currentTarget.getAttribute('href').replace(/^\.+/g, '')
     console.debug('href:', href)
     let url
     if (href.endsWith('html/options.html')) {

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -33,10 +33,13 @@ async function onStartup() {
 async function onInstalled(details) {
     console.log('onInstalled:', details)
     const githubURL = 'https://github.com/cssnr/open-links-in-new-tab'
+    const installURL =
+        'https://open-links-in-new-tab.cssnr.com/docs/?install=new'
     const uninstallURL = new URL(
         'https://open-links-in-new-tab.cssnr.com/uninstall/'
     )
     const options = await setDefaultOptions({
+        openBackground: false,
         onScroll: false,
         onAttributes: false,
         anchorLinks: false,
@@ -58,6 +61,7 @@ async function onInstalled(details) {
             const url = chrome.runtime.getURL('/html/oninstall.html')
             await chrome.tabs.create({ active: true, url })
         }
+        await chrome.tabs.create({ active: false, url: installURL })
     } else if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
         if (options.showUpdate) {
             if (manifest.version !== details.previousVersion) {

diff --git a/src/js/tab.js b/src/js/tab.js
@@ -4,17 +4,21 @@ const contentScript = true // eslint-disable-line no-unused-vars
 let tabEnabled = false
 let options = {}
 
+if (!chrome.storage.onChanged.hasListener(onChanged)) {
+    // console.debug('Adding storage.onChanged Listener')
+    chrome.storage.onChanged.addListener(onChanged)
+}
+
 ;(async () => {
     let data = await chrome.storage.sync.get(['options', 'sites'])
     options = data.options
     if (data.sites?.includes(window.location.host)) {
         console.log(`Enabled Host: ${window.location.host}`)
         await activateTab('green')
     }
-    // TODO: Always enable onChanged and refactor to work with options.updateAll
-    if (options.updateAll && !chrome.storage.onChanged.hasListener(onChanged)) {
-        chrome.storage.onChanged.addListener(onChanged)
-    }
+    // if (options.updateAll && !chrome.storage.onChanged.hasListener(onChanged)) {
+    //     chrome.storage.onChanged.addListener(onChanged)
+    // }
 })()
 
 /**
@@ -58,6 +62,7 @@ function updateLinks() {
     const elements = document.getElementsByTagName('a')
     for (const element of elements) {
         if (element.href !== '#') {
+            element.addEventListener('click', clickLink)
             if (!options.anchorLinks && element.href.includes('#')) {
                 const url = new URL(element.href)
                 if (url.origin === window.location.origin) {
@@ -74,6 +79,29 @@ function updateLinks() {
     }
 }
 
+/**
+ * New Click Handler for Updated Links
+ * TODO: Move All Options Here
+ * @function clickLink
+ * @param event
+ */
+function clickLink(event) {
+    console.debug('clickLink:', event)
+    if (event.handled) {
+        return console.debug('preventing recursion')
+    }
+    if (options.openBackground) {
+        event.preventDefault()
+        console.log('debug:', event.currentTarget)
+        const e = new MouseEvent('click', {
+            ctrlKey: true,
+            metaKey: true,
+        })
+        e.handled = true
+        event.currentTarget.dispatchEvent(e)
+    }
+}
+
 /**
  * On Changed Callback
  * @function onChanged
@@ -85,30 +113,44 @@ async function onChanged(changes, namespace) {
     for (let [key, { newValue }] of Object.entries(changes)) {
         if (namespace === 'sync' && key === 'sites') {
             // console.debug('newValue:', newValue)
-            if (newValue?.includes(window.location.host)) {
-                if (!tabEnabled) {
-                    console.log(`Enabling: ${window.location.host}`)
-                    await activateTab('green')
-                } else {
-                    await chrome.runtime.sendMessage({ badgeColor: 'green' })
-                }
-            } else if (tabEnabled) {
-                console.log(`Disabling: ${window.location.host}`)
-                if (options.autoReload) {
-                    window.location.reload()
-                } else {
-                    await chrome.runtime.sendMessage({
-                        badgeColor: 'red',
-                    })
-                    tabEnabled = false
-                }
+            if (options.updateAll) {
+                await processSitesUpdate(newValue)
             }
         } else if (namespace === 'sync' && key === 'options') {
             options = newValue
         }
     }
 }
 
+/**
+ * Process Sites Changes if Update ALl is Enabled
+ * @function processSitesUpdate
+ * @param sites
+ * @return {Promise<void>}
+ */
+async function processSitesUpdate(sites) {
+    if (sites?.includes(window.location.host)) {
+        if (!tabEnabled) {
+            console.log(`Enabling: ${window.location.host}`)
+            await activateTab('green')
+        } else {
+            await chrome.runtime.sendMessage({
+                badgeColor: 'green',
+            })
+        }
+    } else if (tabEnabled) {
+        console.log(`Disabling: ${window.location.host}`)
+        if (options.autoReload) {
+            window.location.reload()
+        } else {
+            await chrome.runtime.sendMessage({
+                badgeColor: 'red',
+            })
+            tabEnabled = false
+        }
+    }
+}
+
 /**
  * DeBounce Function
  * @function debounce