support github and youtube comments

immersive-translate · Nov 8, 2022 · 06e17ba · 06e17ba
1 parent 410e6e1
commit 06e17ba
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,16 @@
 # Change Log
 
+## 0.0.16.2
+
+- Support Github
+- Support Youtube Comment
+
 
 ## 0.0.16.1
 
 - Support Nitter
 - Support https://mail.jabber.org/pipermail/juser/2020-December/007186.html, http://antirez.com/news/137
+- Add version to options page
 
 ## 0.0.16
 

diff --git a/readme.md b/readme.md
@@ -54,7 +54,6 @@ chrome,edge商店的升级和发布正在进行中，目前需要手动安装：
 
 在[Release页面](https://github.com/theowenyoung/Traduzir-paginas-web/releases)会有一个nightly版本被频繁的构建，建议喜欢体验最新版/或者想帮忙测试的同学，可以手动安装nightly版本，firefox的扩展包已签名，可以直接下载后作为扩展文件安装。
 
-
 > 现在还没有任何选项可以设置,欢迎加入一起开发呀～
 
 ## 截图
@@ -84,6 +83,7 @@ chrome,edge商店的升级和发布正在进行中，目前需要手动安装：
 ![hackernews](assets/hn-details.png)
 
 
+
 ---
 
 ## Install

diff --git a/src/chrome_manifest.json b/src/chrome_manifest.json
@@ -3,7 +3,7 @@
     "default_locale": "en",
     "name": "Immersive Translate",
     "description": "支持整页翻译·双语显示·只翻译正文。布局全面优化，和浏览器阅读模式类似，对Twitter, Reddit等网站做了定制优化",
-    "version": "0.0.16.1",
+    "version": "0.0.17",
     "homepage_url": "https://github.com/theowenyoung/Traduzir-paginas-web",
 
     "commands": {

diff --git a/src/contentScript/enhance.js b/src/contentScript/enhance.js
@@ -122,26 +122,34 @@ const translateSelectors = [
   },
   {
     hostname:"www.reuters.com",
-    containerSelector:'main',
+    containerSelectors:'main',
   },
   {
     regex:"finance\.yahoo\.com/news",
-    containerSelector:"[role=article]"
+    containerSelectors:"[role=article]"
   },
   {
     hostname:"www.whatsonweibo.com",
-    containerSelector:"#mvp-post-main"
+    containerSelectors:"#mvp-post-main"
   },
   {
     hostname:["www.wsj.com","www.economist.com"],
-    containerSelector:"main"
+    containerSelectors:"main"
   },
 
   {
     hostname:["mail.jabber.org","antirez.com"],
     selectors:["pre"],
-    containerSelector: "pre",
+    containerSelectors: "pre",
     noStyle: true
+  },
+  {
+    hostname:"github.com",
+    containerSelectors:".markdown-body"
+  },
+  {
+    hostname:"www.youtube.com",
+    selectors:["#content-text"]
   }
 
 ]
@@ -319,35 +327,39 @@ function getNodesThatNeedToTranslate(root,ctx,options){
     }
   }else{
    const originalRoot = root;
-    const contentContainer = getContainer(root,pageSpecialConfig);
-    if(contentContainer){
-      root = contentContainer;
+    const contentContainers = getContainers(root,pageSpecialConfig);
+    let containers = [root]
+    if(contentContainers && Array.isArray(contentContainers)){
+      containers = contentContainers;
     }  
 
-    for(const blockTag of blockElements){
-      const paragraphs = root.querySelectorAll(blockTag.toLowerCase());
-      for (const paragraph of paragraphs) {
-        if(isValidNode(paragraph) && !isDuplicatedChild(allNodes,paragraph)){
-          allNodes.push(paragraph);
+    for(const root of containers){
+
+      for(const blockTag of blockElements){
+        const paragraphs = root.querySelectorAll(blockTag.toLowerCase());
+        for (const paragraph of paragraphs) {
+          if(isValidNode(paragraph) && !isDuplicatedChild(allNodes,paragraph)){
+            allNodes.push(paragraph);
+          }
         }
       }
-    }
-    if(!pageSpecialConfig || !pageSpecialConfig.containerSelector){
-     // add addition heading nodes
-      for(const headingTag of headingElements){
-        const headings = originalRoot.querySelectorAll(headingTag.toLowerCase());
-        for (const heading of headings) {
-          if(isValidNode(heading)){
-            // check if there is already exist in allNodes
-            let isExist = false;
-            for(const node of allNodes){
-              if(node === heading){
-                isExist = true;
-                break;
+      if(!pageSpecialConfig || !pageSpecialConfig.containerSelectors){
+       // add addition heading nodes
+        for(const headingTag of headingElements){
+          const headings = originalRoot.querySelectorAll(headingTag.toLowerCase());
+          for (const heading of headings) {
+            if(isValidNode(heading)){
+              // check if there is already exist in allNodes
+              let isExist = false;
+              for(const node of allNodes){
+                if(node === heading){
+                  isExist = true;
+                  break;
+                }
+              }
+              if(!isExist){
+               allNodes.push(heading);
               }
-            }
-            if(!isExist){
-             allNodes.push(heading);
             }
           }
         }
@@ -378,7 +390,7 @@ function getNodesThatNeedToTranslate(root,ctx,options){
     const previousSibling = node.previousSibling;
     // console.log("previousSibling.hasAttribute(markAttributeName)", previousSibling.hasAttribute(markAttributeName))
     if(!previousSibling || !previousSibling.hasAttribute || !previousSibling.hasAttribute(enhanceMarkAttributeName)){
-      const copyNode = node.cloneNode(true);
+      let copyNode = node.cloneNode(true);
       if(inlineElements.includes(copyNode.nodeName.toLowerCase())){
         // add a space
         copyNode.style.paddingRight = "8px";
@@ -392,16 +404,29 @@ function getNodesThatNeedToTranslate(root,ctx,options){
         // display to block
         originalDisplay = "block";
       }
-      copyNode.setAttribute(enhanceMarkAttributeName, "copiedNode");
-      // add data-translationoriginaldisplay
-      if(originalDisplay){
-        copyNode.setAttribute(enhanceOriginalDisplayValueAttributeName, originalDisplay);
+      formatCopiedNode(copyNode,originalDisplay);
+      if(ctx.tabHostName === "www.youtube.com"){
+        // special, we need to insert all children of the copied node to node
+        const copiedChildren = copyNode.childNodes;
+        const firstNode = node.childNodes[0];
+        for(let copiedChild of copiedChildren){
+          // if copiedChildNode is a text node, add span wrapper
+          if(copiedChild.nodeType === Node.TEXT_NODE){
+            const span = document.createElement("span");
+            span.appendChild(copiedChild);
+            copiedChild = span;
+          }
+          formatCopiedNode(copiedChild);
+          node.insertBefore(copiedChild,firstNode);
+        }
+        // new line span node
+        const newLineSpan = document.createElement("span");
+        newLineSpan.innerHTML = "\n";
+        formatCopiedNode(newLineSpan);
+        node.insertBefore(newLineSpan,firstNode);
+      }else{
+        node.parentNode.insertBefore(copyNode, node)
       }
-      // add display none
-      copyNode.style.display = "none";
-      // add notranslate class
-      copyNode.classList.add("notranslate");
-      node.parentNode.insertBefore(copyNode, node)
     }
   }
   // copy 
@@ -410,14 +435,22 @@ function getNodesThatNeedToTranslate(root,ctx,options){
 
 // get the main container, copy from: https://github.com/ZachSaucier/Just-Read/blob/master/content_script.js
 
-function getContainer(root,pageSpecialConfig){ 
-
-
-    if(pageSpecialConfig && pageSpecialConfig.containerSelector){
-      const container = root.querySelector(pageSpecialConfig.containerSelector);
-      if(container){
-        return container;
+function getContainers(root,pageSpecialConfig){ 
+    if(pageSpecialConfig && pageSpecialConfig.containerSelectors){
+      // is array
+      if(!Array.isArray(pageSpecialConfig.containerSelectors)){
+        pageSpecialConfig.containerSelectors = [pageSpecialConfig.containerSelectors];
+      }
+      let containers =[];
+      for(const selector of pageSpecialConfig.containerSelectors){
+          const allContainer = root.querySelectorAll(pageSpecialConfig.containerSelectors);
+          if(allContainer){
+            for(const container of allContainer){
+              containers.push(container);
+            } 
+          }
       }
+      return containers.length>0?containers:null;
     }
 
     if(!(root && root.innerText)){
@@ -471,7 +504,7 @@ function getContainer(root,pageSpecialConfig){
         selectedContainer = selectedContainer.parentElement;
     }
 
-    return selectedContainer;
+    return [selectedContainer];
 }
 
 // Check given item against blacklist, return null if in blacklist
@@ -501,3 +534,19 @@ function checkAgainstBlacklist(elem, level) {
 
     return elem;
 }
+function getStyle(el) {
+  return window.getComputedStyle(el)
+}
+
+function formatCopiedNode(copyNode,originalDisplay){
+      copyNode.setAttribute(enhanceMarkAttributeName, "copiedNode");
+      // add data-translationoriginaldisplay
+      if(originalDisplay){
+        copyNode.setAttribute(enhanceOriginalDisplayValueAttributeName, originalDisplay);
+      }
+      // add display none
+      copyNode.style.display = "none";
+      // add notranslate class
+      copyNode.classList.add("notranslate");
+
+}
diff --git a/src/manifest.json b/src/manifest.json
@@ -3,7 +3,7 @@
     "default_locale": "en",
     "name": "Immersive Translate",
     "description": "支持整页翻译·双语显示·只翻译正文。布局全面优化，和浏览器阅读模式类似，对Twitter, Reddit等网站做了定制优化",
-    "version": "0.0.16.1",
+    "version": "0.0.17",
     "homepage_url": "https://github.com/theowenyoung/Traduzir-paginas-web",
 
     "browser_specific_settings": {