Merge branch 'dev'

Author: geekdada

.eslintignore

@@ -0,0 +1,2 @@
+/build
+/release

.eslintrc.js

@@ -4,14 +4,14 @@ module.exports = {
     node: true,
   },
   extends: [
-    'prettier',
-    'prettier/@typescript-eslint',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    project: './tsconfig.eslint.json',
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint'],
@@ -24,4 +24,9 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 0,
     'react/prop-types': 0,
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 }

README.md

@@ -1,6 +1,6 @@
-# a-translator-chrome-extension
+# DeepL Translate for Chrome
 
-一个支持 DeepL 翻译的 Chrome 插件（需自己购买 DeepL API 计划）。
+Chrome DeepL 翻译插件 （需自己购买 DeepL API 计划）。
 
 ## 安装
 

package.json

@@ -1,18 +1,18 @@
 {
-  "name": "a-translator-chrome-extension",
+  "name": "deepl-chrome-extension",
   "version": "0.3.1",
   "description": "DeepL translate for Chrome",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/geekdada/a-translator-chrome-extension"
+    "url": "https://github.com/geekdada/deepl-chrome-extension"
   },
   "scripts": {
     "start": "cross-env NODE_ENV=development node scripts/webserver.js",
     "build": "cross-env NODE_ENV=production webpack",
     "release": "run-s build && sh scripts/build.sh",
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,css,html}'",
-    "lint": "eslint --ext .ts,.tsx,.js,.jsx",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "pub": "np --no-publish --no-release-draft",
     "version": "npm run changelog && git add ."
@@ -34,7 +34,7 @@
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.11.2",
     "@tailwindcss/forms": "^0.2.1",
-    "@types/chrome": "0.0.128",
+    "@types/chrome": "0.0.145",
     "@types/crypto-js": "^4.0.1",
     "@types/fs-extra": "^9.0.6",
     "@types/lodash-es": "^4.17.4",
@@ -65,7 +65,8 @@
     "css-loader": "^5.0.1",
     "dotenv": "^8.2.0",
     "eslint": "^7.16.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
     "file-loader": "^6.2.0",
@@ -94,7 +95,7 @@
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-hot-loader": "^4.13.0",
-    "react-resizable": "^1.11.0",
+    "react-resizable": "^3.0.4",
     "react-scroll-to-bottom": "^4.1.0",
     "sass-loader": "^10.1.0",
     "scrollparent": "^2.0.1",

scripts/webserver.js

@@ -1,10 +1,10 @@
 process.env.ASSET_PATH = '/'
 
