Merge pull request #387 from jingjingxyk/master

完善嵌入标签页功能

tools/chromium_extension/README.md

@@ -1,6 +1,6 @@
 # 无页面跳转收听正确读音 的 chromium 扩展
 
-## [获得最新版扩展](https://github.com/jingjingxyk/chinese-programmer-wrong-pronunciation.git)
+## [获得最新版扩展](https://github.com/jingjingxyk/chinese-programmer-wrong-pronunciation-chromium-extension.git)
 
 ## 手动安装扩展
 

tools/chromium_extension/css/app.css

@@ -23,9 +23,34 @@ tr:hover {
   top: 64px !important;
 }
 
+.chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden {
+  display: none;
+}
+
 #chinese-programmer-wrong-pronunciation-custom-iframe {
   width: 100%;
   height: 100%;
   min-width: 700px !important;
   min-height: 600px !important;
 }
+
+.chinese-programmer-wrong-pronunciation-custom-tool-bar {
+  position: absolute;
+  right: -5px;
+  top: -32px;
+  font-size: 16px;
+}
+
+.chinese-programmer-wrong-pronunciation-custom-window-close-icon {
+  margin-right: 4px;
+  margin-left: 10px;
+}
+.chinese-programmer-wrong-pronunciation-custom-tool-bar-setup {
+  margin-right: 10px;
+  font-size: 20px;
+}
+
+.chinese-programmer-wrong-pronunciation-custom-note-reset {
+  font-size: 16px;
+  color: #c5955d;
+}

tools/chromium_extension/images/README.md

@@ -1,9 +1,9 @@
 # 新增功能截图
 
