diff --git a/tools/chromium_extension/README.md b/tools/chromium_extension/README.md
index 952d08a..eb585be 100644
--- a/tools/chromium_extension/README.md
+++ b/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)
## 手动安装扩展
diff --git a/tools/chromium_extension/css/app.css b/tools/chromium_extension/css/app.css
index a21d55b..54ea51f 100644
--- a/tools/chromium_extension/css/app.css
+++ b/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;
+}
diff --git a/tools/chromium_extension/images/README.md b/tools/chromium_extension/images/README.md
index 765d08e..b632850 100644
--- a/tools/chromium_extension/images/README.md
+++ b/tools/chromium_extension/images/README.md
@@ -1,9 +1,9 @@
# 新增功能截图
-## 嵌入搜索引擎 谷歌搜索
+## 嵌入搜索引擎 有道搜索
-## 嵌入搜索引擎 有道搜索
+## 嵌入搜索引擎 谷歌搜索
-
+
diff --git a/tools/chromium_extension/images/截图2022-07-06 21-10-59.png b/tools/chromium_extension/images/截图2022-07-06 21-10-59.png
new file mode 100644
index 0000000..f673b56
Binary files /dev/null and b/tools/chromium_extension/images/截图2022-07-06 21-10-59.png differ
diff --git a/tools/chromium_extension/js/app/box.js b/tools/chromium_extension/js/app/box.js
index 31641c9..e276708 100644
--- a/tools/chromium_extension/js/app/box.js
+++ b/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";
- // 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 = "goToBaiduFanYiSearch";
- //let tab = "current_tab";
- let tab = "new_tab"; //修改默认为新标签页打开
+ //search_engine_name = "gotToYouDaoSearch";
+ 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..c46aca8 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");
@@ -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 += ``;
+ }
+
+ 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(
+ "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,
};
diff --git a/tools/chromium_extension/js/app/init.js b/tools/chromium_extension/js/app/init.js
index 6a5818e..e5b36f8 100644
--- a/tools/chromium_extension/js/app/init.js
+++ b/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");
}
diff --git a/tools/chromium_extension/js/app/search-engine.js b/tools/chromium_extension/js/app/search-engine.js
index c9ba0d0..77a3776 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,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,
- gotToYouDaoSearch,
- gotToGoogleSearch,
+ goToYouDaoSearch,
+ goToGoogleSearch,
goToBingDictSearch,
goToBingSearch,
- goToBaiduDictSearch,
- goToBaiduFanYiSearch,
};
diff --git a/tools/chromium_extension/js/app/utils.js b/tools/chromium_extension/js/app/utils.js
index 376b410..a0e65dc 100644
--- a/tools/chromium_extension/js/app/utils.js
+++ b/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";
}
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",