新增搜索引擎读音检索功能

tools/chromium_extension/README.md

@@ -8,3 +8,7 @@
 > 4. 选择 Load unpacked extension... 然后定位到刚才解压的文件夹里面的 `tools/chromium_extension` 目录，确定
 > 5. 这就安装好了，去掉 Developer Mode 勾选。
 > 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音
+
+
+## 扩展开发参考
+1. [content_scripts](https:////developer.chrome.com/docs/extensions/mv3/content_scripts/)

tools/chromium_extension/css/app.css

@@ -10,3 +10,24 @@ tr:hover {
     font-size: 1.1rem;
     */
 }
+
+#chinese-programmer-wrong-pronunciation-custom-iframe-box{
+    border: 8px solid #ddd !important;
+    border-radius: 8px !important;
+    box-shadow: 5px 5px 15px #daf5fe !important;
+    z-index: 999;
+    position: fixed !important;
+}
+.chinese-programmer-wrong-pronunciation-custom-iframe-box{
+    right: 0 !important;
+    top: 64px !important;
+
+
+}
+
+#chinese-programmer-wrong-pronunciation-custom-iframe {
+    width:100%;
+    height: 100%;
+    min-width: 700px !important;
+    min-height: 600px !important;
+}

tools/chromium_extension/js/app/box.js

@@ -0,0 +1,39 @@
+import * as until from "./until.js";
+import * as components from "./components.js"
+import * as searchEngine from "./search-engine.js"
+
+let goToSearchPronounce = (word) => {
+
+    let search_engine_name = "gotToGoogleSearch"
+    // search_engine_name='gotToYouDaoSearch'
+    let tab = "current_tab"
+
+    let opener = components.getSearchEngineOpener();
+    if (opener && opener.expired_date) {
+        if(opener.expired_date > (new Date()).getTime()) {
+            if (opener.search_engine_name) {
+                search_engine_name = opener.search_engine_name;
+            }
+            if (opener.tab) {
+                tab = opener.tab;
+            }
+        }
+    }
+    if (search_engine_name && searchEngine[search_engine_name]) {
+        console.log(word)
+        let url = searchEngine[search_engine_name](word);
+        console.log(url)
+        if (tab === 'new_tab') {
+            window.open(url, '_blank')
+        } else {
+            let iframe = components.getIframe();
+            iframe.setAttribute('src', url);
+        }
+    } else {
+        console.log('search engine no found !')
+    }
+
+}
+
+let box = {...until, ...components,...searchEngine, goToSearchPronounce};
+export default box

tools/chromium_extension/js/app/components.js

