Fix/fix line break issue

README.md

@@ -1,4 +1,5 @@
 # Stylish Reader
+
 [![Stylish Reader Extension CI](https://github.com/tolerious/Stylish-Reader/actions/workflows/node.js.yml/badge.svg?branch=master)](https://github.com/tolerious/Stylish-Reader/actions/workflows/node.js.yml)
 
 Firefox extension that helps you learn English better and easier.
@@ -8,14 +9,10 @@ Firefox extension that helps you learn English better and easier.
 - [x] Translate the selected word/phrase/sentence from English to Chinese.
 - [x] Collect/Favorite new word.
 - [x] Recite the collected word.
-- [x] See the real-time bilingual live subtitles while watching TED videos.
-
-## TODO List
+- [x] See the real-time bilingual live subtitles while watching Youtube videos.
+- [x] Save `The Guardian` article automatically for later test.
 
-- [ ] Official website established.
-- [ ] Refactor English-Burning APP for better user experience.
-- [ ] BBC Learning English(6 minutes English) supported.
-- [ ] Collect/Favorite articles, provide reading mode afterwards.
+For more features, you could have a look at the [official website.](https://stylishreader.com/#/)
 
 ## Highlight and search words
 
@@ -33,3 +30,6 @@ Firefox extension that helps you learn English better and easier.
 You can see the real-time bilingual live subtitles while watching TED videos.
 ![alt text](assets/image-1.png)
 
+### Youtube video review
+
+You can save the YouTube video to your account and see the real-time bilingual live subtitles later.

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.26",
+  "version": "0.0.27",
   "icons": {
     "48": "icons/stylish-reader-48.png"
   },

src/plugins/general/utils.js

@@ -45,6 +45,11 @@ export function goThroughDomAndGenerateCustomElement(targetWordList) {
   let index = 0;
   // 找到所有符合要求的#text节点，并保存在Map中
   while (node) {
+
+    /**
+     * 找到当前node的父亲元素并排除script,HTML标签，这里排除HTML标签是因为HTML会包含所有文档元素，这不是我们想要的
+     * 且排除node的文本内容是空元素的
+     *  */
     if (
       !["SCRIPT", "HTML"].includes(node.parentNode.nodeName) &&
       node.textContent.trim() !== ""
@@ -100,10 +105,11 @@ function removeUnMarkedWord(word) {
 }
 
 function convertCurrentTextNodeContent(textNode, targetWordList) {
-  // 判断并找出当前文本节点中包含的目标单词
+  // 判断并找出当前文本节点中包含的目标单词，这里为什么要替换所有的\n,\t? 经过测试，替换了以后会改变一些文档结构
+  // const textContent = textNode.textContent
+  //   .replaceAll("\n", " ")
+  //   .replaceAll("\t", " ");
   const textContent = textNode.textContent
-    .replaceAll("\n", " ")
-    .replaceAll("\t", " ");
   const targetWordSet = new Set(targetWordList);
   const splittedTextContentStringList = textContent.split(" ");
   // 存放的是目标单词在splittedTextContentStringList中的索引