Updates

src/components/OptionsForm.vue

@@ -80,29 +80,6 @@ onMounted(() => {
           @save="saveKeyValue"
         />
       </template>
-
-      <!--<div-->
-      <!--  v-for="option in toggleOptions"-->
-      <!--  :key="option.key"-->
-      <!--  :class="{ 'col-sm-6': !compact }"-->
-      <!--  class="form-check form-switch col-12"-->
-      <!--&gt;-->
-      <!--  <input-->
-      <!--    v-model="options[option.key]"-->
-      <!--    @change="saveOptions"-->
-      <!--    :id="option.key"-->
-      <!--    class="form-check-input"-->
-      <!--    type="checkbox"-->
-      <!--    role="switch"-->
-      <!--  />-->
-      <!--  <label class="form-check-label" :for="option.key">{{ option.label }}</label>-->
-      <!--  <i-->
-      <!--    v-if="!isMobile"-->
-      <!--    class="fa-solid fa-circle-info ms-2"-->
-      <!--    data-bs-toggle="tooltip"-->
-      <!--    :data-bs-title="option.tooltip"-->
-      <!--  ></i>-->
-      <!--</div>-->
     </div>
   </form>
 </template>

src/components/PanelHeader.vue

@@ -58,13 +58,14 @@ console.log('config:', config)
       <!-- flex-grow-1 -->
 
       <div v-if="pageButton" class="ms-1">
-        <button
+        <a
           :title="i18n.t('ui.action.extensionPage')"
+          href="/page.html"
           class="btn btn-sm btn-outline-info"
-          @click="openPage(closeWindow)"
+          @click.prevent="openPage(closeWindow)"
         >
           <i class="fa-solid fa-display me-1"></i>
-        </button>
+        </a>
       </div>
 
       <div v-if="!isMobile && panelButton" class="ms-1">
@@ -96,10 +97,8 @@ console.log('config:', config)
       <div v-if="optionsButton" class="ms-1">
         <a
           :title="i18n.t('ui.options')"
-          class="btn btn-sm btn-outline-info"
-          role="button"
           href="/options.html"
-          target="_blank"
+          class="btn btn-sm btn-outline-info"
           @click.prevent="openOptions(closeWindow)"
         >
           <i class="fa-solid fa-gears"></i

src/components/PermsCheck.vue

@@ -37,8 +37,7 @@ async function updatePerms() {
 
 async function grantPerms(event: Event) {
   console.debug('grantPerms:', event)
-  // noinspection ES6MissingAwait
-  requestPerms()
+  requestPerms().catch(console.log)
   if (props.closeWindow) {
     window.close()
   }

src/composables/useOptions.ts

@@ -1,4 +1,3 @@
-// composables/useOptions.ts
 import { ref, onMounted, onUnmounted } from 'vue'
 import type { Ref } from 'vue'
 import type { Options } from '@/utils/options.ts'

src/entrypoints/background/index.ts

@@ -1,8 +1,9 @@
-import { openExtPanel, openPopup, openSidePanel } from '@/utils/extension.ts'
+import { useAppConfig } from '#imports'
+import { isFirefox } from '@/utils/system.ts'
 import { Options, defaultOptions, getOptions } from '@/utils/options.ts'
+import { openExtPanel, openPopup, openSidePanel } from '@/utils/extension.ts'
 import { extractSelectionLinks, extractAndOpen } from '@/utils/links.ts'
 import { createContextMenus } from './menus.ts'
-import { isFirefox } from '@/utils/system.ts'
 
 let options: Options
 
@@ -13,19 +14,38 @@ export default defineBackground(() => {
 
   chrome.runtime.onInstalled.addListener(onInstalled)
   chrome.runtime.onStartup.addListener(onStartup)
-  chrome.runtime.onMessage.addListener(onMessage)
   chrome.storage.onChanged.addListener(onChanged)
+  chrome.runtime.onMessage.addListener(onMessage)
   chrome.commands?.onCommand.addListener(onCommand)
   chrome.contextMenus?.onClicked.addListener(onClicked)
 })
 
 async function setUninstallURL() {
   const manifest = chrome.runtime.getManifest()
-  const url = new URL(`${manifest.homepage_url}`)
+  if (!manifest.homepage_url) return console.warn('No manifest.homepage_url')
+  const url = new URL(manifest.homepage_url)
   url.pathname = '/uninstall/'
   url.searchParams.append('version', manifest.version)
   await chrome.runtime.setUninstallURL(url.href)
-  console.debug(`setUninstallURL: ${url.href}`)
+}
+
+async function setDefaultOptions(defaultOptions: object) {
+  console.log('setDefaultOptions', defaultOptions)
+  options = await getOptions()
+  let changed = false
+  for (const [key, value] of Object.entries(defaultOptions)) {
+    // console.log(`${key}: default: ${value} current: ${options[key]}`)
+    if (options[key] === undefined) {
+      changed = true
+      options[key] = value
+      console.log(`Set %c${key}:`, 'color: Khaki', value)
+    }
+  }
+  if (changed) {
+    await chrome.storage.sync.set({ options })
+    console.log('changed options:', options)
+  }
+  return options
 }
 
 async function onInstalled(details: chrome.runtime.InstalledDetails) {
@@ -34,14 +54,14 @@ async function onInstalled(details: chrome.runtime.InstalledDetails) {
   options = await setDefaultOptions(defaultOptions)
   console.debug('options:', options)
 
-  createContextMenus(options)
+  createContextMenus(options).catch(console.warn)
+  setUninstallURL().catch(console.warn)
 
+  const config = useAppConfig()
+  console.log('config:', config)
   const manifest = chrome.runtime.getManifest()
   console.debug('manifest:', manifest)
 
-  // await chrome.runtime.setUninstallURL(`${manifest.homepage_url}/issues`)
-  await setUninstallURL()
-
   if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
     // await chrome.runtime.openOptionsPage()
     // const hasPerms = await checkPerms(manifest)
@@ -58,7 +78,7 @@ async function onInstalled(details: chrome.runtime.InstalledDetails) {
   } else if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
     if (options.showUpdate) {
       if (manifest.version !== details.previousVersion) {
-        const url = `${manifest.homepage_url}/releases/tag/${manifest.version}`
+        const url = `${config.github_url}/releases/tag/${manifest.version}`
         await chrome.tabs.create({ active: false, url })
       }
     }
@@ -72,75 +92,56 @@ async function onStartup() {
     // NOTE: Confirm these checks are still necessary...
     options = await getOptions()
     console.debug('options:', options)
-    createContextMenus(options)
-
-    // const manifest = chrome.runtime.getManifest()
-    // console.debug('manifest:', manifest)
-    // await chrome.runtime.setUninstallURL(`${manifest.homepage_url}/issues`)
-    await setUninstallURL()
-  }
-}
-
-async function setDefaultOptions(defaultOptions: object) {
-  console.log('setDefaultOptions', defaultOptions)
-  options = await getOptions()
-  let changed = false
-  for (const [key, value] of Object.entries(defaultOptions)) {
-    // console.log(`${key}: default: ${value} current: ${options[key]}`)
-    if (options[key] === undefined) {
-      changed = true
-      options[key] = value
-      console.log(`Set %c${key}:`, 'color: Khaki', value)
-    }
-  }
-  if (changed) {
-    await chrome.storage.sync.set({ options })
-    console.log('changed options:', options)
-  }
-  return options
-}
-
-function onMessage(
-  message: any,
-  _sender: chrome.runtime.MessageSender,
-  _sendResponse: Function,
-) {
-  console.log('background/index.ts: onMessage:', message)
-  if (message === 'openPopup') {
-    openPopup().catch(console.log)
+    createContextMenus(options).catch(console.warn)
+    setUninstallURL().catch(console.warn)
   }
 }
 
 function onChanged(changes: object, namespace: string) {
-  // console.debug('onChanged:', changes, namespace)
+  // console.debug('background/index.ts: onChanged:', changes, namespace)
   for (const [key, { oldValue, newValue }] of Object.entries(changes)) {
     if (namespace === 'sync' && key === 'options' && oldValue && newValue) {
       options = newValue
       if (oldValue.contextMenu !== newValue.contextMenu) {
         if (newValue?.contextMenu) {
           console.log('%c Enabled contextMenu...', 'color: SpringGreen')
-          createContextMenus(newValue)
+          createContextMenus(newValue).catch(console.warn)
         } else {
           console.log('%c Disabled contextMenu...', 'color: OrangeRed')
-          chrome.contextMenus?.removeAll()
+          chrome.contextMenus?.removeAll().catch(console.warn)
         }
       }
     }
   }
 }
 
+function onMessage(
+  message: any,
+  _sender: chrome.runtime.MessageSender,
+  _sendResponse: Function,
+) {
+  console.log('background/index.ts: onMessage:', message)
+  if (message === 'openPopup') {
+    openPopup().catch(console.log)
+  }
+}
+
 async function onCommand(command: string, tab?: chrome.tabs.Tab) {
   console.debug('onCommand:', command, tab)
-  if (command === 'openOptions') {
-    await chrome.runtime.openOptionsPage()
-  } else if (command === 'openExtPanel') {
-    await openExtPanel()
-  } else if (command === 'openSidePanel') {
-    openSidePanel()
-  } else if (command === 'cmdExtractAll') {
-    await extractAndOpen(options)
-  } else {
-    console.warn(`Unknown Command: ${command}`)
+  try {
+    if (command === 'openOptions') {
+      await chrome.runtime.openOptionsPage()
+    } else if (command === 'openExtPanel') {
+      await openExtPanel()
+    } else if (command === 'openSidePanel') {
+      openSidePanel()
+    } else if (command === 'cmdExtractAll') {
+      await extractAndOpen(options)
+    } else {
+      console.warn(`Unknown Command: ${command}`)
+    }
+  } catch (e) {
+    console.warn(e)
   }
 }
 

src/entrypoints/background/menus.ts

@@ -21,16 +21,12 @@ const contexts: chrome.contextMenus.CreateProperties[] = config.map((entry) => (
     : { title: i18n.t(`ctx.${entry.id}` as any) }),
 }))
 
-// NOTE: Below is ported from VanillaJS
-
-export function createContextMenus(options: Options) {
+export async function createContextMenus(options: Options) {
   console.log('createContextMenus:', options)
   if (!options.contextMenu) return console.log('Disabled: options.contextMenu')
   if (!chrome.contextMenus) return console.log('Unsupported: chrome.contextMenus')
-  chrome.contextMenus.removeAll().then(() => {
-    contexts.forEach((item) => {
-      // console.log(item.id, options[item.id!])
-      chrome.contextMenus.create(item)
-    })
+  await chrome.contextMenus.removeAll()
+  contexts.forEach((item) => {
+    chrome.contextMenus.create(item)
   })
 }

src/entrypoints/options/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { i18n } from '#imports'
+import { i18n, useAppConfig } from '#imports'
 import { useTitle } from '@/composables/useTitle.ts'
 import { clickOpen } from '@/utils/extension.ts'
 import { isFirefox, isMobile } from '@/utils/system.ts'

src/utils/extension.ts

@@ -75,12 +75,18 @@ export async function openExtPanel(close = false) {
 
   try {
     const panel = await chrome.windows.get(lastPanelID)
-    // console.debug('window', window)
+    // console.debug('panel', panel)
+    console.debug('panel?.id', panel?.id)
     if (panel) {
-      console.debug(`%c Window found: ${panel.id}`, 'color: Lime')
-      await chrome.windows.update(lastPanelID, { focused: true })
-      if (close) window.close()
-      return
+      const tabs = await chrome.tabs.query({ active: true, currentWindow: true })
+      // console.debug('tabs:', tabs)
+      console.debug('tabs[0]?.windowId:', tabs[0]?.windowId)
+      if (panel.id != tabs[0]?.windowId) {
+        console.debug('%c Window found:', 'color: SpringGreen', panel.id)
+        await chrome.windows.update(lastPanelID, { focused: true })
+        if (close) window.close()
+        return
+      }
     }
   } catch (e) {
     console.log(e)

src/utils/system.ts

@@ -1,5 +1,3 @@
-// system
-
 // NOTE: Implement import.meta.env.FIREFOX instead of isFirefox
 export const isFirefox = !!import.meta.env.FIREFOX
 // export const isFirefox =