refactor: Paste in the input box automatically;

Remove optional permissions "clipboardRead"; Due to extension can not pass the test of chrome with "the permission of clipboardRead has not been used"; After my testing, extension don't need this permission to implement this feature; So I remove the permission and refactor this feature;
chunibyocola · Nov 14, 2021 · cd9fab9 · cd9fab9
1 parent 725b2c3
commit cd9fab9
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 35 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -362,6 +362,9 @@
     "optionsTranslateToTargetLanguage": {
         "message": "Translate to target language"
     },
+    "optionsAutoPasteInTheInputBoxErrorDescription": {
+        "message": "Error: Failed to get the permission of reading clipboard. You need to allow extension to read your clipboard. You can click on the icon on the right of the URL bar to allow this extension to read the clipboard. You can also allow the requestion in the following link:"
+    },
     "themePreset": {
         "message": "Preset"
     },

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -362,6 +362,9 @@
     "optionsTranslateToTargetLanguage": {
         "message": "目標言語に翻訳します"
     },
+    "optionsAutoPasteInTheInputBoxErrorDescription": {
+        "message": "エラー：クリップボードの読み取り許可を取得できませんでした。クリップボードを読み取りの許可はこの拡張機能にとっては必要でございます。URLバーの右側のアイコンをクリックして拡張機能のクリップボードへのアクセスを許可できます。次のリンクでも許可を管理できます："
+    },
     "themePreset": {
         "message": "プリセット"
     },

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -362,6 +362,9 @@
     "optionsTranslateToTargetLanguage": {
         "message": "翻译为目标语言"
     },
+    "optionsAutoPasteInTheInputBoxErrorDescription": {
+        "message": "错误：未能获得读取剪贴板的许可。你需要允许该扩展读取剪贴板。你可以点击 URL 栏右边的图标来允许该扩展访问剪贴板。同样你可以通过以下链接来管理剪贴板权限："
+    },
     "themePreset": {
         "message": "预设"
     },

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -362,6 +362,9 @@
     "optionsTranslateToTargetLanguage": {
         "message": "翻譯為目標語言"
     },
+    "optionsAutoPasteInTheInputBoxErrorDescription": {
+        "message": "錯誤：未能獲得讀取剪貼板的許可。你需要允許該擴充功能讀取剪貼板。你可以點擊 URL 欄右邊的圖標來允許該擴充功能訪問剪貼板。同樣你可以通過以下鏈接來管理剪貼板權限："
+    },
     "themePreset": {
         "message": "預設"
     },

diff --git a/public/manifest.json b/public/manifest.json
@@ -63,9 +63,6 @@
   "host_permissions": [
     "<all_urls>"
   ],