-const WebpackDevServer = require('webpack-dev-server'),
-  webpack = require('webpack'),
-  config = require('../webpack.config'),
-  env = require('./env'),
-  path = require('path')
+const WebpackDevServer = require('webpack-dev-server')
+const webpack = require('webpack')
+const config = require('../webpack.config')
+const env = require('./env')
+const path = require('path')
 
 const options = {
   notHotReload: ['contentScript'],

src/common/api.ts

@@ -17,7 +17,7 @@ class Client {
         if (error.response) {
           const { data, status } = error.response
 
-          if (data.message) {
+          if (data?.message) {
             error.message = `${data.message} (${status})`
           }
         }
@@ -49,6 +49,8 @@ class Client {
 
   private getAPI(): string {
     switch (this.region) {
+      case 'free':
+        return 'https://api-free.deepl.com'
       default:
         return 'https://api.deepl.com'
     }

src/common/constant.ts

@@ -1,15 +1,33 @@
 export const supportedLanguages = {
   ZH: '中文',
-  'EN-US': 'English (American)',
-  'EN-GB': 'English (British)',
-  JA: '日本語',
+  BG: 'Bulgarian',
+  CS: 'Czech',
+  DA: 'Danish',
   DE: 'German',
-  FR: 'French',
+  EL: 'Greek',
+  'EN-GB': 'English (British)',
+  'EN-US': 'English (American)',
   ES: 'Spanish',
-  'PT-PT': 'Portuguese',
-  'PT-BR': 'Portuguese (Brazilian)',
+  ET: 'Estonian',
+  FI: 'Finnish',
+  FR: 'French',
+  HU: 'Hungarian',
   IT: 'Italian',
+  JA: 'Japanese',
+  LT: 'Lithuanian',
+  LV: 'Latvian',
   NL: 'Dutch',
   PL: 'Polish',
+  'PT-PT': 'Portuguese',
+  'PT-BR': 'Portuguese (Brazilian)',
+  RO: 'Romanian',
   RU: 'Russian',
+  SK: 'Slovak',
+  SL: 'Slovenian',
+  SV: 'Swedish',
+}
+
+export const supportedRegions = {
+  default: 'DeepL Pro',
+  free: '免费',
 }

src/pages/Background/common/ocr-client.ts renamed to src/common/ocr-client.ts

@@ -2,6 +2,17 @@ import defaultsDeep from 'lodash-es/defaultsDeep'
 import { SHA256, HmacSHA256, enc } from 'crypto-js'
 import axios from 'axios'
 
+export const OcrRegions = {
+  'ap-shanghai': '华东地区(上海)',
+  'ap-beijing': '华北地区(北京)',
+  'ap-guangzhou': '华南地区(广州)',
+  'ap-hongkong': '港澳台地区(中国香港)',
+  'ap-seoul': '亚太东北(首尔)',
+  'ap-singapore': '亚太东南(新加坡)',
+  'na-toronto': '北美地区(多伦多)',
+}
+export type OcrRegionKeys = keyof typeof OcrRegions
+
 export class TcRequestError extends Error {
   code?: string
 
@@ -16,7 +27,7 @@ export class OcrClient {
   private config: {
     secretId: string
     secretKey: string
-    region: string
+    region: OcrRegionKeys
   }
   private requestConfig = {
     host: 'ocr.tencentcloudapi.com',
@@ -31,7 +42,11 @@ export class OcrClient {
     signedHeaders: 'content-type;host',
   }
 
-  constructor(config: { secretId: string; secretKey: string; host?: string }) {
+  constructor(config: {
+    secretId: string
+    secretKey: string
+    region?: OcrRegionKeys
+  }) {
     this.config = defaultsDeep({}, config, {
       region: 'ap-shanghai',
     })
@@ -94,9 +109,10 @@ export class OcrClient {
       })
   }
 
-  private signPayload(
-    payload: Record<string, any>,
-  ): { authorization: string; timestamp: number } {
+  private signPayload(payload: Record<string, any>): {
+    authorization: string
+    timestamp: number
+  } {
     const hashedRequestPayload = SHA256(JSON.stringify(payload))
     const canonicalRequest = [
       this.requestConfig.httpRequestMethod,

src/common/types.ts

@@ -1,17 +1,20 @@
-import { supportedLanguages } from './constant'
+import { supportedLanguages, supportedRegions } from './constant'
+import { OcrRegionKeys } from './ocr-client'
 
 export interface Config {
   token: string
   targetLang: SupportLanguageKeys
   region: APIRegions
   ocrSecretId?: string
   ocrSecretKey?: string
+  ocrRegion?: OcrRegionKeys
   hoverButton?: boolean
 }
 
 export type SupportLanguageKeys = keyof typeof supportedLanguages
+export type SupportRegionKeys = keyof typeof supportedRegions
 
-export type APIRegions = 'default'
+export type APIRegions = 'default' | 'free'
 
 export type TranslateResult = {
   translations: Array<{

src/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "A Translator",
+  "name": "DeepL Translate",
   "permissions": [
     "http://*/*",
     "https://*/*",
@@ -19,7 +19,7 @@
     "default_icon": {
       "128": "icon-128.png"
     },
-    "default_title": "A Translator"
+    "default_title": "DeepL Translate"
   },
   "icons": {
     "128": "icon-128.png"

src/pages/Background/common/server.ts

@@ -4,7 +4,7 @@ import { createServer } from 'connect.io'
 import Client from '../../../common/api'
 import logger from '../../../common/logger'
 import { Config } from '../../../common/types'
-import { OcrClient } from './ocr-client'
+import { OcrClient } from '../../../common/ocr-client'
 import { Handler } from './types'
 import { cropImage } from './utils'
 
@@ -107,6 +107,7 @@ const onOCR: Handler<{
     const client = new OcrClient({
       secretId: config.ocrSecretId,
       secretKey: config.ocrSecretKey,
+      region: config.ocrRegion,
     })
     const data = await client.request({ dataUrl: payload.dataUrl })
 

src/pages/Background/index.ts

@@ -68,7 +68,7 @@ chrome.commands.onCommand.addListener(function (command) {
 
 chrome.contextMenus.create({
   id: 'ate',
-  title: 'A Translator',
+  title: 'DeepL Translate',
   contexts: ['page'],
 })
 

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

@@ -189,7 +189,7 @@ const App: React.FC = () => {
               <div
                 className="ate_App__header"
                 tw="bg-purple-800 px-5 py-3 text-white font-bold text-lg cursor-move flex justify-between items-center">
-                <span>A Translator</span>
+                <span>DeepL Translate</span>
                 <span tw="flex space-x-3">
                   {enableOCR ? (
                     <IconButton

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

@@ -4,8 +4,8 @@ import { useSnackbar } from 'notistack'
 import { Collapse } from 'react-collapse'
 import scrollParent from 'scrollparent'
 import tw, { css } from 'twin.macro'
-import { supportedLanguages } from '../../../../common/constant'
 
+import { supportedLanguages } from '../../../../common/constant'
 import logger from '../../../../common/logger'
 import { SupportLanguageKeys, TranslateResult } from '../../../../common/types'
 import IconButton from '../../../../components/IconButton'