Minor Updates and Improvements (#2)

* Update Context Menu

* Improve popLinks and Options

* Update popLinks

* Update Options

Author: smashedr

manifest.json

@@ -3,7 +3,7 @@
   "description": "SMWC.world Web Extension and Browser Addon to Easily Patch and Play SMW ROMs.",
   "homepage_url": "https://smwc.world",
   "author": "Shane",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

src/html/options.html

@@ -33,11 +33,11 @@ <h1 class="align-middle">SMWC Web Extension</h1>
                     <hr>
                     <form id="options">
                         <div class="form-check form-switch">
-                            <input class="form-check-input form-control" type="checkbox" role="switch" id="contextMenu">
+                            <input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
                             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">Enable Right Click Menu</label>
                         </div>
                         <div class="form-check form-switch mb-3">
-                            <input class="form-check-input form-control" type="checkbox" role="switch" id="showUpdate">
+                            <input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
                             <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
                         </div>
                     </form>
@@ -56,7 +56,7 @@ <h1 class="align-middle">SMWC Web Extension</h1>
 <!--                                    <form id="advanced" class="">-->
 <!--                                        <label for="url" class="form-label">SMWC.world URL</label>-->
 <!--                                        <a id="reset-default" class="float-end align-bottom small" role="button">Reset to Default</a>-->
-<!--                                        <input type="text" id="url" class="form-control" aria-describedby="urlHelp">-->
+<!--                                        <input type="text" id="url" class="options" aria-describedby="urlHelp">-->
 <!--                                        <div id="urlInvalid" class="invalid-feedback">Invalid Hostname.</div>-->
 <!--                                        <div id="urlHelp" class="form-text mb-3">-->
 <!--                                            URL to SMWC.world Instance. Only used for testing!-->

src/html/popup.html

@@ -12,10 +12,10 @@
 <div class="container-fluid p-3">
     <div class="d-grid gap-2 d-md-flex justify-content-md-end">
         <div class="btn-group btn-group-sm" role="group" aria-label="SMWC.world">
-            <a role="button" class="btn btn-outline-info popup-click" data-href="https://smwc.world/patcher/">Patcher</a>
-            <a role="button" class="btn btn-outline-info popup-click" data-href="https://smwc.world/play/">Player</a>
+            <a role="button" class="btn btn-outline-info" data-href="https://smwc.world/patcher/">Patcher</a>
+            <a role="button" class="btn btn-outline-info" data-href="https://smwc.world/play/">Player</a>
         </div>
-        <a class="btn btn-success btn-sm popup-click w-100" role="button" data-href="https://www.smwcentral.net/?p=section&s=smwhacks">
+        <a class="btn btn-success btn-sm w-100" role="button" data-href="https://www.smwcentral.net/?p=section&s=smwhacks">
             SMW Central Rom Hacks
         </a>
         <form id="patch-form">
@@ -43,21 +43,21 @@
     <div id="popup-alert" class="alert alert-warning mt-2 visually-hidden" role="alert"></div>
     <hr class="my-2">
     <div class="form-check form-switch">
-        <input class="form-check-input form-control pop-options" type="checkbox" role="switch" id="contextMenu">
+        <input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
         <label class="form-check-label" for="contextMenu">Enable Right Click Menu</label>
     </div>
     <div class="form-check form-switch">
-        <input class="form-check-input form-control pop-options" type="checkbox" role="switch" id="showUpdate">
+        <input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
         <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
     </div>
-    <a class="btn btn-outline-primary btn-sm popup-click w-100 mt-3" role="button" data-href="html/options.html">
+    <a class="btn btn-outline-primary btn-sm w-100 mt-3" role="button" data-href="options">
         Open Options
     </a>
     <hr>
     <p class="text-center small mb-0">
         <img src="../images/logo16.png" alt="SMWC Web Extension" class="me-1">
-        <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover popup-click" type="button" rel="noopener"
-           data-href="homepage_url">SMWC Web Extension</a> v<span id="version"></span>
+        <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover" type="button" rel="noopener"
+           data-href="homepage">SMWC Web Extension</a> v<span id="version"></span>
     </p>
 </div>
 

src/js/options.js

@@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', initOptions)
 
 chrome.storage.onChanged.addListener(onChanged)
 
-const formInputs = document.querySelectorAll('.form-control')
+const formInputs = document.querySelectorAll('.options')
 formInputs.forEach((el) => el.addEventListener('change', saveOptions))
 
 // document.getElementById('advanced').addEventListener('submit', saveAdvanced)

src/js/popup.js

@@ -4,15 +4,14 @@ import { patchRom, saveOptions, updateOptions } from './exports.js'
 
 document.addEventListener('DOMContentLoaded', initPopup)
 
-const buttons = document.querySelectorAll('.popup-click')
-buttons.forEach((el) => el.addEventListener('click', popupClick))
+const popupLinks = document.querySelectorAll('[data-href]')
+popupLinks.forEach((el) => el.addEventListener('click', popLinks))
 
-const formInputs = document.querySelectorAll('.pop-options')
+const formInputs = document.querySelectorAll('.options')
 formInputs.forEach((el) => el.addEventListener('change', saveOptions))
 
-document.getElementsByName('searchType').forEach((el) => {
-    el.addEventListener('change', updateSearchType)
-})
+const searchTypes = document.getElementsByName('searchType')
+searchTypes.forEach((el) => el.addEventListener('change', updateSearchType))
 
 document.getElementById('patch-form').addEventListener('submit', patchForm)
 
@@ -25,42 +24,41 @@ async function initPopup() {
     document.getElementById('patch-input').focus()
     document.getElementById('version').textContent =
         chrome.runtime.getManifest().version
-
     const { options, popup } = await chrome.storage.sync.get([
         'options',
         'popup',
     ])
     console.log('options, popup:', options, popup)
-
     document.getElementById(popup.searchType).checked = true
     updateOptions(options)
 }
 
 /**
- * Handle Popup Clicks
- * @function popupClick
+ * Popup Links Click Callback
+ * Firefox requires a call to window.close()
+ * @function popLinks
  * @param {MouseEvent} event
  */
-async function popupClick(event) {
-    console.log('popupClick:', event)
+async function popLinks(event) {
+    console.log('popLinks:', event)
     event.preventDefault()
-    let url
     const anchor = event.target.closest('a')
-    if (anchor?.dataset?.href) {
-        if (anchor.dataset.href === 'homepage_url') {
-            url = chrome.runtime.getManifest().homepage_url
-        } else if (anchor.dataset.href.startsWith('http')) {
-            url = anchor.dataset.href
-        } else {
-            url = chrome.runtime.getURL(anchor.dataset.href)
-        }
+    let url
+    if (anchor?.dataset?.href.startsWith('http')) {
+        url = anchor.dataset.href
+    } else if (anchor?.dataset?.href === 'homepage') {
+        url = chrome.runtime.getManifest().homepage_url
+    } else if (anchor?.dataset?.href === 'options') {
+        chrome.runtime.openOptionsPage()
+        return window.close()
+    } else if (anchor?.dataset?.href) {
+        url = chrome.runtime.getURL(anchor.dataset.href)
     }
-    console.log(`url: ${url}`)
-    if (url) {
-        await chrome.tabs.create({ active: true, url })
-    } else {
-        console.warn('No dataset.href for anchor:', anchor)
+    console.log('url:', url)
+    if (!url) {
+        return console.error('No dataset.href for anchor:', anchor)
     }
+    await chrome.tabs.create({ active: true, url })
     return window.close()
 }
 

src/js/service-worker.js

@@ -30,8 +30,7 @@ async function onInstalled(details) {
         createContextMenus()
     }
     if (details.reason === 'install') {
-        const url = chrome.runtime.getURL('/html/options.html')
-        await chrome.tabs.create({ active: true, url })
+        chrome.runtime.openOptionsPage()
     } else if (options.showUpdate && details.reason === 'update') {
         const manifest = chrome.runtime.getManifest()
         if (manifest.version !== details.previousVersion) {
@@ -64,8 +63,7 @@ async function onClicked(ctx, tab) {
         }
     }
     if (ctx.menuItemId === 'options') {
-        const url = chrome.runtime.getURL('/html/options.html')
-        await chrome.tabs.create({ active: true, url })
+        chrome.runtime.openOptionsPage()
     } else if (ctx.menuItemId === 'rom_patch') {
         patchRom(ctx.linkUrl, 'download', callback)
     } else if (ctx.menuItemId === 'rom_play') {
@@ -126,10 +124,10 @@ function onChanged(changes, namespace) {
  */
 function createContextMenus() {
     console.log('createContextMenus')
-    const ctx = ['all']
+    const ctx = ['link']
     const contexts = [
-        [['link'], 'rom_patch', 'normal', 'Patch ROM'],
-        [['link'], 'rom_play', 'normal', 'Play ROM'],
+        [ctx, 'rom_patch', 'normal', 'Patch ROM'],
+        [ctx, 'rom_play', 'normal', 'Play ROM'],
         [ctx, 'separator-1', 'separator', 'separator'],
         [ctx, 'options', 'normal', 'Open Options'],
     ]