Fix Escape key shortcut. Add Firefox permission prompt.

CHANGELOG.md

@@ -2,7 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
-## [3.0.1] 2023-03-24
+## [3.0.3] 2023-03-29
+
+- Fix "Escape" not closing the dialog.
+- Add Firefox permission prompt, otherwise the extension is useless.
+
+## [3.0.0] 2023-03-24
 
 - Complete rewrite!
 - Now supports Firefox!

package.json

@@ -1,7 +1,7 @@
 {
   "name": "images-under-cursor",
   "type": "module",
-  "version": "1.0.0",
+  "version": "3.0.3",
   "private": true,
   "scripts": {
     "start": "parcel watch src/manifest.json --host localhost --config @parcel/config-webextension",

src/_locales/en/messages.json

@@ -32,6 +32,18 @@
   "unknown_size": {
     "message": "unknown size"
   },
+  "req_perm_title": {
+    "message": "Images Under Cursor requires permission"
+  },
+  "req_perm_text": {
+    "message": "Thanks for installing Images Under Cursor. To use this extension on any page, Firefox needs an extra permission. Please click the button below then click “Allow” when prompted by Firefox."
+  },
+  "req_perm_denied": {
+    "message": "You denied the request. Images Under Cursor doesn't work well without this permission. You can try again by clicking the button."
+  },
+  "req_perm_btn": {
+    "message": "Grant permission"
+  },
   "type_image": {
     "message": "Image"
   },

src/_locales/fr/messages.json

@@ -32,6 +32,18 @@
   "unknown_size": {
     "message": "taille inconnue"
   },
+  "req_perm_title": {
+    "message": "Images Sous Curseur a besoin d'une permission"
+  },
+  "req_perm_text": {
+    "message": "Merci d'avoir installé Images Sous Curseur. Pour pouvoir utiliser cette extension sur n'importe quelle page, Firefox a besoin d'une permission. Cliquez sur le bouton ci-dessous puis sur « Autoriser » lorsque Firefox vous le demande."
+  },
+  "req_perm_denied": {
+    "message": "Vous avez refusé la permission. Images Sous Curseur ne fonctionne pas correctement sans cette permission. Vous pouvez réessayer en cliquant sur le bouton."
+  },
+  "req_perm_btn": {
+    "message": "Donner la permission"
+  },
   "type_image": {
     "message": "Image"
   },

src/background.ts

@@ -1,34 +1,55 @@
 import * as browser from 'webextension-polyfill'
 
+// @ts-expect-error: Parcel mini-DSL is unsupported.
+import requestPermUrl from 'url:./request-perm.html'
+
+const invokeCmd = 'invoke'
+const invokeMenuId = 'iucInvoke'
+
 async function getInvokeShortcut(): Promise<string | null> {
-  const invokeCmd = [...(await browser.commands.getAll())].filter(c => c.name === 'invoke')[0]
-  return invokeCmd.shortcut && !!invokeCmd.shortcut.length ? invokeCmd.shortcut : null
+  const cmd = [...(await browser.commands.getAll())].filter(c => c.name === invokeCmd)[0]
+  return cmd.shortcut && !!cmd.shortcut.length ? cmd.shortcut : null
 }
 
 async function invoke(tab: browser.Tabs.Tab, showShortcut: boolean) {
   const shortcut = showShortcut ? await getInvokeShortcut() : null
   try {
-    await browser.tabs.sendMessage(tab.id, { cmd: 'invoke', shortcut })
+    await browser.tabs.sendMessage(tab.id, { cmd: invokeCmd, shortcut })
   }
   catch (e) { }
 }
 
-browser.runtime.onInstalled.addListener(async () => {
+async function checkAndMaybeRequestPermission(url: string) {
+  const contentScriptAllOrigins: browser.Permissions.AnyPermissions = {
+    permissions: [],
+    origins: ['*://*/*'],
+  }
+  const hasPerm = await browser.permissions.contains(contentScriptAllOrigins)
+  if (!hasPerm)
+    browser.tabs.create({ url })
+}
+
+browser.runtime.onInstalled.addListener(async (_info) => {
   browser.contextMenus.create({
-    id: 'iucInvoke',
+    id: invokeMenuId,
     title: browser.i18n.getMessage('invoke_cmd_desc'),
     contexts: ['all'],
   })
+
+  const permUrl = browser.runtime.getURL(requestPermUrl)
+  const isFirefox = permUrl.startsWith('moz-extension://')
+  if (isFirefox)
+    await checkAndMaybeRequestPermission(permUrl)
 })
 
 browser.commands.onCommand.addListener(async (command) => {
-  if (command === 'invoke') {
+  if (command === invokeCmd) {
     const [tab] = await browser.tabs.query({ active: true, lastFocusedWindow: true })
     await invoke(tab, false)
   }
 })
 
 browser.contextMenus.onClicked.addListener(async (info, tab) => {
-  if (info.menuItemId === 'iucInvoke')
+  if (info.menuItemId === invokeMenuId)
     await invoke(tab, true)
 })

src/content.tsx

@@ -296,20 +296,25 @@ function findAndShow(pos: Point, shortcut?: string): Promise<void> {
       const shadowRoot = shadow.attachShadow({ mode: 'open' })
       function close() {
         try {
-          // shadow.remove()
+          document.removeEventListener('keydown', closeOnEscape)
           document.body.removeChild(shadow)
         }
         catch (e) { }
         resolve()
       }
+      function closeOnEscape(e: KeyboardEvent) {
+        if (e.key === 'Escape')
+          close()
+      }
       function ignore(e) {
         e.stopPropagation()
         e.preventDefault()
       }
+      document.addEventListener('keydown', closeOnEscape)
       render(
         <>
           <style>{contentCss}</style>
-          <main onClick={close} onKeyUp={e => e.key === 'Escape' && close()}>
+          <main onClick={close}>
             <div>
               <span className="logo" onClick={ignore} />
               <div className="scroll" onClick={ignore}>

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_app_name__",
   "short_name": "IUC",
   "description": "__MSG_app_desc__",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "author": "Alexandre Macabies",
   "homepage_url": "https://github.com/zopieux/chrome-images-under-cursor",
   "incognito": "spanning",

src/request-perm.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="./request-perm.sass" />
+    <link rel="icon" type="image/png" href="img/icon-128.png" />
+</head>
+
+<body>
+    <main></main>
+    <script src="./request-perm.tsx" type="module"></script>
+</body>
+</html>

src/request-perm.sass

@@ -0,0 +1,57 @@
+body
+  font-family: sans-serif
+  margin: 0
+  padding: 0
+  display: flex
+  justify-content: center
+  align-self: flex-start
+  width: 100vw
+  height: 100vh
+
+main
+  display: flex
+  flex-direction: column
+  margin: 0
+  padding: 2rem
+  max-width: 650px
+  gap: 2rem
+
+  h1, p, button
+    margin: 0
+    padding: 0
+
+  h1
+    font-size: 1.5rem
+    font-weight: bold
+    display: flex
+    flex-direction: column
+    align-items: center
+
+    &::before
+      content: ''
+      display: block
+      width: 70px
+      height: 70px
+      background: url('data-url:./img/icon.svg') no-repeat
+
+  p
+    text-align: justify
+
+    &.denied
+      color: #933333
+
+  button
+    font: inherit
+    color: white
+    padding: 0.8rem
+    font-weight: bold
+    background: #336693
+    border-radius: 3px
+    border: none
+
+    &:hover
+      background: lighten(#336693, 10%)
+      box-shadow: 0 0 4px rgba(0,0,0,0.75)
+
+    &:active
+      opacity: 0.75

src/request-perm.tsx

@@ -0,0 +1,36 @@
+import * as browser from 'webextension-polyfill'
+
+import { render } from 'preact'
+import { useState } from 'preact/hooks'
+
+(async function () {
+  function Page() {
+    const [denied, setDenied] = useState(false)
+
+    async function requestPerm() {
+      setDenied(false)
+      const contentScriptAllOrigins: browser.Permissions.Permissions = {
+        permissions: [],
+        origins: ['*://*/*'],
+      }
+      const gotPermission = await browser.permissions.request(contentScriptAllOrigins)
+      if (gotPermission)
+        window.close()
+      else
+        setDenied(true)
+    }
+
+    return (
+      <>
+        <h1>{browser.i18n.getMessage('req_perm_title')}</h1>
+        <p>{browser.i18n.getMessage('req_perm_text')}</p>
+        <button onClick={requestPerm}>{browser.i18n.getMessage('req_perm_btn')}</button>
+        {denied ? <p className="denied">{browser.i18n.getMessage('req_perm_denied')}</p> : null}
+      </>
+    )
+  }
+
+  document.title = browser.i18n.getMessage('req_perm_title')
+  render(<Page />, document.querySelector('main'),
+  )
+})()