🚧 Add baidu translation feature.

src/background/background.js

@@ -5,15 +5,15 @@ import {
   createAndSetDefaultGroupForCurrentPage,
   deleteWord,
   favourWord,
-  generateQuestionAnswers,
   getAudioContent,
   getCurrentTabId,
   getCurrentTabUrl,
   getTranslation,
+  getTranslationFromBaidu,
   saveTheGuardianArticle,
   searchWord,
   sendMessageFromBackgroundScriptToContentScript,
-  setLoginToken,
+  setLoginToken
 } from "./background.utils";
 
 // TED 网站，当前页面URL
@@ -188,6 +188,20 @@ browser.runtime.onMessage.addListener(async (message) => {
       // console.log(t);
       // await generateQuestionAnswers(t["guardian-article-id"]);
       break;
+    case "translate-paragraph":
+      sendMessageFromBackgroundScriptToContentScript({
+        type: "translate-paragraph",
+      });
+      break;
+    case "translate-paragraph-from-content":
+      console.log(message.message);
+      const result = await getTranslationFromBaidu(message.message);
+      console.log(result);
+      sendMessageFromBackgroundScriptToContentScript({
+        type: "translation-result",
+        message: result,
+      });
+      break;
     case "save-guardian-article":
       console.log("Save guardian article...");
       await browser.storage.local.set({ "guardian-article-id": "" });

src/background/background.utils.js

@@ -216,3 +216,13 @@ export async function generateQuestionAnswers(id) {
   // return response;
 }
 // #endregion
+
+export async function getTranslationFromBaidu(message) {
+  const client = new HttpClient();
+  const { content, classId } = message;
+  const response = await client.post("/baidu", {
+    content,
+  });
+
+  return { response, classId };
+}

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Stylish Reader",
   "description": "Help you learn English better and easier.",
   "developer": { "name": "Toly Feng", "url": "https://stylishreader.com" },
-  "version": "0.0.28",
+  "version": "0.0.29",
   "icons": {
     "48": "icons/stylish-reader-48.png"
   },

src/plugins/general/constants.js

@@ -12,6 +12,9 @@ export const phraseFloatingPanelId = "stylish-reader-phrase-panel";
 
 export const clickableWordClassName = "stylish-reader-clickable-word";
 
+export const translationParagraphClassName =
+  "stylish-reader-translation-paragraph";
+
 export const phraseFloatingIconSize = { height: 40, width: 40 };
 
 export const phraseFloatingPanelSize = { height: 440, width: 260 };

src/plugins/general/utils.js

@@ -18,6 +18,7 @@ import {
   translationFloatingPanelId,
   translationFloatingPanelShadowRootId,
   translationPanelSize,
+  translationParagraphClassName,
 } from "./constants";
 
 let currentSelectionContent = "";
@@ -85,6 +86,61 @@ export function goThroughDomAndGenerateCustomElement(targetWordList) {
   });
 }
 
+let isTranslationParagraphOn = false;
+let translationParagraphList = [];
+export async function addTranslationParagraph() {
+  if (!isTranslationParagraphOn) {
+    const paragraphNodeList = document.querySelectorAll("p");
+    const headerNodeList = document.querySelectorAll("h1,h2,h3");
+    const nodeList = [...headerNodeList, ...paragraphNodeList];
+    for (let index = 0; index < nodeList.length; index++) {
+      let node = nodeList[index];
+      const parent = node.parentNode;
+      const newNode = document.createElement("span");
+      // 调翻译API
+      translationParagraphList.push({
+        content: node.textContent,
+        classId: translationParagraphClassName + `-${index}`,
+      });
+      sendMessageFromContentScriptToBackgroundScript(
+        "translate-paragraph-from-content",
+        {
+          content: node.textContent,
+          classId: translationParagraphClassName + `-${index}`,
+        }
+      );
+      newNode.textContent = node.textContent;
+      newNode.classList.add(translationParagraphClassName + `-${index}`);
+      newNode.classList.add(translationParagraphClassName);
+      newNode.style.color = "oklch(0.704 0.04 256.788)";
+      if (parent.childNodes.length > 1) {
+        const sibling = node.nextSibling;
+        parent.insertBefore(newNode, sibling);
+      } else {
+        parent.appendChild(newNode);
+      }
+      await waitForSeconds(1000);
+    }
+    isTranslationParagraphOn = true;
+  } else {
+    const nodeList = document.querySelectorAll(
+      `.${translationParagraphClassName}`
+    );
+    nodeList.forEach((node) => {
+      node.remove();
+    });
+    isTranslationParagraphOn = false;
+  }
+}
+
+export function addTranslationContentBelowParagraph(
+  classId,
+  translationContent
+) {
+  const domElement = document.querySelector(`.${classId}`);
+  domElement.textContent = translationContent;
+}
+
 function removeUnMarkedWord(word) {
   const markedNodeList = document.querySelectorAll(
     `.${clickableWordClassName}`
@@ -814,3 +870,7 @@ export function playAudioFromFloatingPanel(response) {
   audio.src = u;
   audio.play();
 }
+
+export function waitForSeconds(number) {
+  return new Promise((resolve) => setTimeout(resolve, number));
+}

src/plugins/utils/utils.js

@@ -2,6 +2,8 @@
 
 import { backendServerUrl, loginTokenKey } from "../entryPoint/constants";
 import {
+  addTranslationContentBelowParagraph,
+  addTranslationParagraph,
   playAudioFromFloatingPanel,
   sendMessageFromGeneralScriptToFloatingPanel,
 } from "../general/utils";
@@ -237,7 +239,7 @@ export function sendMessageFromContentScriptToBackgroundScript(
  * 监听从background脚本发送过来的消息
  */
 export function listenEventFromBackgroundScript() {
-  browser.runtime.onMessage.addListener((message) => {
+  browser.runtime.onMessage.addListener(async (message) => {
     switch (message.type) {
       case "youtube":
         if (isYouTubeWebSite) {
@@ -275,6 +277,16 @@ export function listenEventFromBackgroundScript() {
       case "play-audio-from-floating-panel":
         playAudioFromFloatingPanel(message.message);
         break;
+      case "translate-paragraph":
+        await addTranslationParagraph();
+        break;
+      case "translation-result":
+        const { classId, response } = message.message;
+        addTranslationContentBelowParagraph(
+          classId,
+          response.data.trans_result[0].dst
+        );
+        break;
       default:
         break;
     }

src/popup/src/views/HomeView.vue

@@ -6,13 +6,23 @@
     >
       Generate Questions
     </div> -->
+    <div
+      @click="handleTranslateParagraph"
+      class="px-2 py-1 text-center shadow-sm shadow-slate-200 cursor-pointer active:shadow-pink-700 active:translate-x-1 active:translate-y-1 active:bg-pink-400 rounded-sm active:text-white"
+    >
+      Translate Paragraph
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { sendMessageFromPopupToBackgroundScript } from '@/utils'
 
-function handleGenerateQuestions() {
-  sendMessageFromPopupToBackgroundScript('generate-questions', { content: '' })
+// function handleGenerateQuestions() {
+//   sendMessageFromPopupToBackgroundScript('generate-questions', { content: '' })
+// }
+
+function handleTranslateParagraph() {
+  sendMessageFromPopupToBackgroundScript('translate-paragraph', { content: '' })
 }
 </script>