-## 嵌入搜索引擎 谷歌搜索
+## 嵌入搜索引擎 有道搜索
 
 ![](https://github.com/jingjingxyk/chinese-programmer-wrong-pronunciation/blob/master/tools/chromium_extension/images/%E6%88%AA%E5%9B%BE2022-06-14-22-11.png?raw=true)
 
-## 嵌入搜索引擎 有道搜索
+## 嵌入搜索引擎 谷歌搜索
 
-![](https://raw.githubusercontent.com/jingjingxyk/chinese-programmer-wrong-pronunciation/master/tools/chromium_extension/images/截图2022-06-14-22-10.png)
+![](https://github.com/jingjingxyk/chinese-programmer-wrong-pronunciation/blob/master/tools/chromium_extension/images/截图2022-06-14-22-10.png?raw=true)

tools/chromium_extension/js/app/box.js

@@ -3,14 +3,12 @@ import * as components from "./components.js";
 import * as searchEngine from "./search-engine.js";
 
 let goToSearchPronounce = (word) => {
-  let search_engine_name = "gotToGoogleSearch";
+  let search_engine_name = "goToGoogleSearch";
-  // search_engine_name='gotToYouDaoSearch'
+  search_engine_name = "goToYouDaoSearch";
   // search_engine_name = "goToBingDictSearch";
   // search_engine_name = "goToBingSearch";
-  search_engine_name = "gotToYouDaoSearch";
+  //search_engine_name = "gotToYouDaoSearch";
-  // search_engine_name = "goToBaiduFanYiSearch";
+  let tab = "current_tab";
-  //let tab = "current_tab";
-  let tab = "new_tab"; //修改默认为新标签页打开
 
   let opener = components.getSearchEngineOpener();
   if (opener && opener.expired_date) {

tools/chromium_extension/js/app/components.js

@@ -1,4 +1,5 @@
 import { prettyBox } from "./pretty-box.js";
+import { hasClass, addClass, removeClass } from "./utils.js";
 
 let styleConfig = () => {
   let css = document.createElement("link");
@@ -38,6 +39,25 @@ let getIframe = () => {
     );
     aside.setAttribute("draggable", "true");
 
+    let tool_bar = document.createElement("div");
+    tool_bar.setAttribute(
+      "class",
+      "chinese-programmer-wrong-pronunciation-custom-tool-bar"
+    );
+    tool_bar.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    });
+
+    let window_close_icon = document.createElement("span");
+    window_close_icon.innerText = "❌";
+    window_close_icon.setAttribute(
+      "class",
+      "chinese-programmer-wrong-pronunciation-custom-window-close-icon"
+    );
+    window_close_icon.addEventListener("click", closeSearchWindow);
+    tool_bar.appendChild(window_close_icon);
+
     iframe = document.createElement("iframe");
     iframe.setAttribute(
       "id",
@@ -45,19 +65,44 @@ let getIframe = () => {
     );
     iframe.setAttribute("security", "restricted");
     //iframe.setAttribute('sandbox',"")
+
+    aside.appendChild(tool_bar);
     aside.appendChild(iframe);
     custom_box.appendChild(aside);
     document.body.appendChild(custom_box);
 
     //设置 box 可 拖拽
     prettyBox(aside);
-    //显示重置按键
+    //显示设置按键
-    //showResetCurrentSearchEngineTab()
+    showSetSearchEngine(tool_bar, window_close_icon);
   } else {
+    if (
+      hasClass(
+        box,
+        "chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden"
+      )
+    ) {
+      removeClass(
+        box,
+        "chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden"
+      );
+    }
     iframe = box.querySelector(
       "#chinese-programmer-wrong-pronunciation-custom-iframe"
     );
+    iframe.setAttribute("src", "about:blank");
+    //iframe.contentDocument.close()
+    box.removeChild(iframe);
+
+    iframe = document.createElement("iframe");
+    iframe.setAttribute(
+      "id",
+      "chinese-programmer-wrong-pronunciation-custom-iframe"
+    );
+    iframe.setAttribute("security", "restricted");
+    box.appendChild(iframe);
   }
+
   return iframe;
 };
 
@@ -66,6 +111,126 @@ let getSearchEngineOpener = () => {
   return JSON.parse(sessionStorage.getItem(opener_key));
 };
 
+let showSetSearchEngine = (box, window_close_icon) => {
+  let opener = getSearchEngineOpener();
+
+  {
+    let search_engin_provider = {
+      goToYouDaoSearch: "有道",
+      goToGoogleSearch: "谷歌",
+      goToBingDictSearch: "必应词典",
+      goToBingSearch: "必应",
+    };
+    let select = document.createElement("select");
+    select.setAttribute("name", "search_engin_provider");
+    select.setAttribute("class", "search_engin_provider");
+    let htmlContent = "";
+    for (let i in search_engin_provider) {
+      let selected = "";
+      if (opener && opener.search_engine_name) {
+        selected = i === opener.search_engine_name ? 'selected="selected"' : "";
+      }
+      htmlContent += `<option value="${i}" ${selected}>${search_engin_provider[i]}</option>`;
+    }
+
+    select.innerHTML = htmlContent;
+
+    select.addEventListener("click", setSearchEngine);
+    box.insertBefore(select, window_close_icon);
+  }
+  {
+    let search_engin_provider_tab = {
+      current_tab: "当前标签展示结果",
+      new_tab: "新标签展示结果",
+    };
+    let select = document.createElement("select");
+    select.setAttribute("class", "search_engin_provider_tab");
+    select.setAttribute("name", "search_engin_provider_tab");
+    let htmlContent = "";
+    for (let i in search_engin_provider_tab) {
+      let selected = "";
+      if (opener && opener.tab) {
+        selected = i === opener.tab ? 'selected="selected"' : "";
+      }
+      htmlContent += `<option value="${i}" ${selected}>${search_engin_provider_tab[i]}</option>`;
+    }
+
+    select.innerHTML = htmlContent;
+
+    select.addEventListener("click", setSearchEngineOpener);
+    box.insertBefore(select, window_close_icon);
+  }
+
+  let div = document.createElement("span");
+  div.setAttribute(
+    "class",
+    "chinese-programmer-wrong-pronunciation-custom-tool-bar-setup"
+  );
+  div.innerText = `⚙`;
+  // box.insertBefore(div,select)
+};
+
+//关闭窗口
+let closeSearchWindow = () => {
+  let box = document.querySelector(
+    "#chinese-programmer-wrong-pronunciation-custom-iframe-box"
+  );
+  console.log(box);
+  if (
+    box &&
+    !hasClass(
+      box,
+      "chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden"
+    )
+  ) {
+    addClass(
+      box,
+      "chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden"
+    );
+  }
+  let iframe = box.querySelector(
+    "#chinese-programmer-wrong-pronunciation-custom-iframe"
+  );
+  iframe.setAttribute("src", "about:blank");
+};
+
+let setSearchEngine = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  console.log(event.target.value);
+  setupConfig(event.target.value, null);
+};
+let setSearchEngineOpener = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  console.log(event.target.value);
+
+  setupConfig(null, event.target.value);
+};
+
+let setupConfig = (search_engine_name, tab) => {
+  let opener = getSearchEngineOpener();
+  //页面展示方式，默认有效期一天
+  let expired_date = new Date().getTime() + 24 * 60 * 60 * 1000;
+  if (opener) {
+    if (search_engine_name) {
+      opener.search_engine_name = search_engine_name;
+    }
+    if (tab) {
+      opener.tab = tab;
+    }
+  } else {
+    tab = "current_tab";
+    search_engine_name = "goToYouDaoSearch";
+    opener = {
+      tab: tab,
+      expired_date: expired_date,
+      search_engine_name: search_engine_name,
+    };
+  }
+
+  sessionStorage.setItem(opener_key, JSON.stringify(opener));
+};
 let showResetCurrentSearchEngineTab = () => {
   let div = document.createElement("div");
   div.setAttribute(
@@ -80,46 +245,10 @@ let showResetCurrentSearchEngineTab = () => {
     .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);
+  console.log("恢复扩展默认配置---ok");
 };
 
 export {
@@ -128,4 +257,5 @@ export {
   getIframe,
   getSearchEngineOpener,
   setSearchEngineOpener,
+  cleanOpener,
 };

tools/chromium_extension/js/app/init.js

@@ -4,7 +4,9 @@ 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();
@@ -58,6 +60,23 @@ let init = () => {
           }
         }
       });
