diff --git a/tools/chromium_extension/css/app.css b/tools/chromium_extension/css/app.css index a21d55b..9ae9039 100644 --- a/tools/chromium_extension/css/app.css +++ b/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; +} diff --git a/tools/chromium_extension/js/app/box.js b/tools/chromium_extension/js/app/box.js index 31641c9..2c0d495 100644 --- a/tools/chromium_extension/js/app/box.js +++ b/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"; - // search_engine_name='gotToYouDaoSearch' + let search_engine_name = "goToGoogleSearch"; + 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 = "new_tab"; //修改默认为新标签页打开 + let tab = "current_tab"; let opener = components.getSearchEngineOpener(); if (opener && opener.expired_date) { diff --git a/tools/chromium_extension/js/app/components.js b/tools/chromium_extension/js/app/components.js index c4a159a..396946c 100644 --- a/tools/chromium_extension/js/app/components.js +++ b/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"); @@ -11,52 +12,95 @@ let styleConfig = () => { let customElement = () => { let link = document.createElement("link"); link.setAttribute( - "href", - chrome.runtime.getURL("web-components/x-custom-box.html") + "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" + "#chinese-programmer-wrong-pronunciation-custom-iframe-box" ); let iframe = null; if (!box) { let custom_box = document.createElement( - "x-chinese-programmer-wrong-pronunciation-custom-box" + "x-chinese-programmer-wrong-pronunciation-custom-box" ); let aside = document.createElement("aside"); aside.setAttribute( - "id", - "chinese-programmer-wrong-pronunciation-custom-iframe-box" + "id", + "chinese-programmer-wrong-pronunciation-custom-iframe-box" ); aside.setAttribute( - "class", - "chinese-programmer-wrong-pronunciation-custom-iframe-box" + "class", + "chinese-programmer-wrong-pronunciation-custom-iframe-box" ); 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", - "chinese-programmer-wrong-pronunciation-custom-iframe" + "id", + "chinese-programmer-wrong-pronunciation-custom-iframe" ); 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" + "#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 div = document.createElement("div"); +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 += ``; + } + + 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 += ``; + } + + select.innerHTML = htmlContent; + + select.addEventListener("click", setSearchEngineOpener); + box.insertBefore(select, window_close_icon); + } + + let div = document.createElement("span"); div.setAttribute( - "id", - "#chinese-programmer-wrong-pronunciation-custom-tools-bar" + "class", + "chinese-programmer-wrong-pronunciation-custom-tool-bar-setup" ); - div.innerHTML = ` - 关闭搜索页面🥳🥳🥳🥳🥳🥳更换搜索引擎 - `; + div.innerText = `⚙`; + // box.insertBefore(div,select) +}; - document - .querySelector("#chinese-programmer-wrong-pronunciation-custom-iframe-box") - .appendChild(div); +//关闭窗口 +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 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 +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"; - /* - 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, - }) - ); + 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, }; diff --git a/tools/chromium_extension/js/app/init.js b/tools/chromium_extension/js/app/init.js index 6a5818e..a06dbbe 100644 --- a/tools/chromium_extension/js/app/init.js +++ b/tools/chromium_extension/js/app/init.js @@ -1,66 +1,84 @@ 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 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"); - } + 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"; + } + } + }); + 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"); + } }; export { init }; diff --git a/tools/chromium_extension/js/app/search-engine.js b/tools/chromium_extension/js/app/search-engine.js index c9ba0d0..88ea552 100644 --- a/tools/chromium_extension/js/app/search-engine.js +++ b/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, - gotToYouDaoSearch, - gotToGoogleSearch, + goToYouDaoSearch, + goToGoogleSearch, goToBingDictSearch, - goToBingSearch, - goToBaiduDictSearch, - goToBaiduFanYiSearch, + goToBingSearch }; diff --git a/tools/chromium_extension/js/app/utils.js b/tools/chromium_extension/js/app/utils.js index 376b410..01f403f 100644 --- a/tools/chromium_extension/js/app/utils.js +++ b/tools/chromium_extension/js/app/utils.js @@ -18,7 +18,7 @@ function removeClass(el, className) { function getCookie(name) { let arr, - reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); + reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if ((arr = document.cookie.match(reg))) { return decodeURIComponent(arr[2]); } else { @@ -33,14 +33,16 @@ function setCookie(name, value, second, domain) { var exp = new Date(); exp.setTime(exp.getTime() + second * 1000); document.cookie = - name + - "=" + - encodeURIComponent(value) + - ";expires=" + - exp.toGMTString() + - ";path=/;domain=" + - domain + - ";SameSite=None;Secure"; + name + + "=" + + encodeURIComponent(value) + + ";expires=" + + exp.toGMTString() + + ";path=" + + path + + ";domain=" + + domain + + ";SameSite=None;Secure"; } async function getCookies(domain) { let cookies = await cookieStore.getAll({ domain: domain }); diff --git a/tools/chromium_extension/manifest.json b/tools/chromium_extension/manifest.json index 4a79567..4e3b5c9 100644 --- a/tools/chromium_extension/manifest.json +++ b/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/*", - "*://fanyi.baidu.com/*" + "*://dict.youdao.com/*" ], "web_accessible_resources": [ { diff --git a/tools/chromium_extension/rules/remove_content_security_policy.json b/tools/chromium_extension/rules/remove_content_security_policy.json index 5cf80b3..0e7c2e1 100644 --- a/tools/chromium_extension/rules/remove_content_security_policy.json +++ b/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", - "fanyi.baidu.com" + "dict.youdao.com" ], "resourceTypes": [ "main_frame",