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

页面嵌入搜索引擎，实时检索发音

Browse Source
pull/375/head
jingjingxyk 3 years ago
parent f21d3e466a
commit 2158795a8c
14 changed files with 346 additions and 322 deletions
Show Stats Download Patch File Download Diff File

3
tools/chromium_extension/README.md
Unescape View File

@ -9,6 +9,7 @@
> 5. 这就安装好了，去掉 Developer Mode 勾选。 > 5. 这就安装好了，去掉 Developer Mode 勾选。
> 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音 > 6. 打开[`https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git`](https://github.com/shimohq/chinese-programmer-wrong-pronunciation.git)点击单词，即可听正确的单词读音
## 扩展开发参考 ## 扩展开发参考
1. [content_scripts](https:////developer.chrome.com/docs/extensions/mv3/content_scripts/) 1. [content_scripts](https:////developer.chrome.com/docs/extensions/mv3/content_scripts/)
2. [Declare permissions](https:////developer.chrome.com/docs/extensions/mv3/declare_permissions/)

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

@ -21,8 +21,6 @@ tr:hover {
.chinese-programmer-wrong-pronunciation-custom-iframe-box { .chinese-programmer-wrong-pronunciation-custom-iframe-box {
right: 0 !important; right: 0 !important;
top: 64px !important; top: 64px !important;
} }
#chinese-programmer-wrong-pronunciation-custom-iframe { #chinese-programmer-wrong-pronunciation-custom-iframe {

8
tools/chromium_extension/format-code.sh
Unescape View File

@ -0,0 +1,8 @@
#!/bin/env bash
set -exu
__DIR__=$(cd "$(dirname "$0")";pwd)
cd ${__DIR__}
npm run format-code

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

@ -1,16 +1,15 @@
import * as until from "./until.js"; import * as until from "./until.js";
import * as components from "./components.js" import * as components from "./components.js";
import * as searchEngine from "./search-engine.js" import * as searchEngine from "./search-engine.js";
let goToSearchPronounce = (word) => { let goToSearchPronounce = (word) => {
let search_engine_name = "gotToGoogleSearch";
let search_engine_name = "gotToGoogleSearch"
// search_engine_name='gotToYouDaoSearch' // search_engine_name='gotToYouDaoSearch'
let tab = "current_tab" let tab = "current_tab";
let opener = components.getSearchEngineOpener(); let opener = components.getSearchEngineOpener();
if (opener && opener.expired_date) { if (opener && opener.expired_date) {
if(opener.expired_date > (new Date()).getTime()) { if (opener.expired_date > new Date().getTime()) {
if (opener.search_engine_name) { if (opener.search_engine_name) {
search_engine_name = opener.search_engine_name; search_engine_name = opener.search_engine_name;
} }
@ -20,20 +19,19 @@ let goToSearchPronounce = (word) => {
} }
} }
if (search_engine_name && searchEngine[search_engine_name]) { if (search_engine_name && searchEngine[search_engine_name]) {
console.log(word) console.log(word);
let url = searchEngine[search_engine_name](word); let url = searchEngine[search_engine_name](word);
console.log(url) console.log(url);
if (tab === 'new_tab') { if (tab === "new_tab") {
window.open(url, '_blank') window.open(url, "_blank");
} else { } else {
let iframe = components.getIframe(); let iframe = components.getIframe();
iframe.setAttribute('src', url); iframe.setAttribute("src", url);
} }
} else { } else {
console.log('search engine no found !') console.log("search engine no found !");
}
} }
};
let box = { ...until, ...components, ...searchEngine, goToSearchPronounce }; let box = { ...until, ...components, ...searchEngine, goToSearchPronounce };
export default box export default box;

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

@ -1,5 +1,4 @@
import {prettyBox } from "./pretty-box.js" import { prettyBox } from "./pretty-box.js";
let styleConfig = () => { let styleConfig = () => {
let css = document.createElement("link"); let css = document.createElement("link");
@ -7,62 +6,82 @@ let styleConfig=()=>{
css.setAttribute("type", "text/css"); css.setAttribute("type", "text/css");
css.setAttribute("href", chrome.runtime.getURL("css/app.css")); css.setAttribute("href", chrome.runtime.getURL("css/app.css"));
document.head.appendChild(css); document.head.appendChild(css);
} };
let customElement = () => { let customElement = () => {
let link = document.createElement("link"); let link = document.createElement("link");
link.setAttribute("href",chrome.runtime.getURL("web-components/x-custom-box.html")); link.setAttribute(
"href",
chrome.runtime.getURL("web-components/x-custom-box.html")
);
document.head.appendChild(link); document.head.appendChild(link);
} };
let getIframe = () => { let getIframe = () => {
let box = document.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe-box'); let box = document.querySelector(
"#chinese-programmer-wrong-pronunciation-custom-iframe-box"
);
let iframe = null; let iframe = null;
if (!box) { if (!box) {
let custom_box = document.createElement('x-chinese-programmer-wrong-pronunciation-custom-box'); let custom_box = document.createElement(
"x-chinese-programmer-wrong-pronunciation-custom-box"
let aside=document.createElement('aside') );
aside.setAttribute('id','chinese-programmer-wrong-pronunciation-custom-iframe-box')
aside.setAttribute('class','chinese-programmer-wrong-pronunciation-custom-iframe-box') let aside = document.createElement("aside");
aside.setAttribute('draggable',"true") aside.setAttribute(
"id",
iframe=document.createElement('iframe') "chinese-programmer-wrong-pronunciation-custom-iframe-box"
iframe.setAttribute('id','chinese-programmer-wrong-pronunciation-custom-iframe') );
aside.appendChild(iframe) aside.setAttribute(
custom_box.appendChild(aside) "class",
document.body.appendChild(custom_box) "chinese-programmer-wrong-pronunciation-custom-iframe-box"
);
aside.setAttribute("draggable", "true");
iframe = document.createElement("iframe");
iframe.setAttribute(
"id",
"chinese-programmer-wrong-pronunciation-custom-iframe"
);
aside.appendChild(iframe);
custom_box.appendChild(aside);
document.body.appendChild(custom_box);
//设置 box 可 拖拽 //设置 box 可 拖拽
prettyBox(aside) prettyBox(aside);
//显示重置按键 //显示重置按键
//showResetCurrentSearchEngineTab() //showResetCurrentSearchEngineTab()
} else { } else {
iframe = box.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe') iframe = box.querySelector(
} "#chinese-programmer-wrong-pronunciation-custom-iframe"
return iframe );
} }
return iframe;
};
let opener_key = 'how-to-pronounce-from-search-engine-open-tab-opener' let opener_key = "how-to-pronounce-from-search-engine-open-tab-opener";
let getSearchEngineOpener = () => { let getSearchEngineOpener = () => {
return JSON.parse(sessionStorage.getItem(opener_key)) return JSON.parse(sessionStorage.getItem(opener_key));
} };
let showResetCurrentSearchEngineTab = () => { let showResetCurrentSearchEngineTab = () => {
let div=document.createElement('div'); let div = document.createElement("div");
div.setAttribute('id','#chinese-programmer-wrong-pronunciation-custom-tools-bar') div.setAttribute(
"id",
"#chinese-programmer-wrong-pronunciation-custom-tools-bar"
);
div.innerHTML = ` div.innerHTML = `
<span>关闭搜索页面</span>🥳🥳🥳🥳🥳🥳<span>更换搜索引擎</span> <span>关闭搜索页面</span>🥳🥳🥳🥳🥳🥳<span>更换搜索引擎</span>
` `;
document.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe-box').appendChild(div) document
.querySelector("#chinese-programmer-wrong-pronunciation-custom-iframe-box")
} .appendChild(div);
};
let setSearchEngineOpener = (search_engine_name, tab) => { let setSearchEngineOpener = (search_engine_name, tab) => {
let opener = getSearchEngineOpener();
let opener = getSearchEngineOpener() if (!opener || opener.expired_date < new Date().getTime()) {
if (!opener || opener.expired_date < (new Date()).getTime()) { search_engine_name = "gotToGoogleSearch";
search_engine_name = "gotToGoogleSearch"
/* /*
if (window.confirm('默认有道词典搜索,选择 “取消” 将设置为谷歌搜索,有效期一天')) { //当前页面展示搜索结果 if (window.confirm('默认有道词典搜索,选择 “取消” 将设置为谷歌搜索,有效期一天')) { //当前页面展示搜索结果
search_engine_name = "gotToYouDaoSearch" search_engine_name = "gotToYouDaoSearch"
@ -72,12 +91,11 @@ let setSearchEngineOpener=(search_engine_name,tab)=>{
} }
*/ */
//页面展示方式，默认有效期一天 //页面展示方式，默认有效期一天
let expired_date = (new Date()).getTime() + 24 * 60 * 60 * 1000 let expired_date = new Date().getTime() + 24 * 60 * 60 * 1000;
// expired_date = (new Date()).getTime() + 10000 # test expired // expired_date = (new Date()).getTime() + 10000 # test expired
tab = "current_tab" tab = "current_tab";
/* /*
if (window.confirm('允许当前页面展示搜索结果')) { //当前页面展示搜索结果 if (window.confirm('允许当前页面展示搜索结果')) { //当前页面展示搜索结果
tab = "current_tab" tab = "current_tab"
@ -87,17 +105,25 @@ let setSearchEngineOpener=(search_engine_name,tab)=>{
} }
*/ */
sessionStorage.setItem(opener_key, JSON.stringify({ sessionStorage.setItem(
"tab": tab, opener_key,
"expired_date": expired_date, JSON.stringify({
'search_engine_name': search_engine_name tab: tab,
})); expired_date: expired_date,
} search_engine_name: search_engine_name,
})
);
} }
};
let cleanOpener = () => { let cleanOpener = () => {
sessionStorage.removeItem(opener_key) sessionStorage.removeItem(opener_key);
} };
export {
export {styleConfig,customElement,getIframe,getSearchEngineOpener,setSearchEngineOpener} styleConfig,
customElement,
getIframe,
getSearchEngineOpener,
setSearchEngineOpener,
};

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

@ -1,4 +1,4 @@
import box from "./box.js" import box from "./box.js";
let init = () => { let init = () => {
let URLObj = new URL(location.href); let URLObj = new URL(location.href);
@ -12,15 +12,14 @@ let init=()=>{
document document
.querySelector("#readme table tbody") .querySelector("#readme table tbody")
.addEventListener("click", (event) => { .addEventListener("click", (event) => {
//console.log(event.target) //console.log(event.target)
// console.log(event.target.nodeType) // console.log(event.target.nodeType)
// console.log(event.target.nodeName); // console.log(event.target.nodeName);
let parentElement = event.target.parentElement let parentElement = event.target.parentElement;
if (parentElement && parentElement.nodeName === 'TR') { if (parentElement && parentElement.nodeName === "TR") {
if (parentElement.firstElementChild === event.target) { if (parentElement.firstElementChild === event.target) {
//使用搜索引擎查询发音 //使用搜索引擎查询发音
box.goToSearchPronounce(event.target.innerText) box.goToSearchPronounce(event.target.innerText);
} }
} }
event.preventDefault(); event.preventDefault();
@ -48,19 +47,20 @@ let init=()=>{
} }
} }
}); });
document.querySelector("#readme table tbody").addEventListener('mouseover',(event)=>{ document
let parentElement = event.target.parentElement .querySelector("#readme table tbody")
if (parentElement && parentElement.nodeName === 'TR') { .addEventListener("mouseover", (event) => {
let parentElement = event.target.parentElement;
if (parentElement && parentElement.nodeName === "TR") {
if (parentElement.firstElementChild === event.target) { if (parentElement.firstElementChild === event.target) {
event.target.setAttribute('title','点击我打开搜索引擎检索') event.target.setAttribute("title", "点击我打开搜索引擎检索");
event.target.style.cursor='pointer' event.target.style.cursor = "pointer";
} }
} }
}) });
} else { } else {
console.log("no found README.md table") console.log("no found README.md table");
}
} }
};
export { init };
export {init}

