Add Download Support to CTX Menu (#12)

* Add Download Support to CTX Menu

* Update Service Worker Functions

* Update .prettierrc.json

Author: smashedr

.github/workflows/build.yaml

@@ -1,4 +1,4 @@
-name: 'Build'
+name: "Build"
 
 on:
   workflow_dispatch:
@@ -7,15 +7,15 @@ on:
 
 jobs:
   build:
-    name: 'Build'
+    name: "Build"
     runs-on: ubuntu-latest
     timeout-minutes: 5
 
     steps:
-      - name: 'Checkout'
+      - name: "Checkout"
         uses: actions/checkout@v3
 
-      - name: 'Release Version Check'
+      - name: "Release Version Check"
         if: ${{ github.event_name == 'release' }}
         run: |
           export version="$(jq '.version' < manifest.json | tr -d '"')"
@@ -24,23 +24,23 @@ jobs:
             exit 1
           fi
 
-      - name: 'Setup Node'
+      - name: "Setup Node"
         uses: actions/setup-node@v3
         with:
           node-version: 18
 
-      - name: 'Build All'
+      - name: "Build All"
         run: |
           npm install
           npm run build
 
-      - name: 'Upload to Actions'
+      - name: "Upload to Actions"
         uses: actions/upload-artifact@v3
         with:
           name: artifacts
           path: web-ext-artifacts/
 
-      - name: 'Upload to Release'
+      - name: "Upload to Release"
         uses: svenstaro/upload-release-action@v2
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}

.prettierrc.json

@@ -5,7 +5,7 @@
   "singleQuote": true,
   "overrides": [
     {
-      "files": ["**/*.html"],
+      "files": ["**/*.html", "**/*.yaml"],
       "options": {
         "singleQuote": false
       }

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.1.1",
+  "version": "0.1.2",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

src/html/options.html

@@ -75,7 +75,7 @@ <h1>SMWC Web Extension</h1>
 
 <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> <!-- toast -->
 
 <div class="d-none">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">
@@ -84,7 +84,7 @@ <h1>SMWC Web Extension</h1>
     <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>
+</div> <!-- d-none -->
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>

src/html/popup.html

@@ -78,11 +78,11 @@
         <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
            href="homepage_url">SMWC Web Extension</a> v<span class="version"></span>
     </div>
-</div>
+</div> <!-- container -->
 
 <div aria-live="polite" aria-atomic="true" class="">
     <div id="toast-container" class="toast-container bottom-0 end-0 p-3"></div>
-</div>
+</div> <!-- toast -->
 
 <div class="d-none">
     <div class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="5000">

src/js/popup.js

@@ -51,22 +51,27 @@ async function popupLinks(event) {
     console.debug('popupLinks:', event)
     event.preventDefault()
     const anchor = event.target.closest('a')
-    console.debug(`anchor.href: ${anchor.href}`, anchor)
+    const href = anchor.getAttribute('href').replace(/^\.+/g, '')
+    console.debug('href:', href)
     let url
     if (anchor.href.endsWith('html/options.html')) {
         chrome.runtime.openOptionsPage()
         return window.close()
-    } else if (
-        anchor.href.startsWith('http') ||
-        anchor.href.startsWith('chrome-extension')
-    ) {
-        // console.debug(`http or chrome-extension`)
-        url = anchor.href
+    } else if (href.startsWith('http')) {
+        url = href
     } else {
-        // console.debug(`else chrome.runtime.getURL`)
-        url = chrome.runtime.getURL(anchor.href)
+        url = chrome.runtime.getURL(href)
     }
-    console.log('url:', url)
+    console.debug('url:', url)
+    // const tabs = await chrome.tabs.query({ currentWindow: true })
+    // console.log(tabs)
+    // for (const tab of tabs) {
+    //     if (tab.url === url) {
+    //         console.debug('tab:', tab)
+    //         await chrome.tabs.update(tab.id, { active: true })
+    //         return window.close()
+    //     }
+    // }
     await chrome.tabs.create({ active: true, url })
     return window.close()
 }

src/js/service-worker.js

@@ -4,7 +4,7 @@ import { patchRom } from './exports.js'
 
 chrome.runtime.onStartup.addListener(onStartup)
 chrome.runtime.onInstalled.addListener(onInstalled)
-chrome.contextMenus.onClicked.addListener(contextMenusClicked)
+chrome.contextMenus.onClicked.addListener(onClicked)
 chrome.notifications.onClicked.addListener(notificationsClicked)
 chrome.storage.onChanged.addListener(onChanged)
 
@@ -39,7 +39,7 @@ async function onInstalled(details) {
             showUpdate: false,
         })
     )
-    console.log('options:', options)
+    console.debug('options:', options)
     if (options.contextMenu) {
         createContextMenus()
     }
@@ -50,7 +50,6 @@ 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}`)
                 await chrome.tabs.create({ active: false, url })
             }
         }
@@ -60,16 +59,20 @@ async function onInstalled(details) {
 
 /**
  * On Clicked Callback
- * @function contextMenusClicked
+ * @function onClicked
  * @param {OnClickData} ctx
  * @param {chrome.tabs.Tab} tab
  */
-async function contextMenusClicked(ctx, tab) {
-    console.log('contextMenusClicked:', ctx, tab)
+async function onClicked(ctx, tab) {
+    console.debug('onClicked:', ctx, tab)
     const callback = (result, key) => {
         console.log('service-worker callback:', result)
         if (result[key]) {
-            chrome.tabs.create({ active: true, url: result[key] }).then()
+            if (key === 'download') {
+                chrome.downloads.download({ url: result[key] })
+            } else {
+                chrome.tabs.create({ active: true, url: result[key] }).then()
+            }
         } else if (result.error?.__all__) {
             console.warn(result.error.__all__[0])
             sendNotification('Error', result.error.__all__[0])
@@ -101,15 +104,15 @@ function notificationsClicked(notificationId) {
  * @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) {
                 if (newValue?.contextMenu) {
-                    console.log('Enabled contextMenu...')
+                    console.info('Enabled contextMenu...')
                     createContextMenus()
                 } else {
-                    console.log('Disabled contextMenu...')
+                    console.info('Disabled contextMenu...')
                     chrome.contextMenus.removeAll()
                 }
             }
@@ -148,10 +151,9 @@ function createContextMenus() {
  * @return {Object}
  */
 async function setDefaultOptions(defaultOptions) {
-    console.log('setDefaultOptions')
-    let { options, popup } = await chrome.storage.sync.get(['options', 'popup'])
+    console.log('setDefaultOptions', defaultOptions)
+    let { options } = await chrome.storage.sync.get(['options'])
     options = options || {}
-    console.log(options)
     let changed = false
     for (const [key, value] of Object.entries(defaultOptions)) {
         // console.log(`${key}: default: ${value} current: ${options[key]}`)
@@ -163,12 +165,7 @@ async function setDefaultOptions(defaultOptions) {
     }
     if (changed) {
         await chrome.storage.sync.set({ options })
-        console.log(options)
-    }
-    // TODO: Handle popup default(s) differently?
-    if (popup?.patchType === undefined) {
-        popup = { patchType: 'doPatch' }
-        await chrome.storage.sync.set({ popup })
+        console.log('changed:', options)
     }
     return options
 }