Add option to change to second lang on web page

src/_locales/en/messages.json

@@ -76,6 +76,9 @@
   "ifCheckLangCaptionLabel": {
     "message": "Detects the language of the selected text, and if it is the same as the target language, the button is not displayed."
   },
+  "ifChangeSecondLangOnPageCaptionLabel": {
+    "message": "Detects the language of the selected text, and if it is the same as the default target language, translate it into the second language."
+  },
 
   "toolbarLabel": {
     "message": "Toolbar popup"

src/content/components/TranslateContainer.js

@@ -46,8 +46,7 @@ const getSelectedPosition = () => {
   return selectedPosition;
 };
 
-const translateText = async text => {
-  const targetLang = getSettings("targetLang");
+const translateText = async (text, targetLang = getSettings("targetLang")) => {
   const result = await translate(text, "auto", targetLang);
   return result;
 };
@@ -142,7 +141,15 @@ export default class TranslateContainer extends Component {
     const useClickedPosition = panelReferencePoint === "clickedPoint" && clickedPosition !== null;
     const panelPosition = useClickedPosition ? clickedPosition : this.selectedPosition;
 
-    const result = await translateText(this.selectedText);
+    let result = await translateText(this.selectedText);
+    if (getSettings("ifChangeSecondLangOnPage")) {
+      const targetLang = getSettings("targetLang");
+      const secondLang = getSettings("secondTargetLang");
+      const shouldSwitchSecondLang =
+        result.sourceLanguage === targetLang && result.percentage > 0 && targetLang !== secondLang;
+      if (shouldSwitchSecondLang) result = await translateText(this.selectedText, secondLang);
+    }
+
     this.setState({
       shouldShowPanel: true,
       panelPosition: panelPosition,

src/settings/defaultSettings.js

@@ -28,6 +28,15 @@ export default [
         options: langListOptions,
         useRawOptionName: true
       },
+      {
+        id: "secondTargetLang",
+        title: "secondTargetLangLabel",
+        captions: ["secondTargetLangCaptionLabel"],
+        type: "select",
+        default: defaultLangs.secondTargetLang,
+        options: langListOptions,
+        useRawOptionName: true
+      },
       {
         id: "ifShowCandidate",
         title: "ifShowCandidateLabel",
@@ -77,30 +86,19 @@ export default [
             hr: true
           }
         ]
+      },
+      {
+        id: "ifChangeSecondLangOnPage",
+        title: "ifChangeSecondLangLabel",
+        captions: ["ifChangeSecondLangOnPageCaptionLabel"],
+        type: "checkbox",
+        default: false
       }
     ]
   },
   {
     category: "toolbarLabel",
     elements: [
-      {
-        id: "ifChangeSecondLang",
-        title: "ifChangeSecondLangLabel",
-        captions: ["ifChangeSecondLangCaptionLabel"],
-        type: "checkbox",
-        default: false,
-        childElements: [
-          {
-            id: "secondTargetLang",
-            title: "secondTargetLangLabel",
-            captions: ["secondTargetLangCaptionLabel"],
-            type: "select",
-            default: defaultLangs.secondTargetLang,
-            options: langListOptions,
-            useRawOptionName: true
-          }
-        ]
-      },
       {
         id: "waitTime",
         title: "waitTimeLabel",
@@ -109,6 +107,13 @@ export default [
         min: 0,
         placeholder: 500,
         default: 500
+      },
+      {
+        id: "ifChangeSecondLang",
+        title: "ifChangeSecondLangLabel",
+        captions: ["ifChangeSecondLangCaptionLabel"],
+        type: "checkbox",
+        default: false
       }
     ]
   },