53
tools/chromium_extension/js/app/pretty-box.js
Unescape View File

@ -1,8 +1,6 @@
import { addClass, removeClass } from "./until.js"; import { addClass, removeClass } from "./until.js";
let prettyBox = (box) => { let prettyBox = (box) => {
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243 // 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
let dragging = false; let dragging = false;
@ -14,20 +12,19 @@ let prettyBox = (box) => {
let left = box.offsetLeft; let left = box.offsetLeft;
let top = box.offsetTop; let top = box.offsetTop;
removeClass(box, 'chinese-programmer-wrong-pronunciation-custom-iframe-box') removeClass(
box,
"chinese-programmer-wrong-pronunciation-custom-iframe-box"
);
box.style.left = left + "px"; box.style.left = left + "px";
box.style.top = top + "px"; box.style.top = top + "px";
diffX = event.clientX - left; diffX = event.clientX - left;
diffY = event.clientY - top; diffY = event.clientY - top;
};
}
document.onmousemove = function (event) { document.onmousemove = function (event) {
if (dragging) { if (dragging) {
// console.log(event.clientX, event.clientY) // console.log(event.clientX, event.clientY)
//console.log(diffX, diffY) //console.log(diffX, diffY)
@ -35,45 +32,43 @@ let prettyBox = (box) => {
let moveY = event.clientY - diffY; let moveY = event.clientY - diffY;
if (moveX < 0) { if (moveX < 0) {
moveX = 0 moveX = 0;
} else if (moveX > window.innerWidth - box.offsetWidth) { } else if (moveX > window.innerWidth - box.offsetWidth) {
moveX = window.innerWidth - box.offsetWidth moveX = window.innerWidth - box.offsetWidth;
} }
if (moveY < 0) { if (moveY < 0) {
moveY = 0 moveY = 0;
} else if (moveY > window.innerHeight - box.offsetHeight) { } else if (moveY > window.innerHeight - box.offsetHeight) {
moveY = window.innerHeight - box.offsetHeight moveY = window.innerHeight - box.offsetHeight;
} }
box.style.left = moveX + "px"; box.style.left = moveX + "px";
box.style.top = moveY + "px" box.style.top = moveY + "px";
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
} }
} };
document.onmouseup = function (event) { document.onmouseup = function (event) {
dragging = false; dragging = false;
} };
box.onmouseup = (event) => { box.onmouseup = (event) => {
dragging = false; dragging = false;
} };
box.ondragstart = function (event) { box.ondragstart = function (event) {
console.log(box.offsetLeft, box.offsetTop) console.log(box.offsetLeft, box.offsetTop);
console.log('开始拖拽'); console.log("开始拖拽");
} };
box.ondrag = function () { box.ondrag = function () {
console.log(box.offsetLeft, box.offsetTop) console.log(box.offsetLeft, box.offsetTop);
console.log('拖拽中'); console.log("拖拽中");
} };
box.ondragend = function () { box.ondragend = function () {
console.log(box.offsetLeft, box.offsetTop) console.log(box.offsetLeft, box.offsetTop);
console.log('拖拽结束') console.log("拖拽结束");
} };
};
}
export {prettyBox} export { prettyBox };

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