@@ -0,0 +1,103 @@
+import {prettyBox } from "./pretty-box.js"
+
+
+let  styleConfig=()=>{
+    let css = document.createElement("link");
+    css.setAttribute("rel", "stylesheet");
+    css.setAttribute("type", "text/css");
+    css.setAttribute("href", chrome.runtime.getURL("css/app.css"));
+    document.head.appendChild(css);
+}
+
+let customElement=()=>{
+    let link = document.createElement("link");
+    link.setAttribute("href",chrome.runtime.getURL("web-components/x-custom-box.html"));
+    document.head.appendChild(link);
+}
+
+let getIframe=()=>{
+    let box = document.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe-box');
+    let iframe = null;
+    if (!box) {
+        let custom_box = document.createElement('x-chinese-programmer-wrong-pronunciation-custom-box');
+
+        let aside=document.createElement('aside')
+        aside.setAttribute('id','chinese-programmer-wrong-pronunciation-custom-iframe-box')
+        aside.setAttribute('class','chinese-programmer-wrong-pronunciation-custom-iframe-box')
+        aside.setAttribute('draggable',"true")
+
+        iframe=document.createElement('iframe')
+        iframe.setAttribute('id','chinese-programmer-wrong-pronunciation-custom-iframe')
+        aside.appendChild(iframe)
+        custom_box.appendChild(aside)
+        document.body.appendChild(custom_box)
+
+        //设置 box 可 拖拽
+        prettyBox(aside)
+        //显示重置按键
+        //showResetCurrentSearchEngineTab()
+    }else{
+        iframe = box.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe')
+    }
+    return iframe
+}
+
+let opener_key = 'how-to-pronounce-from-search-engine-open-tab-opener'
+let getSearchEngineOpener=()=>{
+    return  JSON.parse(sessionStorage.getItem(opener_key))
+}
+
+let showResetCurrentSearchEngineTab=()=>{
+    let div=document.createElement('div');
+    div.setAttribute('id','#chinese-programmer-wrong-pronunciation-custom-tools-bar')
+    div.innerHTML=`
+        <span>关闭搜索页面</span>🥳🥳🥳🥳🥳🥳<span>更换搜索引擎</span>
+    `
+
+    document.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe-box').appendChild(div)
+
+}
+let setSearchEngineOpener=(search_engine_name,tab)=>{
+
+    let opener = getSearchEngineOpener()
+    if (!opener || opener.expired_date < (new Date()).getTime()) {
+
+        search_engine_name = "gotToGoogleSearch"
+        /*
+        if (window.confirm('默认有道词典搜索,选择 “取消” 将设置为谷歌搜索,有效期一天')) {  //当前页面展示搜索结果
+            search_engine_name = "gotToYouDaoSearch"
+        } else {
+            //新开标签页展示搜索结果
+           search_engine_name = "gotToGoogleSearch"
+        }
+        */
+
+
+        //页面展示方式，默认有效期一天
+        let expired_date = (new Date()).getTime() + 24 * 60 * 60 * 1000
+        // expired_date = (new Date()).getTime() + 10000  # test expired
+
+        tab = "current_tab"
+        /*
+        if (window.confirm('允许当前页面展示搜索结果')) {  //当前页面展示搜索结果
+            tab = "current_tab"
+        } else {
+            //新开标签页展示搜索结果
+            tab = "new_tab"
+        }
+         */
+
+        sessionStorage.setItem(opener_key, JSON.stringify({
+            "tab": tab,
+            "expired_date": expired_date,
+            'search_engine_name': search_engine_name
+        }));
+    }
+}
+
+let cleanOpener=() => {
+    sessionStorage.removeItem(opener_key)
+}
+
+
+export {styleConfig,customElement,getIframe,getSearchEngineOpener,setSearchEngineOpener}

tools/chromium_extension/js/app/init.js