+
+    let table = document.querySelector("#readme table");
+    let parent = table.parentNode;
+    let note = document.createElement("span");
+    note.innerText = `⚪恢复扩展默认配置⚪`;
+    note.setAttribute(
+      "class",
+      "chinese-programmer-wrong-pronunciation-custom-note-reset"
+    );
+
+    note.addEventListener("click", (event) => {
+      //重置配置
+      event.preventDefault();
+      event.stopPropagation();
+      box.cleanOpener();
+    });
+    parent.insertBefore(note, table);
   } else {
     console.log("no found README.md table");
   }

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

@@ -1,9 +1,9 @@
-let gotToGoogleSearch = (word) => {
+let goToGoogleSearch = (word) => {
   word = word.replace(/\s/, "+");
   return `https://www.google.com/search?q=how+to+pronounce+${word}`;
 };
 
-let gotToYouDaoSearch = (word) => {
+let goToYouDaoSearch = (word) => {
   word = word.replace(/\s/, "+");
   return `https://www.youdao.com/result?word=${word}&lang=en`;
 };
@@ -14,31 +14,10 @@ let goToBingDictSearch = (word) => {
 let goToBingSearch = (word) => {
   return `https://cn.bing.com/search?q=how%20to%20pronounce%20${word}`;
 };
-let goToBaiduDictSearch = (word) => {
-  return `https://dict.baidu.com/s?wd=${word}`;
-};
-
-let goToBaiduFanYiSearch = (word) => {
-  return `https://fanyi.baidu.com/#en/zh/${word}`;
-};
-
-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,
+  goToYouDaoSearch,
-  gotToYouDaoSearch,
+  goToGoogleSearch,
-  gotToGoogleSearch,
   goToBingDictSearch,
   goToBingSearch,
-  goToBaiduDictSearch,
-  goToBaiduFanYiSearch,
 };

tools/chromium_extension/js/app/utils.js

@@ -29,7 +29,7 @@ function getCookie(name) {
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
 
-function setCookie(name, value, second, domain) {
+function setCookie(name, value, second, path, domain) {
   var exp = new Date();
   exp.setTime(exp.getTime() + second * 1000);
   document.cookie =
@@ -38,7 +38,9 @@ function setCookie(name, value, second, domain) {
     encodeURIComponent(value) +
     ";expires=" +
     exp.toGMTString() +
-    ";path=/;domain=" +
+    ";path=" +
+    path +
+    ";domain=" +
     domain +
     ";SameSite=None;Secure";
 }

tools/chromium_extension/manifest.json

@@ -22,10 +22,8 @@
     "*://www.google.com/*",
     "*://cn.bing.com/*",
     "*://www.bing.com/*",
-    "*://dict.baidu.com/*",
     "*://www.youdao.com/*",
-    "*://dict.youdao.com/*",
+    "*://dict.youdao.com/*"
-    "*://fanyi.baidu.com/*"
   ],
   "web_accessible_resources": [
     {

tools/chromium_extension/rules/remove_content_security_policy.json

@@ -45,10 +45,8 @@
         "cn.bing.com",
         "www.bing.com",
         "fanyi.baidu.com",
-        "dict.baidu.com",
         "www.youdao.com",
-        "dict.youdao.com",
+        "dict.youdao.com"
-        "fanyi.baidu.com"
       ],
       "resourceTypes": [
         "main_frame",