新增可选搜索引擎 功能

tools/chromium_extension/css/app.css

@@ -23,9 +23,33 @@ 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/js/app/box.js

@@ -3,14 +3,13 @@ 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,18 +65,42 @@ 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,60 +110,130 @@ let getSearchEngineOpener = () => {
   return JSON.parse(sessionStorage.getItem(opener_key));
 };
 
-let showResetCurrentSearchEngineTab = () => {
+let showSetSearchEngine = (box, window_close_icon) => {
-  let div = document.createElement("div");
+  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(
-    "id",
+      "class",
-    "#chinese-programmer-wrong-pronunciation-custom-tools-bar"
+      "chinese-programmer-wrong-pronunciation-custom-tool-bar-setup"
   );
-  div.innerHTML = `
+  div.innerText = `⚙`;
-        <span>关闭搜索页面</span>🥳🥳🥳🥳🥳🥳<span>更换搜索引擎</span>
+  // box.insertBefore(div,select)
-    `;
-
-  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()) {
+let closeSearchWindow = () => {
-    search_engine_name = "gotToGoogleSearch";
+  let box = document.querySelector(
-    /*
+      "#chinese-programmer-wrong-pronunciation-custom-iframe-box"
-        if (window.confirm('默认有道词典搜索,选择 “取消” 将设置为谷歌搜索,有效期一天')) {  //当前页面展示搜索结果
+  );
-            search_engine_name = "gotToYouDaoSearch"
+  console.log(box);
-        } else {
+  if (
-            //新开标签页展示搜索结果
+      box &&
-           search_engine_name = "gotToGoogleSearch"
+      !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;
-    // expired_date = (new Date()).getTime() + 10000  # test expired
+  if (opener) {
-
+    if (search_engine_name) {
-    tab = "current_tab";
+      opener.search_engine_name = search_engine_name;
-    /*
-        if (window.confirm('允许当前页面展示搜索结果')) {  //当前页面展示搜索结果
-            tab = "current_tab"
-        } else {
-            //新开标签页展示搜索结果
-            tab = "new_tab"
     }
-         */
+    if (tab) {
-
+      opener.tab = tab;
-    sessionStorage.setItem(
+    }
-      opener_key,
+  } else {
-      JSON.stringify({
+    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 cleanOpener = () => {
   sessionStorage.removeItem(opener_key);
+  console.log("重置扩展搜索结果打开方式配置---ok");
 };
 
 export {
@@ -128,4 +242,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,22 @@ 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,11 @@ 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,
+  goToBingSearch
-  goToBaiduDictSearch,
-  goToBaiduFanYiSearch,
 };

tools/chromium_extension/js/app/utils.js

@@ -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",