@@ -0,0 +1,66 @@
+import box from "./box.js"
+
+let init=()=>{
+    let URLObj = new URL(location.href);
+    console.log(URLObj);
+    if (document.querySelector("#readme table tbody")) {
+        box.styleConfig();
+        box.customElement();
+
+        let audio_player = new Audio();
+        audio_player.setAttribute("autoplay", "true");
+        document
+            .querySelector("#readme table tbody")
+            .addEventListener("click", (event) => {
+
+                //console.log(event.target)
+                // console.log(event.target.nodeType)
+                // console.log(event.target.nodeName);
+                let parentElement = event.target.parentElement
+                if (parentElement && parentElement.nodeName === 'TR') {
+                    if (parentElement.firstElementChild === event.target) {
+                        //使用搜索引擎查询发音
+                        box.goToSearchPronounce(event.target.innerText)
+                    }
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                let audio_url = null;
+                if (event.target.nodeName === "TD") {
+                    let aTag = event.target.querySelector("a");
+                    if (aTag) {
+                        audio_url = aTag.getAttribute("href");
+                    }
+                }
+                if (event.target.nodeName === "IMG") {
+                    let aTag = event.target.parentNode.parentNode;
+                    audio_url = aTag.getAttribute("href");
+                }
+                if (audio_url) {
+                    let desURL = new URL(audio_url);
+                    //console.log(desURL.protocol);
+                    if (desURL.protocol === "http:") {
+                        //skip http
+                        location.href = audio_url;
+                    } else {
+                        // console.log("audio_url:", audio_url);
+                        audio_player.setAttribute("src", audio_url);
+                    }
+                }
+            });
+            document.querySelector("#readme table tbody").addEventListener('mouseover',(event)=>{
+                let parentElement = event.target.parentElement
+                if (parentElement && parentElement.nodeName === 'TR') {
+                    if (parentElement.firstElementChild === event.target) {
+                        event.target.setAttribute('title','点击我打开搜索引擎检索')
+                        event.target.style.cursor='pointer'
+                    }
+                }
+            })
+    }else{
+        console.log("no found README.md table")
+    }
+}
+
+
+export  {init}

tools/chromium_extension/js/app/pretty-box.js

@@ -0,0 +1,79 @@
+import {addClass, removeClass} from "./until.js";
+
+let prettyBox = (box) => {
+
+
+    // 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
+
+    let dragging = false;
+    let diffX = null;
+    let diffY = null;
+    box.onmousedown = function (event) {
+        dragging = true;
+
+        let left = box.offsetLeft;
+        let top = box.offsetTop;
+
+        removeClass(box, 'chinese-programmer-wrong-pronunciation-custom-iframe-box')
+
+        box.style.left = left + "px";
+        box.style.top = top + "px";
+
+        diffX = event.clientX - left;
+        diffY = event.clientY - top;
+
+    }
+    document.onmousemove = function (event) {
+
+
+        if (dragging) {
+
+           // console.log(event.clientX, event.clientY)
+            //console.log(diffX, diffY)
+
+            let moveX = event.clientX - diffX;
+            let moveY = event.clientY - diffY;
+
+            if (moveX < 0) {
+                moveX = 0
+            } else if (moveX > window.innerWidth - box.offsetWidth) {
+                moveX = window.innerWidth - box.offsetWidth
+            }
+            if (moveY < 0) {
+                moveY = 0
+            } else if (moveY > window.innerHeight - box.offsetHeight) {
+                moveY = window.innerHeight - box.offsetHeight
+            }
+
+            box.style.left = moveX + "px";
+            box.style.top = moveY + "px"
+
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    document.onmouseup = function (event) {
+        dragging = false;
+    }
+
+    box.onmouseup = (event) => {
+        dragging = false;
+    }
+
+    box.ondragstart = function (event) {
+        console.log(box.offsetLeft, box.offsetTop)
+        console.log('开始拖拽');
+    }
+    box.ondrag = function () {
+        console.log(box.offsetLeft, box.offsetTop)
+        console.log('拖拽中');
+    }
+    box.ondragend = function () {
+        console.log(box.offsetLeft, box.offsetTop)
+        console.log('拖拽结束')
+    }
+
+}
+
+
+export {prettyBox}

tools/chromium_extension/js/app/search-engine.js

@@ -0,0 +1,23 @@
+
+let gotToGoogleSearch=(word) => {
+    word = word.replace(/\s/, '+');
+    return `https://www.google.com/search?q=how+to+pronounce+${word}`
+}
+
+let gotToYouDaoSearch=(word) => {
+    word = word.replace(/\s/, '+');
+    return `https://www.youdao.com/result?word=${word}&lang=en`
+}
+
+let goToBaiDuHanYu=() => {
+    // 一点飞上天，黄河两头弯；八字大张口，言字中间走；左一扭，右一扭，你一长，我一长，中间加个马大王；心字底，月字旁，一个小勾挂麻糖，坐个车子逛咸阳。
+    // 56个笔画的字 邉
+    // U+30EDE （简化版本 U+30EDD）
+    {
+        "汉".charCodeAt(0).toString(16)
+        String.fromCharCode('0x6c49')
+    }
+    //https://hanyu.baidu.com/s?wd=%E9%82%89
+}
+
+export {goToBaiDuHanYu,gotToYouDaoSearch,gotToGoogleSearch}

tools/chromium_extension/js/app/until.js

@@ -0,0 +1,24 @@
+function hasClass(el, className) {
+    if (el.classList)
+        return el.classList.contains(className);
+    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
+}
+
+
+function addClass(el, className) {
+    if (el.classList)
+        el.classList.add(className)
+    else if (!hasClass(el, className))
+        el.className += " " + className;
+}
+
+function removeClass(el, className) {
+    if (el.classList)
+        el.classList.remove(className)
+    else if (hasClass(el, className)) {
+        let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
+        el.className = el.className.replace(reg, ' ');
+    }
+}
+
+export {addClass, removeClass}

tools/chromium_extension/js/content-script.js

@@ -1,45 +1,4 @@
-{
+(async () => {
-  let URLObj = new URL(location.href);
+    let app = await import(chrome.runtime.getURL('js/app/init.js'))
-  console.log(URLObj);
+    app.init()
-  if (document.querySelector("#readme table tbody")) {
+})();
-    console.log(chrome.runtime.getURL("css/app.css"));
-    let css = document.createElement("link");
-    css.setAttribute("rel", "stylesheet");
-    css.setAttribute("type", "text/css");
-    css.setAttribute("href", chrome.runtime.getURL("css/app.css"));
-    document.head.appendChild(css);
-    let audio_player = new Audio();
-    audio_player.setAttribute("autoplay", "true");
-    document
-      .querySelector("#readme table tbody")
-      .addEventListener("click", (event) => {
-        // console.log(event)
-        // console.log(event.target.nodeType)
-        // console.log(event.target.nodeName);
-        event.preventDefault();
-        event.stopPropagation();
-        let audio_url = null;
-        if (event.target.nodeName === "TD") {
-          let aTag = event.target.querySelector("a");
-          if (aTag) {
-            audio_url = aTag.getAttribute("href");
-          }
-        }
-        if (event.target.nodeName === "IMG") {
-          let aTag = event.target.parentNode.parentNode;
-          audio_url = aTag.getAttribute("href");
-        }
-        if (audio_url) {
-          let desURL = new URL(audio_url);
-          console.log(desURL.protocol);
-          if (desURL.protocol === "http:") {
-            //skip http
-            location.href = audio_url;
-          } else {
-            console.log("audio_url:", audio_url);
-            audio_player.setAttribute("src", audio_url);
-          }
-        }
-      });
-  }
-}

tools/chromium_extension/manifest.json

@@ -9,7 +9,7 @@
         "*://*/shimohq/chinese-programmer-wrong-pronunciation/*",
         "*://*/jingjingxyk/chinese-programmer-wrong-pronunciation/*"
       ],
-      "run_at": "document_end",
+      "run_at": "document_idle",
       "js": ["js/content-script.js"]
     }
   ],