-  "optional_permissions": [
-    "clipboardRead"
-  ],
   "content_scripts" : [
     {
       "matches": ["http://*/*", "https://*/*"],

diff --git a/src/constants/defaultOptions.ts b/src/constants/defaultOptions.ts
@@ -51,7 +51,6 @@ const defaultOptions: DefaultOptions = {
     doNotRespondInTextBox: false,
     autoTranslateAfterInput: true,
     contextMenus: defaultContextMenus,
-    clipboardReadPermission: false,
     autoPasteInTheInputBox: false,
     enableInsertResult: false,
     autoInsertResult: false,

diff --git a/src/entry/options/Options/index.tsx b/src/entry/options/Options/index.tsx
@@ -68,7 +68,6 @@ const Options: React.FC = () => {
         doNotRespondInTextBox,
         autoTranslateAfterInput,
         contextMenus,
-        clipboardReadPermission,
         autoPasteInTheInputBox,
         enableInsertResult,
         autoInsertResult,
@@ -108,7 +107,6 @@ const Options: React.FC = () => {
             <div className='sub-title' id='clipboard'>{getMessage('optionsClipboard')}</div>
             <Clipboard
                 updateStorage={updateStorage}
-                clipboardReadPermission={clipboardReadPermission}
                 autoPasteInTheInputBox={autoPasteInTheInputBox}
             />
             <div className='sub-title' id='web-page-translating'>{getMessage('optionsWebPageTranslating')}</div>

diff --git a/src/entry/options/Options/sections/Clipboard.tsx b/src/entry/options/Options/sections/Clipboard.tsx
@@ -1,44 +1,45 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { GenericOptionsProps } from '..';
 import { getMessage } from '../../../../public/i18n';
 import { DefaultOptions } from '../../../../types';
 import OptionToggle from '../../OptionToggle';
 
 type ClipboardProps = GenericOptionsProps<Pick<
     DefaultOptions,
-    'clipboardReadPermission' |
     'autoPasteInTheInputBox'
 >>;
 
-const Clipboard: React.FC<ClipboardProps> = ({ updateStorage, clipboardReadPermission, autoPasteInTheInputBox }) => {
-    const updateClipboardReadPermission = () => {
-        if (clipboardReadPermission) {
-            chrome.permissions.remove({ permissions: ['clipboardRead'] }, removed => removed && updateStorage('clipboardReadPermission', false));
-        }
-        else {
-            chrome.permissions.request({ permissions: ['clipboardRead'] }, granted => granted && updateStorage('clipboardReadPermission', true));
-        }
-    };
+const Clipboard: React.FC<ClipboardProps> = ({ updateStorage, autoPasteInTheInputBox }) => {
+    const [error, setError] = useState(false);
 
     return (
         <div className='opt-section'>
             <div className='opt-section-row'>
                 <OptionToggle
-                    id='allow-extension-to-read-clipboard'
-                    message='optionsAllowExtensionToReadClipboard'
-                    checked={clipboardReadPermission}
-                    onClick={updateClipboardReadPermission}
+                    id='read-clipboard-automatically'
+                    message='optionsReadClipboardAutomatically'
+                    checked={autoPasteInTheInputBox}
+                    onClick={() => {
+                        if (autoPasteInTheInputBox) {
+                            updateStorage('autoPasteInTheInputBox', false);
+                        }
+                        else {
+                            navigator.clipboard.readText().then(() => {
+                                error && setError(false);
+                                updateStorage('autoPasteInTheInputBox', true);
+                            }).catch(() => {
+                                setError(true);
+                            });
+                        }
+                    }}
                 />
-                <div className='item-description'>{getMessage('optionsAllowExtensionToReadClipboardDescription')}</div>
-                <div className='mt10-ml30'>
-                    <OptionToggle
-                        id='read-clipboard-automatically'
-                        message='optionsReadClipboardAutomatically'
-                        checked={autoPasteInTheInputBox}
-                        onClick={() => updateStorage('autoPasteInTheInputBox', !autoPasteInTheInputBox)}
-                    />
-                    <div className='item-description'>{getMessage('optionsReadClipboardAutomaticallyDescription')}</div>
-                </div>
+                <div className='item-description'>{getMessage('optionsReadClipboardAutomaticallyDescription')}</div>
+                {error && <div className='item-description'>
+                    {getMessage('optionsAutoPasteInTheInputBoxErrorDescription')}
+                    <span onClick={() => chrome.tabs.create({ url: 'chrome://settings/content/clipboard' })} className='span-link'>
+                        settings/content/clipboard
+                    </span>
+                </div>}
             </div>
         </div>
     );

diff --git a/src/entry/popup/MultipleTranslateResult/index.tsx b/src/entry/popup/MultipleTranslateResult/index.tsx
@@ -79,7 +79,7 @@ const MultipleTranslateResult: React.FC<MultipleTranslateResultProps> = ({ autoT
             dispatch(callOutPanel());
         };
 
-        getOptions().autoPasteInTheInputBox && chrome.permissions.contains({ permissions: ['clipboardRead'] }, result => result && readClipboardText());
+        getOptions().autoPasteInTheInputBox && readClipboardText();
     }, [dispatch]);
 
     return (

diff --git a/src/entry/popup/SingleTranslateResult/index.tsx b/src/entry/popup/SingleTranslateResult/index.tsx
@@ -73,7 +73,7 @@ const SingleTranslateResult: React.FC<SingleTranslateResultProps> = ({ autoTrans
             dispatch(callOutPanel());
         };
 
-        getOptions().autoPasteInTheInputBox && chrome.permissions.contains({ permissions: ['clipboardRead'] }, result => result && readClipboardText());
+        getOptions().autoPasteInTheInputBox && readClipboardText();
     }, [dispatch]);
 
     return (

diff --git a/src/entry/separate/Separate/index.tsx b/src/entry/separate/Separate/index.tsx
@@ -92,7 +92,7 @@ const Separate: React.FC = () => {
         };
 
         if (getOptions().autoPasteInTheInputBox && !text) {
-            chrome.permissions.contains({ permissions: ['clipboardRead'] }, result => result && readClipboardText());
+            readClipboardText();
         }
         else {
             dispatch(callOutPanel());

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -100,7 +100,6 @@ export type DefaultOptions = {
     doNotRespondInTextBox: boolean;
     autoTranslateAfterInput: boolean;
     contextMenus: OptionsContextMenu[];
-    clipboardReadPermission: boolean;
     autoPasteInTheInputBox: boolean;
     enableInsertResult: boolean;
     autoInsertResult: boolean;
@@ -123,4 +122,5 @@ export type DefaultOptions = {
 export type DeprecatedOptions = {
     showButtonAfterSelect: boolean;
     enableContextMenus: boolean;
+    clipboardReadPermission: boolean;
 };