Updates (#20)

* Updates * Fix Tab Colors and Update Logging * Add Option for Update All
cssnr · Dec 27, 2023 · 3ff728d · 3ff728d
1 parent 8a39e14
commit 3ff728d
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = [