msb-public
/
chinese-programmer-wrong-pronunciation
mirror of https://github.com/shimohq/chinese-programmer-wrong-pronunciation
2
1
Code Issues Projects Releases Wiki Activity

Merge pull request #387 from jingjingxyk/master

Browse Source 
完善嵌入标签页功能
pull/390/head
Yuan Chen 2 years ago committed by GitHub
parent 17a209a611 a002bf8d87
commit 6d311522c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 231 additions and 82 deletions
Show Stats Download Patch File Download Diff File

2
tools/chromium_extension/README.md
Unescape View File

@ -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)
## 手动安装扩展

25
tools/chromium_extension/css/app.css
Unescape View File

@ -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;
}

6
tools/chromium_extension/images/README.md
Unescape View File

@ -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)

BIN
tools/chromium_extension/images/截图2022-07-06 21-10-59.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

10
tools/chromium_extension/js/app/box.js
Unescape View File

@ -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) {

208
tools/chromium_extension/js/app/components.js
Unescape View File

@ -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,
};

19
tools/chromium_extension/js/app/init.js
Unescape View File

@ -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");
}

29
tools/chromium_extension/js/app/search-engine.js
Unescape View File

@ -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,
};

6
tools/chromium_extension/js/app/utils.js
Unescape View File

@ -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";
}

4
tools/chromium_extension/manifest.json
Unescape View File

@ -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": [
{

4
tools/chromium_extension/rules/remove_content_security_policy.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save