feat: add config for hover button

Author: geekdada

src/common/types.ts

@@ -6,6 +6,7 @@ export interface Config {
   region: APIRegions
   ocrSecretId?: string
   ocrSecretKey?: string
+  hoverButton?: boolean
 }
 
 export type SupportLanguageKeys = keyof typeof supportedLanguages

src/pages/Content/index.tsx

@@ -1,4 +1,5 @@
 import './common/polyfill'
+import cc from 'chrome-call'
 
 import React from 'react'
 import { render } from 'react-dom'
@@ -11,6 +12,7 @@ import './styles/index.scss'
 
 import logger from '../../common/logger'
 import rangy from '../../common/rangy'
+import { Config } from '../../common/types'
 import server from './common/server'
 import translationStack from './common/translation-stack'
 import { TextSelection, TranslateJob } from './common/types'
@@ -52,10 +54,18 @@ const main = async () => {
       document.querySelector<HTMLBodyElement>('body')?.append(iconContainer)
       document.querySelector<HTMLBodyElement>('body')?.append(container)
 
-      attachListeners()
+      cc(chrome.storage.sync, 'get').then((config: Partial<Config>) => {
+        const hoverButton =
+          config.hoverButton === undefined || config.hoverButton
 
-      // TODO: remove before deploying
-      // initApp()
+        if (hoverButton) {
+          document.querySelector<HTMLBodyElement>('body')?.append(iconContainer)
+        }
+
+        attachListeners({
+          hoverButton,
+        })
+      })
     } catch (err) {
       logger.error({
         err,
@@ -156,8 +166,10 @@ const addTranslateJob = (job: TranslateJob) => {
   translationStack.push(job)
 }
 
-const attachListeners = () => {
-  document.addEventListener('mouseup', onMouseUp, false)
+const attachListeners = (config: { hoverButton: boolean }) => {
+  if (config.hoverButton) {
+    document.addEventListener('mouseup', onMouseUp, false)
+  }
 
   server.on('connect', (client) => {
     client.on('open_extension', () => {

src/pages/Options/Options.tsx

@@ -4,7 +4,7 @@ import React, {
   useEffect,
   useState,
 } from 'react'
-import tw, { css } from 'twin.macro'
+import tw, { css, styled } from 'twin.macro'
 import { Global } from '@emotion/react'
 import cc from 'chrome-call'
 
@@ -13,12 +13,17 @@ import { supportedLanguages } from '../../common/constant'
 import { APIRegions, Config, SupportLanguageKeys } from '../../common/types'
 import OptionSection from './components/OptionSection'
 
+const InputGroup = styled('div')`
+  ${tw`flex space-x-3 items-center`}
+`
+
 const Options: React.FC = () => {
   const [targetLang, setTargetLang] = useState('ZH')
   const [token, setToken] = useState('')
   const [region, setRegion] = useState<APIRegions>('default')
   const [ocrSecretId, setOCRSecretId] = useState('')
   const [ocrSecretKey, setOCRSecretKey] = useState('')
+  const [hoverButton, setHoverButton] = useState(true)
 
   const onSubmit: FormEventHandler = (e) => {
     e.preventDefault()
@@ -29,6 +34,7 @@ const Options: React.FC = () => {
         region,
         ocrSecretId,
         ocrSecretKey,
+        hoverButton,
       })
 
       window.alert('保存成功')
@@ -63,6 +69,7 @@ const Options: React.FC = () => {
       if (config.ocrSecretId !== undefined) setOCRSecretId(config.ocrSecretId)
       if (config.ocrSecretKey !== undefined)
         setOCRSecretKey(config.ocrSecretKey)
+      if (config.hoverButton !== undefined) setHoverButton(config.hoverButton)
     })
   }, [])
 
@@ -165,6 +172,18 @@ const Options: React.FC = () => {
               </div>
             </OptionSection>
 
+            <OptionSection title={'其它设置'}>
+              <InputGroup>
+                <input
+                  type="checkbox"
+                  id="hover-button"
+                  checked={hoverButton}
+                  onChange={(e) => setHoverButton(e.target.checked)}
+                />
+                <label htmlFor="hover-button">开启网页悬浮按钮</label>
+              </InputGroup>
+            </OptionSection>
+
             <OptionSection title={'🔗 相关链接'}>
               <ul tw="space-y-2">
                 <li>