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