From 3ff728d0fc3ea37702001823c27563d154ffcbf7 Mon Sep 17 00:00:00 2001
From: SmAsHeD <6071159+smashedr@users.noreply.github.com>
Date: Wed, 27 Dec 2023 00:53:16 -0800
Subject: [PATCH] Updates (#20)

* Updates

* Fix Tab Colors and Update Logging

* Add Option for Update All
---
 manifest.json            |  2 +-
 src/html/oninstall.html  |  5 +--
 src/html/options.html    | 12 +++++++-
 src/html/popup.html      | 18 ++++++++---
 src/js/export.js         | 18 -----------
 src/js/options.js        |  5 +--
 src/js/popup.js          |  8 ++---
 src/js/service-worker.js | 43 +++++++++++++-------------
 src/js/tab.js            | 66 ++++++++++++++++++++++++++++++++--------
 9 files changed, 107 insertions(+), 70 deletions(-)
diff --git a/manifest.json b/manifest.json
index 6d9fa36..6775d61 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "name": "Open Links in New Tab",
   "description": "Modern Web Extension to Open Links in New Tabs for Specified Domains or Temporarily on Any Tab.",
   "homepage_url": "https://github.com/cssnr/open-links-in-new-tab",
diff --git a/src/html/oninstall.html b/src/html/oninstall.html
index 7a5161c..94625b2 100644
--- a/src/html/oninstall.html
+++ b/src/html/oninstall.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en" class="h-100">
 <head>
+    <meta charset="utf-8">
     <title>Open Links in New Tab</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -22,7 +23,7 @@ <h1>Welcome</h1>
     <div class="d-none grant-perms">
         <p class="lead">To always open links in new tabs for sites you toggle on, permissions to run on all hosts are needed.</p>
         <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-3" role="button">
-            <i class="fa-solid fa-check-double me-1"></i> Grant Host Permissions</a>
+            <i class="fa-solid fa-check-double me-2"></i> Grant Host Permissions</a>
     </div>
     <p>
         This web extension injects the
@@ -31,7 +32,7 @@ <h1>Welcome</h1>
         If so, it sets all links to open in a new tab.
     </p>
     <a id="open-options" class="btn btn-lg btn-outline-info w-100 mb-3" role="button" href="../html/options.html">
-        <i class="fa-solid fa-sliders me-1"></i> Open Options</a>
+        <i class="fa-solid fa-sliders me-2"></i> Open Options</a>
     <hr>
     <div class="text-center">
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
diff --git a/src/html/options.html b/src/html/options.html
index 2542768..a190b24 100644
--- a/src/html/options.html
+++ b/src/html/options.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Open Links in New Tab</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -60,6 +61,15 @@ <h1>Open Links in New Tab</h1>
                 </span>
             </label>
         </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="updateAll">
+            <label class="form-check-label" for="updateAll" aria-describedby="updateAllHelp">
+                Update All Tabs on Change
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update All Tabs After Enabling or Disabling.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
@@ -82,7 +92,7 @@ <h1>Open Links in New Tab</h1>
 
     <div class="d-none grant-perms">
         <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-1" role="button">
-            <i class="fa-solid fa-check-double me-1"></i> Grant Host Permissions</a>
+            <i class="fa-solid fa-check-double me-2"></i> Grant Host Permissions</a>
         <p class="text-center"><a role="button" class="open-oninstall" href="../html/oninstall.html">
             More Information on Permissions</a></p>
     </div>
diff --git a/src/html/popup.html b/src/html/popup.html
index 5bd5be0..d0b7334 100644
--- a/src/html/popup.html
+++ b/src/html/popup.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>Open Links in New Tab</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
@@ -23,14 +24,14 @@
             <p class="mb-1 text-center text-break small mb-2">
                 <kbd id="site-hostname">Invalid Site</kbd>
             </p>
-            <div class="form-check form-switch m-auto d-flex justify-content-center fs-5">
-                <input class="form-check-input me-3" type="checkbox" role="switch" id="toggle-site" disabled>
+            <div class="form-check form-switch form-select-lg m-auto d-flex justify-content-center">
+                <input class="form-check-input me-3" type="checkbox" role="switch" id="toggle-site" style="margin-top: 0.4em;" disabled>
                 Open Links in New Tab
             </div>
         </div>
     </label>
     <a id="enable-temp" class="btn btn-outline-warning btn-sm w-100 disabled" role="button">
-        <i class="fa-solid fa-stopwatch me-1"></i> Enable Temporarily</a>
+        <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">
@@ -51,6 +52,15 @@
                 </span>
             </label>
         </div>
+        <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" role="switch" id="updateAll">
+            <label class="form-check-label" for="updateAll" aria-describedby="updateAllHelp">
+                Update All Tabs on Change
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update All Tabs After Enabling or Disabling.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
         <div class="form-check form-switch">
             <input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
@@ -63,7 +73,7 @@
     </form>
     <div class="d-grid g-2 gap-2 my-2">
         <a class="btn btn-outline-info btn-sm " role="button" href="../html/options.html">
-            <i class="fa-solid fa-sliders me-1"></i> Open Options</a>
+            <i class="fa-solid fa-sliders me-2"></i> Open Options</a>
     </div>
     <hr>
     <div class="d-flex justify-content-center align-items-center text-center small">
diff --git a/src/js/export.js b/src/js/export.js
index 7d0cebe..d6b4dda 100644
--- a/src/js/export.js
+++ b/src/js/export.js
@@ -20,10 +20,6 @@ export async function toggleSite(tab) {
     } else {
         console.log(`Disabling Site: ${url.hostname}`)
         sites.splice(sites.indexOf(url.hostname), 1)
-        const { options } = await chrome.storage.sync.get(['options'])
-        if (options.autoReload) {
-            await reloadTab(tab)
-        }
     }
     console.log('sites:', sites)
     await chrome.storage.sync.set({ sites })
@@ -40,20 +36,6 @@ export async function enableSite(tab, color) {
     })
 }
 
