feat: keyboard shortcuts

Author: geekdada

src/components/IconButton.tsx

@@ -29,7 +29,7 @@ const IconButton = forwardRef(function IconButton(
       onClick={handleClick}
       css={tw`
         inline-flex justify-center items-center w-auto h-auto m-0 p-2
-        cursor-pointer text-center no-underline rounded-md
+        cursor-pointer text-center text-gray-800 no-underline rounded-md
         border border-solid border-gray-800 bg-white hover:bg-gray-100 active:bg-gray-200
         transition-colors ease-in-out duration-150
       `}>

src/manifest.json

@@ -31,6 +31,22 @@
     "icon-128.png",
     "icon-34.png"
   ],
+  "commands": {
+    "open_application": {
+      "description": "Open application",
+      "suggested_key": {
+        "default": "Ctrl+Shift+W",
+        "mac": "MacCtrl+Command+W"
+      }
+    },
+    "toggle_ocr": {
+      "description": "Toggle OCR",
+      "suggested_key": {
+        "default": "Ctrl+Shift+E",
+        "mac": "MacCtrl+Command+E"
+      }
+    }
+  },
   "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

src/pages/Background/common/utils.ts

@@ -1,23 +1,3 @@
-import { data } from 'autoprefixer'
-import cc from 'chrome-call'
-import { createClient } from 'connect.io'
-
-import logger from '../../../common/logger'
-
-export const openExtension = (): void => {
-  cc(chrome.tabs, 'query', { active: true, currentWindow: true })
-    .then((tabs: chrome.tabs.Tab[]) => {
-      const client = createClient(tabs[0].id)
-
-      client.send('open_extension')
-    })
-    .catch((err) => {
-      logger.error({
-        err,
-      })
-    })
-}
-
 export const cropImage = async (
   dataUrl: string,
   config: {

src/pages/Background/index.ts

@@ -1,7 +1,51 @@
 import '../../assets/img/icon-34.png'
 import '../../assets/img/icon-128.png'
 
+import cc from 'chrome-call'
+import { createClient } from 'connect.io'
+
 import './common/server'
-import { openExtension } from './common/utils'
+import logger from '../../common/logger'
+
+const openExtension = (): void => {
+  cc(chrome.tabs, 'query', { active: true, currentWindow: true })
+    .then((tabs: chrome.tabs.Tab[]) => {
+      const client = createClient(tabs[0].id)
+
+      client.send('open_extension')
+    })
+    .catch((err) => {
+      logger.error({
+        err,
+      })
+    })
+}
+
+const toggleOCR = (): void => {
+  cc(chrome.tabs, 'query', { active: true, currentWindow: true })
+    .then((tabs: chrome.tabs.Tab[]) => {
+      const client = createClient(tabs[0].id)
+
+      client.send('toggle_ocr')
+    })
+    .catch((err) => {
+      logger.error({
+        err,
+      })
+    })
+}
 
 chrome.browserAction.onClicked.addListener(openExtension)
+
+chrome.commands.onCommand.addListener(function (command) {
+  switch (command) {
+    case 'open_application':
+      openExtension()
+      break
+    case 'toggle_ocr':
+      toggleOCR()
+      break
+    default:
+    // no default
+  }
+})

src/pages/Content/common/translation-stack.ts

@@ -1,10 +1,10 @@
-import { TranslateJob } from './types'
+import { AllJobTypes } from './types'
 
 class TranslationStack {
-  stack: Array<TranslateJob> = []
-  onPush?: (job: TranslateJob) => void
+  stack: Array<AllJobTypes> = []
+  onPush?: (job: AllJobTypes) => void
 
-  attachQueue(onPush: (job: TranslateJob) => void) {
+  attachQueue(onPush: (job: AllJobTypes) => void) {
     this.onPush = onPush
 
     while (this.stack.length) {
@@ -17,7 +17,7 @@ class TranslationStack {
     this.onPush = undefined
   }
 
-  push(job: TranslateJob) {
+  push(job: AllJobTypes) {
     if (this.onPush) {
       this.onPush(job)
     } else {

src/pages/Content/common/types.ts

@@ -10,8 +10,17 @@ export interface TextSelection {
 }
 
 export interface TranslateJob {
+  type: 'translate'
   id: string
   text: string
   anchorId?: string
   sourceLang?: string
 }
+
+export interface DirectiveJob {
+  type: 'directive'
+  directive: string
+  payload?: Record<string, any>
+}
+
+export type AllJobTypes = TranslateJob | DirectiveJob

src/pages/Content/components/App/index.tsx

@@ -15,7 +15,7 @@ import CloseIcon from '../../../../components/svg/Close'
 import CursorClick from '../../../../components/svg/CursorClick'
 import LoadingCircle from '../../../../components/svg/LoadingCircle'
 import translationStack from '../../common/translation-stack'
-import { TranslateJob } from '../../common/types'
+import { AllJobTypes, DirectiveJob } from '../../common/types'
 import { ConfigContext, ConfigState } from '../../providers/config'
 import { useTranslateJobsDispatch } from '../../providers/translate-jobs'
 import OCRTool, { OnFinish } from '../OCRTool'
@@ -48,22 +48,46 @@ const App: React.FC = () => {
   }, [])
 
   const onNewJob = useCallback(
-    (job: TranslateJob) => {
+    (job: AllJobTypes) => {
       logger.debug({
         msg: 'new job',
         job,
       })
 
-      if (!job.sourceLang) {
-        job.sourceLang = 'EN'
+      const doDirectiveJob = (job: DirectiveJob): void => {
+        switch (job.directive) {
+          case 'toggle_ocr':
+            if (enableOCR) {
+              setShowOCRTool((oldVal) => !oldVal)
+            } else {
+              enqueueSnackbar('无法开启 OCR，请确认已正确设置腾讯云 OCR', {
+                variant: 'warning',
+              })
+            }
+            break
+          default:
+          // no default
+        }
       }
 
-      dispatch({
-        type: 'add',
-        payload: job,
-      })
+      switch (job.type) {
+        case 'translate':
+          if (!job.sourceLang) {
+            job.sourceLang = 'EN'
+          }
+
+          dispatch({
+            type: 'add',
+            payload: job,
+          })
+          break
+
+        case 'directive':
+          doDirectiveJob(job)
+          break
+      }
     },
-    [dispatch],
+    [dispatch, enableOCR, enqueueSnackbar],
   )
 
   const onDragStart: DraggableEventHandler = useCallback((e) => {
@@ -104,6 +128,7 @@ const App: React.FC = () => {
           })
           .then((result: string[]) => {
             translationStack.push({
+              type: 'translate',
               id: uuid(),
               text: result.join('\n'),
             })
@@ -114,7 +139,7 @@ const App: React.FC = () => {
           .finally(() => {
             setLoadingOCR(false)
           })
-      }, 100)
+      }, 50)
     },
     [enqueueSnackbar],
   )
@@ -168,6 +193,7 @@ const App: React.FC = () => {
                 <span tw="flex space-x-3">
                   {enableOCR ? (
                     <IconButton
+                      title="开启 OCR 识别"
                       ref={ocrToolButtonRef}
                       tw="p-1 text-gray-800"
                       onClick={() => !loadingOCR && setShowOCRTool(true)}>
@@ -184,6 +210,7 @@ const App: React.FC = () => {
                   ) : undefined}
 
                   <IconButton
+                    title="关闭"
                     ref={closeButtonRef}
                     tw="p-1 text-gray-800"
                     onClick={() => setClose(true)}>

src/pages/Content/components/TranslationItem/index.tsx

@@ -174,7 +174,7 @@ const TranslationItem: React.FC<{
           <div tw="h-full">
             {config ? (
               <select
-                tw="px-2 py-0 h-full rounded-md truncate border-none bg-blue-50 text-gray-800"
+                tw="px-2 py-0 h-full rounded-md truncate border-none bg-blue-50 text-gray-800 text-base text-base"
                 css={css`
                   width: 100px;
                 `}

src/pages/Content/index.tsx

@@ -97,6 +97,7 @@ const onMouseUp = (e: MouseEvent) => {
       highlightSelection(lastSelection.selection)
 
       addTranslateJob({
+        type: 'translate',
         anchorId,
         id,
         text: lastSelection.text,
@@ -162,6 +163,24 @@ const attachListeners = () => {
     client.on('open_extension', () => {
       initApp()
     })
+
+    client.on('toggle_ocr', () => {
+      if (isAppAttached) {
+        initApp()
+        translationStack.push({
+          type: 'directive',
+          directive: 'toggle_ocr',
+        })
+      } else {
+        initApp()
+        setTimeout(() => {
+          translationStack.push({
+            type: 'directive',
+            directive: 'toggle_ocr',
+          })
+        }, 50)
+      }
+    })
   })
 }