@ -1,23 +1,22 @@
let gotToGoogleSearch = (word) => { let gotToGoogleSearch = (word) => {
word = word.replace(/\s/, '+'); word = word.replace(/\s/, "+");
return `https://www.google.com/search?q=how+to+pronounce+${word}` return `https://www.google.com/search?q=how+to+pronounce+${word}`;
} };
let gotToYouDaoSearch = (word) => { let gotToYouDaoSearch = (word) => {
word = word.replace(/\s/, '+'); word = word.replace(/\s/, "+");
return `https://www.youdao.com/result?word=${word}&lang=en` return `https://www.youdao.com/result?word=${word}&lang=en`;
} };
let goToBaiDuHanYu = () => { let goToBaiDuHanYu = () => {
// 一点飞上天，黄河两头弯；八字大张口，言字中间走；左一扭，右一扭，你一长，我一长，中间加个马大王；心字底，月字旁，一个小勾挂麻糖，坐个车子逛咸阳。 // 一点飞上天，黄河两头弯；八字大张口，言字中间走；左一扭，右一扭，你一长，我一长，中间加个马大王；心字底，月字旁，一个小勾挂麻糖，坐个车子逛咸阳。
// 56个笔画的字 邉 // 56个笔画的字 邉
// U+30EDE （简化版本 U+30EDD） // U+30EDE （简化版本 U+30EDD）
{ {
"汉".charCodeAt(0).toString(16) "汉".charCodeAt(0).toString(16);
String.fromCharCode('0x6c49') String.fromCharCode("0x6c49");
} }
//https://hanyu.baidu.com/s?wd=%E9%82%89 //https://hanyu.baidu.com/s?wd=%E9%82%89
} };
export {goToBaiDuHanYu,gotToYouDaoSearch,gotToGoogleSearch} export { goToBaiDuHanYu, gotToYouDaoSearch, gotToGoogleSearch };

