新增可选搜索引擎 功能

pull/387/head
jingjingxyk 3 years ago
parent 06cede50cd
commit 502f62c128

@ -23,9 +23,33 @@ tr:hover {
top: 64px !important; top: 64px !important;
} }
.chinese-programmer-wrong-pronunciation-custom-iframe-box-hidden {
display: none;
}
#chinese-programmer-wrong-pronunciation-custom-iframe { #chinese-programmer-wrong-pronunciation-custom-iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-width: 700px !important; min-width: 700px !important;
min-height: 600px !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;
}

@ -3,14 +3,13 @@ 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 = "goToGoogleSearch";
// search_engine_name='gotToYouDaoSearch' search_engine_name = "goToYouDaoSearch";
// search_engine_name = "goToBingDictSearch"; // search_engine_name = "goToBingDictSearch";
// search_engine_name = "goToBingSearch"; // search_engine_name = "goToBingSearch";
search_engine_name = "gotToYouDaoSearch"; //search_engine_name = "gotToYouDaoSearch";
// search_engine_name = "goToBaiduFanYiSearch"; // search_engine_name = "goToBaiduFanYiSearch";
//let tab = "current_tab"; let tab = "current_tab";
let tab = "new_tab"; //修改默认为新标签页打开
let opener = components.getSearchEngineOpener(); let opener = components.getSearchEngineOpener();
if (opener && opener.expired_date) { if (opener && opener.expired_date) {

@ -1,4 +1,5 @@
import { prettyBox } from "./pretty-box.js"; import { prettyBox } from "./pretty-box.js";
import { hasClass, addClass, removeClass } from "./utils.js";
let styleConfig = () => { let styleConfig = () => {
let css = document.createElement("link"); let css = document.createElement("link");
@ -11,52 +12,95 @@ let styleConfig = () => {
let customElement = () => { let customElement = () => {
let link = document.createElement("link"); let link = document.createElement("link");
link.setAttribute( link.setAttribute(
"href", "href",
chrome.runtime.getURL("web-components/x-custom-box.html") 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( let box = document.querySelector(
"#chinese-programmer-wrong-pronunciation-custom-iframe-box" "#chinese-programmer-wrong-pronunciation-custom-iframe-box"
); );
let iframe = null; let iframe = null;
if (!box) { if (!box) {
let custom_box = document.createElement( let custom_box = document.createElement(
"x-chinese-programmer-wrong-pronunciation-custom-box" "x-chinese-programmer-wrong-pronunciation-custom-box"
); );
let aside = document.createElement("aside"); let aside = document.createElement("aside");
aside.setAttribute( aside.setAttribute(
"id", "id",
"chinese-programmer-wrong-pronunciation-custom-iframe-box" "chinese-programmer-wrong-pronunciation-custom-iframe-box"
); );
aside.setAttribute( aside.setAttribute(
"class", "class",
"chinese-programmer-wrong-pronunciation-custom-iframe-box" "chinese-programmer-wrong-pronunciation-custom-iframe-box"
); );
aside.setAttribute("draggable", "true"); 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 = document.createElement("iframe");
iframe.setAttribute( iframe.setAttribute(
"id", "id",
"chinese-programmer-wrong-pronunciation-custom-iframe" "chinese-programmer-wrong-pronunciation-custom-iframe"
); );
iframe.setAttribute("security", "restricted"); iframe.setAttribute("security", "restricted");
//iframe.setAttribute('sandbox',"") //iframe.setAttribute('sandbox',"")
aside.appendChild(tool_bar);
aside.appendChild(iframe); aside.appendChild(iframe);
custom_box.appendChild(aside); custom_box.appendChild(aside);
document.body.appendChild(custom_box); document.body.appendChild(custom_box);
//设置 box 可 拖拽 //设置 box 可 拖拽
prettyBox(aside); prettyBox(aside);
//显示重置按键 //显示置按键
//showResetCurrentSearchEngineTab() showSetSearchEngine(tool_bar, window_close_icon);
} else { } 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( 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; return iframe;
}; };
@ -66,60 +110,130 @@ let getSearchEngineOpener = () => {
return JSON.parse(sessionStorage.getItem(opener_key)); return JSON.parse(sessionStorage.getItem(opener_key));
}; };
let showResetCurrentSearchEngineTab = () => { let showSetSearchEngine = (box, window_close_icon) => {
let div = document.createElement("div"); 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( div.setAttribute(
"id", "class",
"#chinese-programmer-wrong-pronunciation-custom-tools-bar" "chinese-programmer-wrong-pronunciation-custom-tool-bar-setup"
); );
div.innerHTML = ` div.innerText = ``;
<span>关闭搜索页面</span>🥳🥳🥳🥳🥳🥳<span></span> // box.insertBefore(div,select)
`; };
document //关闭窗口
.querySelector("#chinese-programmer-wrong-pronunciation-custom-iframe-box") let closeSearchWindow = () => {
.appendChild(div); 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"; tab = "current_tab";
/* search_engine_name = "goToYouDaoSearch";
if (window.confirm('允许当前页面展示搜索结果')) { //当前页面展示搜索结果 opener = {
tab = "current_tab" tab: tab,
} else { expired_date: expired_date,
//新开标签页展示搜索结果 search_engine_name: search_engine_name,
tab = "new_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(opener));
}; };
let cleanOpener = () => { let cleanOpener = () => {
sessionStorage.removeItem(opener_key); sessionStorage.removeItem(opener_key);
console.log("重置扩展搜索结果打开方式配置---ok");
}; };
export { export {
@ -128,4 +242,5 @@ export {
getIframe, getIframe,
getSearchEngineOpener, getSearchEngineOpener,
setSearchEngineOpener, setSearchEngineOpener,
cleanOpener,
}; };

@ -1,66 +1,84 @@
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);
console.log(URLObj); console.log(URLObj);
if (document.querySelector("#readme table tbody")) { if (document.querySelector("#readme table tbody")) {
box.styleConfig(); //载入自定义组件样式
box.customElement(); box.styleConfig();
//载入自定义组件
box.customElement();
let audio_player = new Audio(); let audio_player = new Audio();
audio_player.setAttribute("autoplay", "true"); audio_player.setAttribute("autoplay", "true");
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();
event.stopPropagation(); event.stopPropagation();
let audio_url = null; let audio_url = null;
if (event.target.nodeName === "TD") { if (event.target.nodeName === "TD") {
let aTag = event.target.querySelector("a"); let aTag = event.target.querySelector("a");
if (aTag) { if (aTag) {
audio_url = aTag.getAttribute("href"); audio_url = aTag.getAttribute("href");
} }
} }
if (event.target.nodeName === "IMG") { if (event.target.nodeName === "IMG") {
let aTag = event.target.parentNode.parentNode; let aTag = event.target.parentNode.parentNode;
audio_url = aTag.getAttribute("href"); audio_url = aTag.getAttribute("href");
} }
if (audio_url) { if (audio_url) {
let desURL = new URL(audio_url); let desURL = new URL(audio_url);
//console.log(desURL.protocol); //console.log(desURL.protocol);
if (desURL.protocol === "http:") { if (desURL.protocol === "http:") {
//skip http //skip http
location.href = audio_url; location.href = audio_url;
} else { } else {
// console.log("audio_url:", audio_url); // console.log("audio_url:", audio_url);
audio_player.setAttribute("src", audio_url); audio_player.setAttribute("src", audio_url);
} }
} }
}); });
document document
.querySelector("#readme table tbody") .querySelector("#readme table tbody")
.addEventListener("mouseover", (event) => { .addEventListener("mouseover", (event) => {
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) {
event.target.setAttribute("title", "点击我打开搜索引擎检索"); event.target.setAttribute("title", "点击我打开搜索引擎检索");
event.target.style.cursor = "pointer"; event.target.style.cursor = "pointer";
} }
} }
}); });
} else { let table = document.querySelector("#readme table");
console.log("no found README.md 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 }; export { init };

@ -1,9 +1,9 @@
let gotToGoogleSearch = (word) => { let goToGoogleSearch = (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 goToYouDaoSearch = (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`;
}; };
@ -14,31 +14,11 @@ let goToBingDictSearch = (word) => {
let goToBingSearch = (word) => { let goToBingSearch = (word) => {
return `https://cn.bing.com/search?q=how%20to%20pronounce%20${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 { export {
goToBaiDuHanYu, goToYouDaoSearch,
gotToYouDaoSearch, goToGoogleSearch,
gotToGoogleSearch,
goToBingDictSearch, goToBingDictSearch,
goToBingSearch, goToBingSearch
goToBaiduDictSearch,
goToBaiduFanYiSearch,
}; };

@ -18,7 +18,7 @@ function removeClass(el, className) {
function getCookie(name) { function getCookie(name) {
let arr, let arr,
reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if ((arr = document.cookie.match(reg))) { if ((arr = document.cookie.match(reg))) {
return decodeURIComponent(arr[2]); return decodeURIComponent(arr[2]);
} else { } else {
@ -33,14 +33,16 @@ function setCookie(name, value, second, domain) {
var exp = new Date(); var exp = new Date();
exp.setTime(exp.getTime() + second * 1000); exp.setTime(exp.getTime() + second * 1000);
document.cookie = document.cookie =
name + name +
"=" + "=" +
encodeURIComponent(value) + encodeURIComponent(value) +
";expires=" + ";expires=" +
exp.toGMTString() + exp.toGMTString() +
";path=/;domain=" + ";path=" +
domain + path +
";SameSite=None;Secure"; ";domain=" +
domain +
";SameSite=None;Secure";
} }
async function getCookies(domain) { async function getCookies(domain) {
let cookies = await cookieStore.getAll({ domain: domain }); let cookies = await cookieStore.getAll({ domain: domain });

@ -22,10 +22,8 @@
"*://www.google.com/*", "*://www.google.com/*",
"*://cn.bing.com/*", "*://cn.bing.com/*",
"*://www.bing.com/*", "*://www.bing.com/*",
"*://dict.baidu.com/*",
"*://www.youdao.com/*", "*://www.youdao.com/*",
"*://dict.youdao.com/*", "*://dict.youdao.com/*"
"*://fanyi.baidu.com/*"
], ],
"web_accessible_resources": [ "web_accessible_resources": [
{ {

@ -45,10 +45,8 @@
"cn.bing.com", "cn.bing.com",
"www.bing.com", "www.bing.com",
"fanyi.baidu.com", "fanyi.baidu.com",
"dict.baidu.com",
"www.youdao.com", "www.youdao.com",
"dict.youdao.com", "dict.youdao.com"
"fanyi.baidu.com"
], ],
"resourceTypes": [ "resourceTypes": [
"main_frame", "main_frame",

Loading…
Cancel
Save