-/**
- * Reload Tab
- * @function reloadTab
- * @param {chrome.tabs.Tab} tab
- */
-export async function reloadTab(tab) {
-    await chrome.scripting.executeScript({
-        target: { tabId: tab.id },
-        func: function () {
-            window.location.reload()
-        },
-    })
-}
-
 /**
  * Check Host Permissions
  * @function checkPerms
diff --git a/src/js/options.js b/src/js/options.js
index 2c56ded..447d853 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -2,12 +2,9 @@
 
 import { checkPerms, saveOptions, updateOptions } from './export.js'
 
-document.addEventListener('DOMContentLoaded', initOptions)
-
 chrome.storage.onChanged.addListener(onChanged)
-
+document.addEventListener('DOMContentLoaded', initOptions)
 document.getElementById('grant-perms').addEventListener('click', grantPerms)
-
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
diff --git a/src/js/popup.js b/src/js/popup.js
index 8f8f9a8..0298dba 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -9,7 +9,9 @@ import {
 } from './export.js'
 
 document.addEventListener('DOMContentLoaded', initPopup)
-
+document.getElementById('grant-perms').onclick = grantPerms
+document.getElementById('toggle-site').onclick = toggleSiteClick
+document.getElementById('enable-temp').onclick = enableTempClick
 document
     .querySelectorAll('a[href]')
     .forEach((el) => el.addEventListener('click', popupLinks))
@@ -20,10 +22,6 @@ document
     .querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach((el) => new bootstrap.Tooltip(el))
 
-document.getElementById('grant-perms').onclick = grantPerms
-document.getElementById('toggle-site').onclick = toggleSiteClick
-document.getElementById('enable-temp').onclick = enableTempClick
-
 /**
  * Initialize Popup
  * TODO: Cleanup this function
diff --git a/src/js/service-worker.js b/src/js/service-worker.js
index 70b02c5..d60e636 100644
--- a/src/js/service-worker.js
+++ b/src/js/service-worker.js
@@ -18,10 +18,11 @@ async function onInstalled(details) {
     const githubURL = 'https://github.com/cssnr/open-links-in-new-tab'
     const options = await Promise.resolve(
         setDefaultOptions({
-            contextMenu: true,
-            showUpdate: false,
             autoReload: true,
             onScroll: false,
+            updateAll: true,
+            contextMenu: true,
+            showUpdate: false,
         })
     )
     if (options.contextMenu) {
@@ -57,10 +58,10 @@ async function onInstalled(details) {
  * @param {chrome.tabs.Tab} tab
  */
 async function onClicked(ctx, tab) {
-    console.log('contextMenuClick:', ctx, tab)
+    console.debug('contextMenuClick:', ctx, tab)
     console.log(`ctx.menuItemId: ${ctx.menuItemId}`)
     if (ctx.menuItemId === 'toggle') {
-        console.log(`toggle: ctx.pageUrl: ${ctx.pageUrl}`)
+        console.debug(`toggle: ctx.pageUrl: ${ctx.pageUrl}`)
         chrome.permissions.request({
             origins: ['https://*/*', 'http://*/*'],
         })
@@ -71,7 +72,7 @@ async function onClicked(ctx, tab) {
             await toggleSite(tab)
         }
     } else if (ctx.menuItemId === 'temp') {
-        console.log(`temp: ctx.pageUrl: ${ctx.pageUrl}`)
+        console.debug(`temp: ctx.pageUrl: ${ctx.pageUrl}`)
         await enableSite(tab, 'yellow')
     } else if (ctx.menuItemId === 'options') {
         chrome.runtime.openOptionsPage()
@@ -86,20 +87,20 @@ async function onClicked(ctx, tab) {
  * @param {String} command
  */
 async function onCommand(command) {
-    console.log(`onCommand: ${command}`)
+    console.debug(`onCommand: ${command}`)
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
     if (command === 'toggle-site') {
-        console.log('toggle-site')
+        console.debug('toggle-site')
         const hasPerms = await chrome.permissions.contains({
             origins: ['https://*/*', 'http://*/*'],
         })
         if (hasPerms) {
             await toggleSite(tab)
         } else {
-            console.log('Missing Permissions. Use Popup First!')
+            console.info('Missing Permissions. Use Popup First!')
         }
     } else if (command === 'enable-temp') {
-        console.log('enable-temp', tab)
+        console.debug('enable-temp', tab)
         await enableSite(tab, 'yellow')
     } else {
         console.error(`Unknown command: ${command}`)
@@ -113,25 +114,23 @@ async function onCommand(command) {
  * @param {MessageSender} sender
  */
 async function onMessage(message, sender) {
-    console.log('message, sender:', message, sender)
+    console.debug('message, sender:', message, sender)
     const tabId = message.tabId || sender.tab.id
     const text = message.badgeText
     const color = message.badgeColor
-    console.log(`tabId: ${tabId}, text: ${text}, color: ${color}`)
-    const bgColor = await chrome.action.getBadgeBackgroundColor({
-        tabId: tabId,
-    })
-    const bgJson = JSON.stringify(bgColor)
-    if (bgJson !== JSON.stringify([0, 128, 0, 255])) {
+    console.debug(`tabId: ${tabId}, text: ${text}, color: ${color}`)
+    if (color) {
         await chrome.action.setBadgeBackgroundColor({
             tabId: tabId,
             color: color,
         })
     }
-    await chrome.action.setBadgeText({
-        tabId: tabId,
-        text: text,
-    })
+    if (text) {
+        await chrome.action.setBadgeText({
+            tabId: tabId,
+            text: text,
+        })
+    }
 }
 
 /**
@@ -141,7 +140,7 @@ async function onMessage(message, sender) {
  * @param {String} namespace
  */
 function onChanged(changes, namespace) {
-    // console.log('onChanged:', changes, namespace)
+    // console.debug('onChanged:', changes, namespace)
     for (const [key, { oldValue, newValue }] of Object.entries(changes)) {
         if (namespace === 'sync' && key === 'options' && oldValue && newValue) {
             if (oldValue.contextMenu !== newValue.contextMenu) {
@@ -191,7 +190,7 @@ async function setDefaultOptions(defaultOptions) {
  * @function createContextMenus
  */
 export function createContextMenus() {
-    console.log('createContextMenus')
+    console.debug('createContextMenus')
     chrome.contextMenus.removeAll()
     const ctx = ['all']
     const contexts = [
diff --git a/src/js/tab.js b/src/js/tab.js
index 008faac..4e68745 100644
--- a/src/js/tab.js
+++ b/src/js/tab.js
@@ -1,12 +1,19 @@
 // JS Content Script tab.js
 
 ;(async () => {
-    const { sites } = await chrome.storage.sync.get(['sites'])
-    // console.log(`sites: ${window.location.host}`, sites)
+    const { options, sites } = await chrome.storage.sync.get([
+        'options',
+        'sites',
+    ])
+    console.debug(`sites: ${window.location.host}`, sites)
     if (sites?.includes(window.location.host)) {
         console.log(`Enabled Host: ${window.location.host}`)
         await activateTab('green')
     }
+    if (options.updateAll && !chrome.storage.onChanged.hasListener(onChanged)) {
+        console.log('Adding onChanged Listener')
+        chrome.storage.onChanged.addListener(onChanged)
+    }
 })()
 
 let tabEnabled = false
@@ -14,19 +21,20 @@ let tabEnabled = false
 /**
  * Activate Tab
  * @function activateTab
+ * @param {String} color
  */
 async function activateTab(color) {
     // await chrome.runtime.sendMessage({ badgeText: 'On' })
-    console.log(`activateTab: color: ${color}`)
+    console.debug(`activateTab: color: ${color}`)
     await chrome.runtime.sendMessage({
         badgeText: 'On',
         badgeColor: color,
     })
     if (tabEnabled) {
-        return console.log('Tab Already Enabled...')
+        return console.info('Tab Already Enabled!')
     }
+    console.info('Activating Tab...')
     tabEnabled = true
-    console.log('Activating Tab...')
     updateLinks()
     const observer = new MutationObserver(function () {
         updateLinks()
@@ -38,7 +46,7 @@ async function activateTab(color) {
     })
     const { options } = await chrome.storage.sync.get(['options'])
     if (options.onScroll) {
-        console.log('onScroll Enabled')
+        console.debug('Enabling onScroll...')
         const processChange = debounce(() => updateLinks())
         document.addEventListener('scroll', processChange)
     }
@@ -59,18 +67,50 @@ function updateLinks() {
     }
 }
 
+/**
+ * On Changed Callback
+ * @function onChanged
+ * @param {Object} changes
+ * @param {String} namespace
+ */
+async function onChanged(changes, namespace) {
+    console.debug('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}`)
+                const { options } = await chrome.storage.sync.get(['options'])
+                if (options.autoReload) {
+                    window.location.reload()
+                } else {
+                    await chrome.runtime.sendMessage({
+                        badgeColor: 'red',
+                    })
+                    tabEnabled = false
+                }
+            }
+        }
+    }
+}
+
 /**
  * DeBounce Function
  * @function debounce
- * @param {Function} func
+ * @param {Function} fn
  * @param {Number} timeout
  */
-function debounce(func, timeout = 300) {
-    let timer
+function debounce(fn, timeout = 300) {
+    let timeoutID
     return (...args) => {
-        clearTimeout(timer)
-        timer = setTimeout(() => {
-            func.apply(this, args)
-        }, timeout)
+        clearTimeout(timeoutID)
+        timeoutID = setTimeout(() => fn(...args), timeout)
     }
 }
