Add option to open page translation result

src/_locales/en/messages.json

@@ -212,6 +212,21 @@
   "ifShowMenuCaptionLabel": {
     "message": "Add items to the context menu displayed when right clicking on the web page or the tab."
   },
+  "pageTranslationLabel": {
+    "message": "Page translation"
+  },
+  "pageTranslationOpenToLabel": {
+    "message": "Tab to display translation results"
+  },
+  "pageTranslationOpenToCaptionLabel": {
+    "message": "Specify the tab to display the translation results when you excute \"Translate this page\"."
+  },
+  "newTabLabel": {
+    "message": "New tab"
+  },
+  "currentTabLabel": {
+    "message": "Current tab"
+  },
   "styleLabel": {
     "message": "Style"
   },
@@ -788,4 +803,4 @@
   "lang_zh": {
     "message": "Chinese"
   }
-}
+}

src/background/keyboardShortcuts.js

@@ -4,6 +4,7 @@ import log from "loglevel";
 import { getSettings, setSettings } from "src/settings/settings";
 import getShortcut from "src/common/getShortcut";
 import manifest from "src/manifest-chrome.json";
+import openUrl from "../common/openUrl";
 
 const logDir = "background/keyboardShortcuts";
 
@@ -55,10 +56,7 @@ const translatePage = async () => {
   const targetLang = getSettings("targetLang");
   const encodedPageUrl = encodeURIComponent(tabUrl);
   const translationUrl = `https://translate.google.com/translate?hl=${targetLang}&tl=${targetLang}&sl=auto&u=${encodedPageUrl}`;
+  const isCurrentTab = getSettings("pageTranslationOpenTo") === "currentTab";
 
-  browser.tabs.create({
-    url: translationUrl,
-    active: true,
-    index: tab.index + 1
-  });
+  openUrl(translationUrl, isCurrentTab);
 };

src/background/menus.js

@@ -82,12 +82,19 @@ function translatePage(info, tab) {
   const targetLang = getSettings("targetLang");
   const encodedPageUrl = encodeURIComponent(info.pageUrl);
   const translationUrl = `https://translate.google.com/translate?hl=${targetLang}&tl=${targetLang}&sl=auto&u=${encodedPageUrl}`;
+  const isCurrentTab = getSettings("pageTranslationOpenTo") === "currentTab";
 
-  browser.tabs.create({
-    url: translationUrl,
-    active: true,
-    index: tab.index + 1
-  });
+  if (isCurrentTab) {
+    browser.tabs.update(tab.id, {
+      url: translationUrl
+    });
+  } else {
+    browser.tabs.create({
+      url: translationUrl,
+      active: true,
+      index: tab.index + 1
+    });
+  }
 }
 
 function translateLink(info, tab) {

src/common/openUrl.js

@@ -1,6 +1,8 @@
 import browser from "webextension-polyfill";
 
-export default async url => {
+export default async (url, isCurrentTab = false) => {
   const activeTab = (await browser.tabs.query({ currentWindow: true, active: true }))[0];
-  browser.tabs.create({ url: url, index: activeTab.index + 1 });
+
+  if (isCurrentTab) browser.tabs.update({ url: url });
+  else browser.tabs.create({ url: url, index: activeTab.index + 1 });
 };

src/popup/components/Footer.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import browser from "webextension-polyfill";
 import openUrl from "src/common/openUrl";
 import "../styles/Footer.scss";
+import { getSettings } from "../../settings/settings";
 
 export default class Footer extends Component {
   constructor(props) {
@@ -12,7 +13,8 @@ export default class Footer extends Component {
     const { tabUrl, targetLang } = this.props;
     const encodedUrl = encodeURIComponent(tabUrl);
     const translateUrl = `https://translate.google.com/translate?hl=${targetLang}&tl=${targetLang}&sl=auto&u=${encodedUrl}`;
-    openUrl(translateUrl);
+    const isCurrentTab = getSettings("pageTranslationOpenTo") === "currentTab";
+    openUrl(translateUrl, isCurrentTab);
   };
 
   handleChange = e => {

src/settings/defaultSettings.js

@@ -299,6 +299,28 @@ export default [
       }
     ]
   },
+  {
+    category: "pageTranslationLabel",
+    elements: [
+      {
+        id: "pageTranslationOpenTo",
+        title: "pageTranslationOpenToLabel",
+        captions: ["pageTranslationOpenToCaptionLabel"],
+        type: "select",
+        default: "newTab",
+        options: [
+          {
+            name: "newTabLabel",
+            value: "newTab"
+          },
+          {
+            name: "currentTabLabel",
+            value: "currentTab"
+          },
+        ]
+      }
+    ]
+  },
   {
     category: "styleLabel",
     elements: [