On Scroll (#14)

* Minor Updates * Add On Scroll and Update Toggle Site * Tweak Updates
cssnr · Dec 16, 2023 · 8e66007 · 8e66007
1 parent 711cfa7
commit 8e66007
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 95 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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/options.html b/src/html/options.html
@@ -32,7 +32,23 @@ <h1 class="align-middle">Open Links in New Tab</h1>
     <form id="options-form" class="mt-4">
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="autoReload">
-            <label class="form-check-label" for="autoReload" aria-describedby="autoReloadHelp">Auto Reload on Disable</label>
+            <label class="form-check-label" for="autoReload" aria-describedby="autoReloadHelp">
+                Auto Reload on Disable
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-info-circle-fill ms-1" viewBox="0 0 16 16" data-bs-toggle="tooltip"
+                     data-bs-placement="bottom" data-bs-title="Auto Reload Page when Disabling a Site.">
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                </svg>
+            </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
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-info-circle-fill ms-1" viewBox="0 0 16 16" data-bs-toggle="tooltip"
+                     data-bs-placement="bottom" data-bs-title="Update Links after Every Scroll Event on Enabled Pages.">
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                </svg>
+            </label>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="contextMenu">

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -36,7 +36,22 @@
     <form id="options-form" class="mb-3">
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="autoReload">
-            <label class="form-check-label" for="autoReload" aria-describedby="autoReloadHelp">Auto Reload on Disable</label>
+            <label class="form-check-label" for="autoReload" aria-describedby="autoReloadHelp">
+                Auto Reload on Disable
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-info-circle-fill ms-1" viewBox="0 0 16 16" data-bs-toggle="tooltip"
+                     data-bs-placement="bottom" data-bs-title="Auto Reload Page when Disabling a Site.">
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                </svg>
+            </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
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-info-circle-fill ms-1" viewBox="0 0 16 16" data-bs-toggle="tooltip"
+                     data-bs-placement="bottom" data-bs-title="Update Links after Every Scroll Event on Enabled Pages.">
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                </svg>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="contextMenu">

diff --git a/src/js/export.js b/src/js/export.js
@@ -3,51 +3,56 @@
 /**
  * Get URL for Current Tab
  * @function toggleSite
- * @param {URL} url
- * @return {Boolean}
+ * @param {chrome.tabs.Tab} tab
  */
-export async function toggleSite(url) {
+export async function toggleSite(tab) {
+    const url = new URL(tab.url)
+
     console.log(`toggleSite: url.hostname: ${url.hostname}`, url)
-    let added = false
     if (!url?.hostname) {
         return console.log(`No url.hostname: ${url?.hostname}`, url)
     }
     const { sites } = await chrome.storage.sync.get(['sites'])
     if (!sites.includes(url.hostname)) {
         console.log(`Enabling Site: ${url.hostname}`)
         sites.push(url.hostname)
-        added = true
+        await enableSite(tab, 'green')
     } 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)
+    console.log('sites:', sites)
     await chrome.storage.sync.set({ sites })
-    return added
+}
+
+export async function enableSite(tab, color) {
+    console.log(`enableSite: ${color}`, tab)
+    await chrome.scripting.executeScript({
+        target: { tabId: tab.id },
+        args: [color],
+        func: function (color) {
+            activateTab(color)
+        },
+    })
+    console.log('enableSite end')
 }
 
 /**
- * Update Links for Tab
- * @function enableTemp
+ * Reload Tab
+ * @function reloadTab
  * @param {chrome.tabs.Tab} tab
- * @param {String} color
  */
-export async function enableTemp(tab, color = 'yellow') {
-    console.log(`enableTemp: executeScript: tab.id: ${tab.id}`)
+export async function reloadTab(tab) {
     await chrome.scripting.executeScript({
         target: { tabId: tab.id },
         func: function () {
-            updateLinks()
+            window.location.reload()
         },
     })
-    await chrome.action.setBadgeText({
-        tabId: tab.id,
-        text: 'On',
-    })
-    await chrome.action.setBadgeBackgroundColor({
-        tabId: tab.id,
-        color: color,
-    })
 }
 
 /**

diff --git a/src/js/options.js b/src/js/options.js
@@ -15,6 +15,10 @@ document
     .getElementById('options-form')
     .addEventListener('submit', (e) => e.preventDefault())
 
+document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach((el) => new bootstrap.Tooltip(el))
+
 document.querySelectorAll('[data-href]').forEach((el) =>
     el.addEventListener('click', async (e) => {
         console.log('clicked')

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -2,7 +2,7 @@
 
 import {
     checkPerms,
-    enableTemp,
+    enableSite,
     saveOptions,
     toggleSite,
     updateOptions,
@@ -21,6 +21,10 @@ document.getElementById('grant-perms').onclick = grantPermsBtn
 document.getElementById('toggle-site').onclick = toggleSiteClick
 document.getElementById('enable-temp').onclick = enableTempClick
 
+document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach((el) => new bootstrap.Tooltip(el))
+
 /**
  * Initialize Popup
  * TODO: Cleanup this function
@@ -30,9 +34,7 @@ async function initPopup() {
     console.log('initPopup')
     const hasPerms = await checkPerms()
     if (!hasPerms) {
-        document
-            .getElementById('toggle-site-label')
-            .classList.add('visually-hidden')
+        document.getElementById('toggle-site-label').classList.add('d-none')
     }
     const { options, sites } = await chrome.storage.sync.get([
         'options',
@@ -125,24 +127,11 @@ function grantPermsBtn(event) {
  */
 async function toggleSiteClick(event) {
     console.log('toggleSiteBtn:', event)
-    let { options } = await chrome.storage.sync.get(['options'])
-    console.log('options:', options)
+    // let { options } = await chrome.storage.sync.get(['options'])
+    // console.log('options:', options)
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
     console.log('tab:', tab)
-    const added = await toggleSite(new URL(tab.url))
-    if (added) {
-        await chrome.scripting.executeScript({
-            target: { tabId: tab.id },
-            files: ['/js/tab.js'],
-        })
-    } else if (options.autoReload) {
-        await chrome.scripting.executeScript({
-            target: { tabId: tab.id },
-            func: function () {
-                window.location.reload()
-            },
-        })
-    }
+    await toggleSite(tab)
     window.close()
 }
 
@@ -155,6 +144,6 @@ async function enableTempClick(event) {
     console.log('enableTemp:', event)
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
     console.log('tab:', tab)
-    await enableTemp(tab)
+    await enableSite(tab, 'yellow')
     window.close()
 }
diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -1,6 +1,6 @@
 // JS Background Service Worker
 
-import { enableTemp, toggleSite } from './export.js'
+import { enableSite, toggleSite } from './export.js'
 
 chrome.runtime.onInstalled.addListener(onInstalled)
 chrome.contextMenus.onClicked.addListener(onClicked)
@@ -21,6 +21,7 @@ async function onInstalled(details) {
             contextMenu: true,
             showUpdate: false,
             autoReload: true,
+            onScroll: false,
         })
     )
     if (options.contextMenu) {
@@ -61,11 +62,11 @@ async function onClicked(ctx, tab) {
             origins: ['https://*/*', 'http://*/*'],
         })
         if (hasPerms) {
-            await toggleTab(tab)
+            await toggleSite(tab)
         }
     } else if (ctx.menuItemId === 'temp') {
         console.log(`temp: ctx.pageUrl: ${ctx.pageUrl}`)
-        await enableTemp(tab)
+        await enableSite(tab, 'yellow')
     } else if (ctx.menuItemId === 'options') {
         chrome.runtime.openOptionsPage()
     } else {
@@ -87,13 +88,13 @@ async function onCommand(command) {
             origins: ['https://*/*', 'http://*/*'],
         })
         if (hasPerms) {
-            await toggleTab(tab)
+            await toggleSite(tab)
         } else {
             console.log('Missing Permissions. Use Popup First!')
         }
     } else if (command === 'enable-temp') {
         console.log('enable-temp', tab)
-        await enableTemp(tab)
+        await enableSite(tab, 'yellow')
     } else {
         console.error(`Unknown command: ${command}`)
     }
