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 勾选。
> 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/)
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 {
right: 0 !important;
top: 64px !important;
}
#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 components from "./components.js"
import * as searchEngine from "./search-engine.js"
import * as components from "./components.js";
import * as searchEngine from "./search-engine.js";
let goToSearchPronounce = (word) => {
let search_engine_name = "gotToGoogleSearch"
let search_engine_name = "gotToGoogleSearch";
// search_engine_name='gotToYouDaoSearch'
let tab = "current_tab"
let tab = "current_tab";
let opener = components.getSearchEngineOpener();
if (opener && opener.expired_date) {
if(opener.expired_date > (new Date()).getTime()) {
if (opener.expired_date > new Date().getTime()) {
if (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]) {
console.log(word)
console.log(word);
let url = searchEngine[search_engine_name](word);
console.log(url)
if (tab === 'new_tab') {
window.open(url, '_blank')
console.log(url);
if (tab === "new_tab") {
window.open(url, "_blank");
} else {
let iframe = components.getIframe();
iframe.setAttribute('src', url);
iframe.setAttribute("src", url);
}
} else {
console.log('search engine no found !')
}
console.log("search engine no found !");
}
};
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 css = document.createElement("link");
@ -7,62 +6,82 @@ let styleConfig=()=>{
css.setAttribute("type", "text/css");
css.setAttribute("href", chrome.runtime.getURL("css/app.css"));
document.head.appendChild(css);
}
};
let customElement = () => {
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);
}
};
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;
if (!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')
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)
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"
);
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 可 拖拽
prettyBox(aside)
prettyBox(aside);
//显示重置按键
//showResetCurrentSearchEngineTab()
} else {
iframe = box.querySelector('#chinese-programmer-wrong-pronunciation-custom-iframe')
}
return iframe
iframe = box.querySelector(
"#chinese-programmer-wrong-pronunciation-custom-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 = () => {
return JSON.parse(sessionStorage.getItem(opener_key))
}
return JSON.parse(sessionStorage.getItem(opener_key));
};
let showResetCurrentSearchEngineTab = () => {
let div=document.createElement('div');
div.setAttribute('id','#chinese-programmer-wrong-pronunciation-custom-tools-bar')
let div = document.createElement("div");
div.setAttribute(
"id",
"#chinese-programmer-wrong-pronunciation-custom-tools-bar"
);
div.innerHTML = `
<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 opener = getSearchEngineOpener()
if (!opener || opener.expired_date < (new Date()).getTime()) {
search_engine_name = "gotToGoogleSearch"
let opener = getSearchEngineOpener();
if (!opener || opener.expired_date < new Date().getTime()) {
search_engine_name = "gotToGoogleSearch";
/*
if (window.confirm('默认有道词典搜索,选择 “取消” 将设置为谷歌搜索,有效期一天')) { //当前页面展示搜索结果
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
tab = "current_tab"
tab = "current_tab";
/*
if (window.confirm('允许当前页面展示搜索结果')) { //当前页面展示搜索结果
tab = "current_tab"
@ -87,17 +105,25 @@ let setSearchEngineOpener=(search_engine_name,tab)=>{
}
*/
sessionStorage.setItem(opener_key, JSON.stringify({
"tab": tab,
"expired_date": expired_date,
'search_engine_name': search_engine_name
}));
}
sessionStorage.setItem(
opener_key,
JSON.stringify({
tab: tab,
expired_date: expired_date,
search_engine_name: search_engine_name,
})
);
}
};
let cleanOpener = () => {
sessionStorage.removeItem(opener_key)
}
export {styleConfig,customElement,getIframe,getSearchEngineOpener,setSearchEngineOpener}
sessionStorage.removeItem(opener_key);
};
export {
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 URLObj = new URL(location.href);
@ -12,15 +12,14 @@ let init=()=>{
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') {
let parentElement = event.target.parentElement;
if (parentElement && parentElement.nodeName === "TR") {
if (parentElement.firstElementChild === event.target) {
//使用搜索引擎查询发音
box.goToSearchPronounce(event.target.innerText)
box.goToSearchPronounce(event.target.innerText);
}
}
event.preventDefault();
@ -48,19 +47,20 @@ let init=()=>{
}
}
});
document.querySelector("#readme table tbody").addEventListener('mouseover',(event)=>{
let parentElement = event.target.parentElement
if (parentElement && parentElement.nodeName === 'TR') {
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'
event.target.setAttribute("title", "点击我打开搜索引擎检索");
event.target.style.cursor = "pointer";
}
}
})
});
} 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";
let prettyBox = (box) => {
// 参考 https://blog.csdn.net/weixin_41910848/article/details/82218243
let dragging = false;
@ -14,20 +12,19 @@ let prettyBox = (box) => {
let left = box.offsetLeft;
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.top = top + "px";
diffX = event.clientX - left;
diffY = event.clientY - top;
}
};
document.onmousemove = function (event) {
if (dragging) {
// console.log(event.clientX, event.clientY)
//console.log(diffX, diffY)
@ -35,45 +32,43 @@ let prettyBox = (box) => {
let moveY = event.clientY - diffY;
if (moveX < 0) {
moveX = 0
moveX = 0;
} else if (moveX > window.innerWidth - box.offsetWidth) {
moveX = window.innerWidth - box.offsetWidth
moveX = window.innerWidth - box.offsetWidth;
}
if (moveY < 0) {
moveY = 0
moveY = 0;
} else if (moveY > window.innerHeight - box.offsetHeight) {
moveY = window.innerHeight - box.offsetHeight
moveY = window.innerHeight - box.offsetHeight;
}
box.style.left = moveX + "px";
box.style.top = moveY + "px"
box.style.top = moveY + "px";
event.stopPropagation();
event.preventDefault();
}
}
};
document.onmouseup = function (event) {
dragging = false;
}
};
box.onmouseup = (event) => {
dragging = false;
}
};
box.ondragstart = function (event) {
console.log(box.offsetLeft, box.offsetTop)
console.log('开始拖拽');
}
console.log(box.offsetLeft, box.offsetTop);
console.log("开始拖拽");
};
box.ondrag = function () {
console.log(box.offsetLeft, box.offsetTop)
console.log('拖拽中');
}
console.log(box.offsetLeft, box.offsetTop);
console.log("拖拽中");
};
box.ondragend = function () {
console.log(box.offsetLeft, box.offsetTop)
console.log('拖拽结束')
}
}
console.log(box.offsetLeft, box.offsetTop);
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) => {
word = word.replace(/\s/, '+');
return `https://www.google.com/search?q=how+to+pronounce+${word}`
}
word = word.replace(/\s/, "+");
return `https://www.google.com/search?q=how+to+pronounce+${word}`;
};
let gotToYouDaoSearch = (word) => {
word = word.replace(/\s/, '+');
return `https://www.youdao.com/result?word=${word}&lang=en`
}
word = word.replace(/\s/, "+");
return `https://www.youdao.com/result?word=${word}&lang=en`;
};
let goToBaiDuHanYu = () => {
// 一点飞上天，黄河两头弯；八字大张口，言字中间走；左一扭，右一扭，你一长，我一长，中间加个马大王；心字底，月字旁，一个小勾挂麻糖，坐个车子逛咸阳。
// 56个笔画的字 邉
// U+30EDE （简化版本 U+30EDD）
{
"汉".charCodeAt(0).toString(16)
String.fromCharCode('0x6c49')
"汉".charCodeAt(0).toString(16);
String.fromCharCode("0x6c49");
}
//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) {
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
if (el.classList) return el.classList.contains(className);
return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
}
function addClass(el, className) {
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className))
el.className += " " + className;
if (el.classList) el.classList.add(className);
else if (!hasClass(el, className)) el.className += " " + className;
}
function removeClass(el, className) {
if (el.classList)
el.classList.remove(className)
if (el.classList) el.classList.remove(className);
else if (hasClass(el, className)) {
let reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
let reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
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 () => {
let app = await import(chrome.runtime.getURL('js/app/init.js'))
app.init()
let app = await import(chrome.runtime.getURL("js/app/init.js"));
app.init();
})();

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

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

Write Preview
Loading…
Cancel
Save