@@ -17,7 +17,7 @@
     "declarativeNetRequest",
     "declarativeNetRequestWithHostAccess"
   ],
-  "host_permissions": ["*://github.com/*"],
+  "host_permissions": ["*://github.com/*","*://www.google.com/*"],
   "web_accessible_resources": [
     {
       "resources": ["*.js", "*.css", "*.html"],

tools/chromium_extension/rules/remove_content_security_policy.json

@@ -21,6 +21,7 @@
         },
         { "header": "x-content-type-options", "operation": "remove" },
         { "header": "x-frame-options", "operation": "remove" },
+        { "header": "X-Frame-Options", "operation": "remove" },
         { "header": "permissions-policy", "operation": "remove" },
         { "header": "timing-allow-origin", "operation": "remove" },
         { "header": "cross-origin-embedder-policy", "operation": "remove" },
@@ -37,7 +38,7 @@
     },
     "condition": {
       "urlFilter": "*",
-      "requestDomains": ["github.com", "githubusercontent.com"],
+      "requestDomains": ["github.com", "githubusercontent.com","www.google.com"],
       "resourceTypes": [
         "main_frame",
         "sub_frame",

tools/chromium_extension/web-components/README.md

@@ -0,0 +1,3 @@
+#  HTML Imports，HTML Template、Shadow DOM----统称为 Web Components 规范
+
+##  Shadow DOM 实现代码隔离

tools/chromium_extension/web-components/x-custom-box.html

@@ -0,0 +1,3 @@
+<x-chinese-programmer-wrong-pronunciation-custom-box>
+    <div>自定义web组件-做代码隔离</div>
+</x-chinese-programmer-wrong-pronunciation-custom-box>