21
tools/chromium_extension/js/app/until.js
Unescape View File

@ -1,24 +1,19 @@
function hasClass(el, className) { function hasClass(el, className) {
if (el.classList) if (el.classList) return el.classList.contains(className);
return el.classList.contains(className); return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
} }
function addClass(el, className) { function addClass(el, className) {
if (el.classList) if (el.classList) el.classList.add(className);
el.classList.add(className) else if (!hasClass(el, className)) el.className += " " + className;
else if (!hasClass(el, className))
el.className += " " + className;
} }
function removeClass(el, className) { function removeClass(el, className) {
if (el.classList) if (el.classList) el.classList.remove(className);
el.classList.remove(className)
else if (hasClass(el, className)) { else if (hasClass(el, className)) {
let reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); let reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
el.className = el.className.replace(reg, ' '); el.className = el.className.replace(reg, " ");
} }
} }
export {addClass, removeClass} export { addClass, removeClass };

4
tools/chromium_extension/js/content-script.js
Unescape View File

@ -1,4 +1,4 @@
(async () => { (async () => {
let app = await import(chrome.runtime.getURL('js/app/init.js')) let app = await import(chrome.runtime.getURL("js/app/init.js"));
app.init() app.init();
})(); })();

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

@ -38,7 +38,11 @@
}, },
"condition": { "condition": {
"urlFilter": "*", "urlFilter": "*",
"requestDomains": ["github.com", "githubusercontent.com","www.google.com"], "requestDomains": [
"github.com",
"githubusercontent.com",
"www.google.com"
],
"resourceTypes": [ "resourceTypes": [
"main_frame", "main_frame",
"sub_frame", "sub_frame",

Write Preview
Loading…
Cancel
Save