Updates (#21)

* Update Logging * Add Add Host Option
cssnr · Jan 4, 2024 · 8c6bca1 · 8c6bca1
1 parent 3ff728d
commit 8c6bca1
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 42 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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
@@ -97,6 +97,16 @@ <h1>Open Links in New Tab</h1>
             More Information on Permissions</a></p>
     </div>
 
+    <form id="add-host">
+        <label class="form-label" for="add-filter"><i class="fa-solid fa-globe me-2"></i> Hosts</label>
+        <div class="input-group mb-3">
+            <input type="text" class="form-control" placeholder="Add Host" aria-label="Filter" id="add-filter" aria-describedby="add-host-btn" required>
+            <button class="btn btn-outline-success" type="submit" id="add-host-btn">
+                Add <i class="fa-solid fa-plus ms-1"></i>
+            </button>
+        </div>
+    </form>
+
     <table id="hosts-table" class="table table-sm table-hover bg-transparent">
         <caption>Enabled Hosts</caption>
         <thead><tr>
@@ -123,11 +133,18 @@ <h1>Open Links in New Tab</h1>
 </div> <!-- row -->
 </div> <!-- container -->
 
+<div aria-live="polite" aria-atomic="true" class="">
+    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+</div>
+
 <div class="d-none">
     <i class="fa-regular fa-trash-can"></i>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-dot" viewBox="0 0 16 16">
         <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
     </svg>
+    <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
+        <div class="toast-body"></div>
+    </div>
 </div>
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>

diff --git a/src/js/export.js b/src/js/export.js
@@ -7,10 +7,9 @@
  */
 export async function toggleSite(tab) {
     const url = new URL(tab.url)
-
-    console.log(`toggleSite: url.hostname: ${url.hostname}`, url)
+    console.debug(`toggleSite: url.hostname: ${url?.hostname}`, url)
     if (!url?.hostname) {
-        return console.log(`No url.hostname: ${url?.hostname}`, url)
+        return console.warn(`No url.hostname: ${url?.hostname}`, url)
     }
     const { sites } = await chrome.storage.sync.get(['sites'])
     if (!sites.includes(url.hostname)) {
@@ -21,12 +20,12 @@ export async function toggleSite(tab) {
         console.log(`Disabling Site: ${url.hostname}`)
         sites.splice(sites.indexOf(url.hostname), 1)
     }
-    console.log('sites:', sites)
+    console.debug('sites:', sites)
     await chrome.storage.sync.set({ sites })
 }
 
 export async function enableSite(tab, color) {
-    console.log(`enableSite: ${color}`, tab)
+    console.debug(`enableSite: ${color}`, tab)
     await chrome.scripting.executeScript({
         target: { tabId: tab.id },
         args: [color],
@@ -47,7 +46,7 @@ export async function checkPerms() {
     const hasPerms = await chrome.permissions.contains({
         origins: ['https://*/*', 'http://*/*'],
     })
-    // console.log('checkPerms:', hasPerms)
+    // console.debug('checkPerms:', hasPerms)
     if (hasPerms) {
         hasPermsEl.forEach((el) => el.classList.remove('d-none'))
         grantPermsEl.forEach((el) => el.classList.add('d-none'))
@@ -64,7 +63,7 @@ export async function checkPerms() {
  * @param {InputEvent} event
  */
 export async function saveOptions(event) {
-    console.log('saveOptions:', event)
+    console.debug('saveOptions:', event)
     const { options } = await chrome.storage.sync.get(['options'])
     let value
     if (event.target.type === 'checkbox') {
@@ -74,7 +73,7 @@ export async function saveOptions(event) {
     }
     if (value !== undefined) {
         options[event.target.id] = value
-        console.log(`Set: ${event.target.id}:`, value)
+        console.info(`Set: ${event.target.id}:`, value)
         await chrome.storage.sync.set({ options })
     }
 }
@@ -86,7 +85,7 @@ export async function saveOptions(event) {
  */
 export function updateOptions(options) {
     for (const [key, value] of Object.entries(options)) {
-        // console.log(`${key}: ${value}`)
+        // console.debug(`${key}: ${value}`)
         const el = document.getElementById(key)
         if (el) {
             if (typeof value === 'boolean') {
@@ -97,3 +96,20 @@ export function updateOptions(options) {
         }
     }
 }
+
+/**
+ * Show Bootstrap Toast
+ * @function showToast
+ * @param {String} message
+ * @param {String} type
+ */
+export function showToast(message, type = 'success') {
+    console.log(`showToast: ${type}:`, message)
+    const element = document.querySelector('.d-none .toast').cloneNode(true)
+    element.addEventListener('mousemove', () => toast.hide())
+    element.classList.add(`text-bg-${type}`)
+    element.querySelector('.toast-body').innerHTML = message
+    document.getElementById('toast-container').appendChild(element)
+    const toast = new bootstrap.Toast(element)
+    toast.show()
+}
diff --git a/src/js/oninstall.js b/src/js/oninstall.js
@@ -11,7 +11,6 @@ document.getElementById('open-options').addEventListener('click', openOptions)
  * @function domContentLoaded
  */
 async function domContentLoaded() {
-    console.log('DOMContentLoaded')
     await checkPerms()
 }
 
@@ -21,7 +20,7 @@ async function domContentLoaded() {
  * @param {MouseEvent} event
  */
 async function grantPerms(event) {
-    console.log('grantPerms:', event)
+    console.debug('grantPerms:', event)
     await chrome.permissions.request({
         origins: ['https://*/*', 'http://*/*'],
     })
@@ -38,7 +37,7 @@ async function grantPerms(event) {
  * @param {MouseEvent} event
  */
 function openOptions(event) {
-    console.log('openOptions:', event)
+    console.debug('openOptions:', event)
     event.preventDefault()
     chrome.runtime.openOptionsPage()
     window.close()

diff --git a/src/js/options.js b/src/js/options.js
@@ -1,10 +1,11 @@
 // JS for options.html
 
-import { checkPerms, saveOptions, updateOptions } from './export.js'
+import { checkPerms, saveOptions, showToast, updateOptions } from './export.js'
 
 chrome.storage.onChanged.addListener(onChanged)
 document.addEventListener('DOMContentLoaded', initOptions)
 document.getElementById('grant-perms').addEventListener('click', grantPerms)
+document.getElementById('add-host').addEventListener('submit', addHost)
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
@@ -23,7 +24,7 @@ document
  * @function initOptions
  */
 async function initOptions() {
-    console.log('initOptions')
+    console.debug('initOptions')
     document.getElementById('version').textContent =
         chrome.runtime.getManifest().version
 
@@ -37,7 +38,7 @@ async function initOptions() {
         'options',
         'sites',
     ])
-    console.log('options, sites:', options, sites)
+    console.debug('options, sites:', options, sites)
     updateOptions(options)
     updateTable(sites)
     await checkPerms()
@@ -50,7 +51,7 @@ async function initOptions() {
  * @param {String} namespace
  */
 function onChanged(changes, namespace) {
-    // console.log('onChanged:', changes, namespace)
+    // console.debug('onChanged:', changes, namespace)
     for (let [key, { newValue }] of Object.entries(changes)) {
         if (namespace === 'sync' && key === 'options') {
             updateOptions(newValue)
@@ -67,7 +68,7 @@ function onChanged(changes, namespace) {
  * @param {MouseEvent} event
  */
 async function grantPerms(event) {
-    console.log('grantPermsBtn:', event)
+    console.debug('grantPermsBtn:', event)
     await chrome.permissions.request({
         origins: ['https://*/*', 'http://*/*'],
     })
@@ -80,7 +81,7 @@ async function grantPerms(event) {
  * @param {MouseEvent} event
  */
 async function openOnInstall(event) {
-    console.log('openOnInstall', event)
+    console.debug('openOnInstall', event)
     const url = chrome.runtime.getURL('../html/oninstall.html')
     await chrome.tabs.create({ active: true, url })
     window.close()
@@ -124,22 +125,60 @@ function updateTable(data) {
     })
 }
 
+/**
+ * Add Host Callback
+ * @function addHost
+ * @param {SubmitEvent} event
+ */
+async function addHost(event) {
+    console.debug('addHost:', event.target)
+    event.preventDefault()
+    const input = event.target.elements['add-filter']
+    let value = input.value.toString()
+    if (!value.includes('://')) {
+        value = `http://${value}`
+    }
+    let url
+    try {
+        url = new URL(value)
+    } catch (e) {
+        showToast(e.message, 'danger')
+        input.focus()
+        input.select()
+        return console.info(e)
+    }
+    console.log('url:', url)
+    const { sites } = await chrome.storage.sync.get(['sites'])
+    if (sites.includes(url.hostname)) {
+        showToast(`Host Exists: ${url.hostname}`, 'warning')
+        input.focus()
+        input.select()
+        return console.info('Existing Host: url:', url)
+    } else {
+        sites.push(url.hostname)
+        await chrome.storage.sync.set({ sites })
+        showToast(`Added Host: ${url.hostname}`)
+        console.log(`Added Host: ${url.hostname}`, url)
+    }
+    // console.debug('sites:', sites)
+}
+
 /**
  * Delete Host
  * @function deleteHost
  * @param {MouseEvent} event
  */
 async function deleteHost(event) {
+    console.debug('deleteHost:', event)
     event.preventDefault()
-    console.log('deleteHost:', event)
     const anchor = event.target.closest('a')
     const host = anchor?.dataset?.value
-    console.log(`host: ${host}`)
+    console.info(`Delete Host: ${host}`)
     const { sites } = await chrome.storage.sync.get(['sites'])
-    // console.log('sites:', sites)
+    // console.debug('sites:', sites)
     if (host && sites.includes(host)) {
         const index = sites.indexOf(host)
-        // console.log(`index: ${index}`)
+        // console.debug(`index: ${index}`)
         if (index !== undefined) {
             sites.splice(index, 1)
             await chrome.storage.sync.set({ sites })
@@ -155,10 +194,10 @@ async function deleteHost(event) {
 async function setShortcuts(mapping) {
     const commands = await chrome.commands.getAll()
     for (const [elementID, name] of Object.entries(mapping)) {
-        // console.log(`${elementID}: ${name}`)
+        // console.debug(`${elementID}: ${name}`)
         const command = commands.find((x) => x.name === name)
         if (command?.shortcut) {
-            // console.log(`${elementID}: ${command.shortcut}`)
+            // console.debug(`${elementID}: ${command.shortcut}`)
             const el = document.getElementById(elementID)
             if (el) {
                 el.textContent = command.shortcut

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -28,7 +28,7 @@ document
  * @function initPopup
  */
 async function initPopup() {
-    console.log('initPopup')
+    console.debug('initPopup')
     const manifest = chrome.runtime.getManifest()
     document.getElementById('version').textContent = manifest.version
     document.getElementById('homepage_url').href = manifest.homepage_url
@@ -39,13 +39,13 @@ async function initPopup() {
         'options',
         'sites',
     ])
-    console.log('options, sites:', options, sites)
+    console.debug('options, sites:', options, sites)
     updateOptions(options)
 
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
     const url = new URL(tab.url)
-    console.log('tab, url:', tab, url)
-    console.log(`url.hostname: ${url.hostname}`)
+    console.debug('tab, url:', tab, url)
+    console.debug(`url.hostname: ${url.hostname}`)
 
     if (!url.hostname) {
         return console.log('No url.hostname for tab:', tab, url)
@@ -64,7 +64,7 @@ async function initPopup() {
         switchEl.classList.add('border-danger-subtle')
         return console.log(`url.hostname: ${url.hostname}`, e)
     }
-    console.log(`Valid Site: ${url.hostname}`)
+    console.info(`Valid Site: ${url.hostname}`)
     const toggleSiteEl = document.getElementById('toggle-site')
     toggleSiteEl.disabled = false
     if (sites?.includes(url.hostname)) {
@@ -82,7 +82,7 @@ async function initPopup() {
  * @param {MouseEvent} event
  */
 async function popupLinks(event) {
-    console.log('popupLinks:', event)
+    console.debug('popupLinks:', event)
     event.preventDefault()
     const anchor = event.target.closest('a')
     console.log(`anchor.href: ${anchor.href}`)
@@ -100,7 +100,7 @@ async function popupLinks(event) {
  * @param {MouseEvent} event
  */
 function grantPerms(event) {
-    console.log('grantPerms:', event)
+    console.debug('grantPerms:', event)
     chrome.permissions.request({
         origins: ['https://*/*', 'http://*/*'],
     })
@@ -113,9 +113,9 @@ function grantPerms(event) {
  * @param {MouseEvent} event
  */
 async function toggleSiteClick(event) {
-    console.log('toggleSiteClick:', event)
+    console.debug('toggleSiteClick:', event)
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
-    console.log('tab:', tab)
+    console.debug('tab:', tab)
     await toggleSite(tab)
     window.close()
 }
@@ -126,9 +126,9 @@ async function toggleSiteClick(event) {
  * @param {MouseEvent} event
  */
 async function enableTempClick(event) {
-    console.log('enableTempClick:', event)
+    console.debug('enableTempClick:', event)
     const [tab] = await chrome.tabs.query({ currentWindow: true, active: true })
-    console.log('tab:', tab)
+    console.debug('tab:', tab)
     await enableSite(tab, 'yellow')
     window.close()
 }
diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -43,7 +43,7 @@ async function onInstalled(details) {
             const manifest = chrome.runtime.getManifest()
             if (manifest.version !== details.previousVersion) {
                 const url = `${githubURL}/releases/tag/${manifest.version}`
-                console.log(`url: ${url}`)
+                console.log(`Update url: ${url}`)
                 await chrome.tabs.create({ active: false, url })
             }
         }
@@ -97,7 +97,7 @@ async function onCommand(command) {
         if (hasPerms) {
             await toggleSite(tab)
         } else {
-            console.info('Missing Permissions. Use Popup First!')
+            console.warn('Missing Permissions. Use Popup First!')
         }
     } else if (command === 'enable-temp') {
         console.debug('enable-temp', tab)