@@ -106,18 +107,25 @@ async function onCommand(command) {
  * @param {MessageSender} sender
  */
 async function onMessage(message, sender) {
-    // console.log('message:', message)
-    if (message?.badgeText) {
-        console.log(`tabId: ${sender.tab.id}, text: ${message.badgeText}`)
-        await chrome.action.setBadgeText({
-            tabId: sender.tab.id,
-            text: message.badgeText,
-        })
+    console.log('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])) {
         await chrome.action.setBadgeBackgroundColor({
-            tabId: sender.tab.id,
-            color: 'green',
+            tabId: tabId,
+            color: color,
         })
     }
+    await chrome.action.setBadgeText({
+        tabId: tabId,
+        text: text,
+    })
 }
 
 /**
@@ -154,8 +162,7 @@ async function setDefaultOptions(defaultOptions) {
     let { options, sites } = await chrome.storage.sync.get(['options', 'sites'])
     options = options || {}
     if (!sites) {
-        sites = []
-        await chrome.storage.sync.set({ sites })
+        await chrome.storage.sync.set({ sites: [] })
     }
     console.log('options, sites:', options, sites)
     let changed = false
@@ -194,26 +201,3 @@ export function createContextMenus() {
         })
     })
 }
-
-/**
- * Toggle Tab
- * @function toggleTab
- * @param {chrome.tabs.Tab} tab
- */
-async function toggleTab(tab) {
-    const added = await toggleSite(new URL(tab.url))
-    console.log(`added: ${added}`)
-    if (added) {
-        await enableTemp(tab, 'green')
-    } else {
-        const { options } = await chrome.storage.sync.get(['options'])
-        if (options.autoReload) {
-            await chrome.scripting.executeScript({
-                target: { tabId: tab.id },
-                func: function () {
-                    window.location.reload()
-                },
-            })
-        }
-    }
-}