├── .gitignore ├── LICENSE ├── README.md ├── demo ├── demo1.png ├── demo2.png ├── demo3.png └── mobiledemo.png ├── extension.png ├── manifest.json ├── newPage ├── components │ ├── bottomRight │ │ └── bottomRight.js │ ├── calculator │ │ ├── cal.js │ │ ├── calc.js │ │ └── click.js │ ├── changeLink │ │ └── changeLink.js │ ├── historyBar │ │ └── historyBar.js │ ├── index.js │ ├── infoBar │ │ └── infoBar.js │ ├── mainArea │ │ ├── index.js │ │ ├── links.js │ │ ├── moreSearch │ │ │ ├── index.js │ │ │ └── list.js │ │ └── searchBar │ │ │ └── searchBar.js │ ├── oneWindow │ │ ├── closeOneWindow.js │ │ ├── index.js │ │ ├── oneDataGet.js │ │ └── openOneWindow.js │ ├── settingMain │ │ ├── backMenu.js │ │ ├── closeSettingWindow.js │ │ ├── index.js │ │ ├── settingInnerMain │ │ │ ├── backgroundMain │ │ │ │ ├── apiImgs.js │ │ │ │ ├── exImgs.js │ │ │ │ ├── imgChange.js │ │ │ │ └── index.js │ │ │ ├── donateMain │ │ │ │ └── donateMain.js │ │ │ ├── featuresSetting │ │ │ │ ├── index.js │ │ │ │ └── list.js │ │ │ ├── helpMain │ │ │ │ ├── helpMain.js │ │ │ │ └── list.js │ │ │ ├── index.js │ │ │ ├── linkSetting │ │ │ │ ├── index.js │ │ │ │ └── list.js │ │ │ ├── otherSetting │ │ │ │ ├── index.js │ │ │ │ └── loadAn.js │ │ │ └── searchSetting │ │ │ │ ├── index.js │ │ │ │ └── list.js │ │ └── settingMenu │ │ │ ├── index.js │ │ │ ├── menu.js │ │ │ └── menuClick.js │ ├── toast │ │ └── toast.js │ ├── topLeft │ │ ├── topLeft.js │ │ └── weather │ │ │ ├── dayWeather.js │ │ │ ├── getDatShow.js │ │ │ ├── index.js │ │ │ └── weatherImg.js │ └── topRight │ │ ├── hide.js │ │ └── topRight.js ├── css │ ├── cal.css │ ├── color.css │ ├── history.css │ ├── info.css │ ├── one.css │ ├── setting.css │ └── style.css ├── imgs │ ├── Chrome_Web_Store_logo_2012-2015.svg.png │ ├── GitHub.png │ ├── IThome.png │ ├── aliyun.png │ ├── azure-blue.png │ ├── back_black.png │ ├── background - 0.jpg │ ├── background - 1.jpg │ ├── background - 2.jpg │ ├── background - 3.jpg │ ├── background - 4.jpg │ ├── background - 5.jpg │ ├── baidu.png │ ├── bing-logo.png │ ├── calculator.png │ ├── close.png │ ├── coolapk.png │ ├── dLinkIcon.png │ ├── dark │ │ ├── Timer.png │ │ ├── back.png │ │ ├── calculator.png │ │ ├── close.png │ │ ├── down.png │ │ ├── fy_ic_history.png │ │ ├── hide.png │ │ ├── info.png │ │ ├── reload.png │ │ ├── setting.png │ │ └── to.png │ ├── ddg.svg │ ├── donate │ │ ├── donate1.png │ │ ├── donate2.jpg │ │ └── donate3.png │ ├── down.png │ ├── favicon.ico │ ├── fy_ic_history.png │ ├── google.png │ ├── hide.png │ ├── icon_bilibili-circle.png │ ├── info.png │ ├── mobile │ │ ├── background - 0.jpg │ │ ├── background - 1.jpg │ │ ├── background - 2.jpg │ │ ├── background - 3.jpg │ │ ├── background - 4.jpg │ │ └── background - 5.jpg │ ├── qq.jpg │ ├── reload.png │ ├── search.png │ ├── setting.png │ ├── sougou.png │ ├── timer.png │ ├── to.png │ ├── weather │ │ ├── 00.png │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ └── 04.png │ ├── yandex.png │ └── youtube.png ├── index.html ├── js │ ├── features │ │ ├── backgroud.js │ │ ├── changeLink.js │ │ ├── hsFeature.js │ │ ├── hsLink.js │ │ └── search.js │ └── main │ │ ├── dark2light.js │ │ ├── function.js │ │ ├── index.js │ │ ├── onLoadFeature.js │ │ ├── print.js │ │ └── settings.js └── util │ ├── isMobile.js │ └── reactivity.js └── popupPage ├── extension.html ├── popup.js └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 托噜酱 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # uyou 新标签页 2 | 3 | **这是一个好看的 chrome 新标签页插件** 4 | 5 | ## 桌面端样式 6 | * 主页 7 | ![](demo/demo1.png) 8 | * 设置 9 | ![](demo/demo3.png) 10 | * 自定义搜索引擎 11 | ![](demo/demo2.png) 12 | 13 | ## 移动端样式 14 | ![](demo/mobiledemo.png) -------------------------------------------------------------------------------- /demo/demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/demo/demo1.png -------------------------------------------------------------------------------- /demo/demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/demo/demo2.png -------------------------------------------------------------------------------- /demo/demo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/demo/demo3.png -------------------------------------------------------------------------------- /demo/mobiledemo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/demo/mobiledemo.png -------------------------------------------------------------------------------- /extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/extension.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "uyou 新标签页", 4 | "description": "这是一个很好看的新标签页！", 5 | "version": "1.2.9", 6 | "icons": { 7 | "128": "extension.png", 8 | "48": "extension.png", 9 | "16": "extension.png" 10 | }, 11 | "chrome_url_overrides": { 12 | "newtab": "newPage/index.html" 13 | }, 14 | "action": { 15 | "default_popup": "popupPage/extension.html", 16 | "default_icon": "extension.png" 17 | }, 18 | "permissions": [ 19 | "history", 20 | "storage", 21 | "unlimitedStorage", 22 | "downloads" 23 | ], 24 | "content_security_policy": { 25 | "extension_pages": "script-src 'self'; object-src 'self';" 26 | } 27 | } -------------------------------------------------------------------------------- /newPage/components/bottomRight/bottomRight.js: -------------------------------------------------------------------------------- 1 | export default class bottomRight extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.className = 'bottom-right' 8 | this.id = 'bottom-right' 9 | this.style = 'bottom: 0;' 10 | this.innerHTML = ` 11 | 12 | 13 | ` 14 | } 15 | } -------------------------------------------------------------------------------- /newPage/components/calculator/cal.js: -------------------------------------------------------------------------------- 1 | function isOperator(value) { 2 | var operatorString = "+-*/()"; 3 | return operatorString.indexOf(value) > -1 4 | } 5 | function getPrioraty(value) { 6 | switch (value) { 7 | case '+': 8 | case '-': 9 | return 1; 10 | case '*': 11 | case '/': 12 | return 2; 13 | default: 14 | return 0; 15 | } 16 | } 17 | function prioraty(o1, o2) { 18 | return getPrioraty(o1) <= getPrioraty(o2); 19 | } 20 | export function dal2Rpn(exp) { 21 | var inputStack = []; 22 | var outputStack = []; 23 | var outputQueue = []; 24 | let res = ''; 25 | for (var i = 0, len = exp.length; i < len; i++) { 26 | var cur = exp[i]; 27 | if (cur != ' ') { 28 | res = res + cur; 29 | if (i + 1 < exp.length) { 30 | if (isOperator(exp[i])) { 31 | inputStack.push(res); 32 | res = '' 33 | } else { 34 | if (isOperator(exp[i + 1])) { 35 | inputStack.push(res); 36 | res = '' 37 | } 38 | } 39 | } else { 40 | inputStack.push(res); 41 | res = '' 42 | } 43 | } 44 | } 45 | while (inputStack.length > 0) { 46 | var cur = inputStack.shift(); 47 | if (isOperator(cur)) { 48 | if (cur == '(') { 49 | outputStack.push(cur); 50 | } else if (cur == ')') { 51 | var po = outputStack.pop(); 52 | while (po != '(' && outputStack.length > 0) { 53 | outputQueue.push(po); 54 | po = outputStack.pop(); 55 | } 56 | if (po != '(') { 57 | throw "error: unmatched ()"; 58 | } 59 | } else { 60 | while (prioraty(cur, outputStack[outputStack.length - 1]) && outputStack.length > 0) { 61 | outputQueue.push(outputStack.pop()); 62 | } 63 | outputStack.push(cur); 64 | } 65 | } else { 66 | outputQueue.push(new Number(cur)); 67 | } 68 | } 69 | if (outputStack.length > 0) { 70 | if (outputStack[outputStack.length - 1] == ')' || outputStack[outputStack.length - 1] == '(') { 71 | throw "error: unmatched ()"; 72 | } 73 | while (outputStack.length > 0) { 74 | outputQueue.push(outputStack.pop()); 75 | } 76 | } 77 | return outputQueue; 78 | } 79 | export function evalRpn(rpnQueue) { 80 | var outputStack = []; 81 | while (rpnQueue.length > 0) { 82 | var cur = rpnQueue.shift(); 83 | 84 | if (!isOperator(cur)) { 85 | outputStack.push(cur); 86 | } else { 87 | if (outputStack.length < 2) { 88 | throw "unvalid stack length"; 89 | } 90 | var sec = outputStack.pop(); 91 | var fir = outputStack.pop(); 92 | outputStack.push(getResult(fir, sec, cur)); 93 | } 94 | } 95 | if (outputStack.length != 1) { 96 | throw "unvalid expression"; 97 | } else { 98 | return outputStack[0]; 99 | } 100 | } 101 | function getResult(first, second, operator) { 102 | var result = 0; 103 | switch (operator) { 104 | case '+': 105 | result = first + second; 106 | break; 107 | case '-': 108 | result = first - second; 109 | break; 110 | case '*': 111 | result = first * second; 112 | break; 113 | case '/': 114 | result = first / second; 115 | break; 116 | default: 117 | return 0; 118 | } 119 | function formatFloat(f, digit) { 120 | var m = Math.pow(10, digit); 121 | return parseInt(f * m, 10) / m; 122 | } 123 | return (formatFloat(result, 2)); 124 | } -------------------------------------------------------------------------------- /newPage/components/calculator/calc.js: -------------------------------------------------------------------------------- 1 | import { evalRpn, dal2Rpn } from "./cal.js" 2 | import click from "./click.js" 3 | import Observer from "../../util/reactivity.js" 4 | 5 | export default class mainCalc extends HTMLElement { 6 | constructor() { 7 | super() 8 | this._data = { 9 | result: '' 10 | } 11 | this.render() 12 | click() 13 | Observer(this._data, '#card') 14 | } 15 | render() { 16 | this.className = 'mainCal' 17 | this.id = 'mainCal' 18 | this.hidden = true 19 | this.innerHTML = ` 20 |
21 | 22 | c 23 | / 24 | * 25 | 7 26 | 8 27 | 9 28 | - 29 | 4 30 | 5 31 | 6 32 | + 33 | 1 34 | 2 35 | 3 36 | 0 37 | 00 38 | . 39 | = 40 |
41 | ` 42 | document.getElementById('result').onclick = () => { 43 | this.result() 44 | } 45 | } 46 | result() { 47 | this._data.result = evalRpn(dal2Rpn(document.cal.txt.value)); 48 | } 49 | } -------------------------------------------------------------------------------- /newPage/components/calculator/click.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId } from '../../js/main/function.js' 2 | 3 | export default function click() { 4 | elemenetGetId('clear').onclick = function () { 5 | document.cal.txt.value = ''; 6 | } 7 | 8 | elemenetGetId('/').onclick = function () { 9 | document.cal.txt.value += '/'; 10 | } 11 | 12 | elemenetGetId('*').onclick = function () { 13 | document.cal.txt.value += '*'; 14 | } 15 | 16 | elemenetGetId('7').onclick = function () { 17 | document.cal.txt.value += '7'; 18 | } 19 | 20 | elemenetGetId('8').onclick = function () { 21 | document.cal.txt.value += '8'; 22 | } 23 | 24 | elemenetGetId('9').onclick = function () { 25 | document.cal.txt.value += '9'; 26 | } 27 | 28 | elemenetGetId('-').onclick = function () { 29 | document.cal.txt.value += '-'; 30 | } 31 | 32 | elemenetGetId('4').onclick = function () { 33 | document.cal.txt.value += '4'; 34 | } 35 | 36 | elemenetGetId('5').onclick = function () { 37 | document.cal.txt.value += '5'; 38 | } 39 | 40 | elemenetGetId('6').onclick = function () { 41 | document.cal.txt.value += '6'; 42 | } 43 | 44 | elemenetGetId('+').onclick = function () { 45 | document.cal.txt.value += '+'; 46 | } 47 | 48 | elemenetGetId('1').onclick = function () { 49 | document.cal.txt.value += '1'; 50 | } 51 | 52 | elemenetGetId('2').onclick = function () { 53 | document.cal.txt.value += '2'; 54 | } 55 | 56 | elemenetGetId('3').onclick = function () { 57 | document.cal.txt.value += '3'; 58 | } 59 | 60 | elemenetGetId('0').onclick = function () { 61 | document.cal.txt.value += '0'; 62 | } 63 | 64 | elemenetGetId('00').onclick = function () { 65 | document.cal.txt.value += '00'; 66 | } 67 | 68 | elemenetGetId('.').onclick = function () { 69 | document.cal.txt.value += '.'; 70 | } 71 | } -------------------------------------------------------------------------------- /newPage/components/changeLink/changeLink.js: -------------------------------------------------------------------------------- 1 | export default class changeLink extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'changeLink' 8 | this.style = 'display: none;' 9 | this.innerHTML = ` 10 |
11 |
12 |
13 |
选择你的图片
14 | 15 |
16 |
17 |
-
18 |
25
19 |
+
20 |
21 | 22 | 23 | 24 | ` 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /newPage/components/historyBar/historyBar.js: -------------------------------------------------------------------------------- 1 | export default class historyBar extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7 5 | this.oneWeekAgo = (new Date).getTime() - this.microsecondsPerWeek 6 | this.query = { 7 | "text": "", 8 | 'startTime': this.oneWeekAgo, 9 | 'maxResults': 50 10 | } 11 | this.render() 12 | this.init() 13 | } 14 | render() { 15 | this.className = 'bar' 16 | this.id = 'bar' 17 | this.innerHTML = ` 18 |
19 |
20 | 21 |
22 |
23 |
24 | ` 25 | } 26 | init() { 27 | chrome.history.search(this.query, (results) => { 28 | results.forEach(item => { 29 | const historyInfo = document.createElement('div'); 30 | const historyTitle = document.createElement('div'); 31 | const historyLink = document.createElement('div'); 32 | historyInfo.className = 'historyInfo'; 33 | historyTitle.className = 'historyTitle'; 34 | historyTitle.innerText = item.title; 35 | historyLink.className = 'historyLink'; 36 | historyLink.innerText = item.url; 37 | historyInfo.appendChild(historyTitle); 38 | historyInfo.appendChild(historyLink); 39 | document.getElementById('historyIn').appendChild(historyInfo); 40 | // open history link in new tab 41 | historyInfo.addEventListener('click', () => { 42 | chrome.tabs.create({ 43 | url: historyLink.innerText 44 | }) 45 | }) 46 | }) 47 | }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /newPage/components/index.js: -------------------------------------------------------------------------------- 1 | import mainCalc from "./calculator/calc.js"; 2 | import mainArea from "./mainArea/index.js"; 3 | import infoBar from "./infoBar/infoBar.js"; 4 | import historyBar from "./historyBar/historyBar.js"; 5 | import bottomRight from "./bottomRight/bottomRight.js"; 6 | import topRight from "./topRight/topRight.js"; 7 | import topLeft from "./topLeft/topLeft.js"; 8 | import oneWindow from "./oneWindow/index.js"; 9 | import settingMain from "./settingMain/index.js"; 10 | import changeLink from "./changeLink/changeLink.js"; 11 | import toast from "./toast/toast.js"; 12 | import {loadBackground} from "../js/features/backgroud.js"; 13 | 14 | customElements.define('main-calc', mainCalc) 15 | customElements.define('main-area', mainArea) 16 | customElements.define('info-bar', infoBar) 17 | customElements.define('history-bar', historyBar) 18 | customElements.define('bottom-right', bottomRight) 19 | customElements.define('top-right', topRight) 20 | customElements.define('top-left', topLeft) 21 | customElements.define('one-window', oneWindow) 22 | customElements.define('setting-main', settingMain) 23 | customElements.define('change-link', changeLink) 24 | customElements.define('toast-main', toast) 25 | 26 | document.body.innerHTML = ` 27 | 30 |
31 |
32 |
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 | ` 57 | 58 | loadBackground() 59 | -------------------------------------------------------------------------------- /newPage/components/infoBar/infoBar.js: -------------------------------------------------------------------------------- 1 | import isMobile from "../../util/isMobile.js"; 2 | 3 | export default class infoBar extends HTMLElement { 4 | constructor() { 5 | super() 6 | this.render() 7 | } 8 | render() { 9 | this.className = 'bar' 10 | this.id = 'infoBar' 11 | this.innerHTML = ` 12 |
13 |
14 | 15 |
16 |
17 |
18 |
关于 uyou 新标签页
19 | 20 |
21 | 在这个新标签页扩展的开源链接上我会提供非稳定版的更新，如果想要提前尝试新功能可以去这个项目上下载源码自行安装 22 |
23 |
24 |
这个新标签页扩展来自于我的另一个前端项目，这个项目的开源地址为：
25 | 点击前往 26 |
如果你感兴趣可以去这个项目上给我一个 star，此标签页扩展的开源地址为：
27 | 点击前往 28 |
29 |
30 |
我的 GitHub 地址：
31 | 点击前往 32 |
我的 酷安 账号：
33 | 34 | 点击前往 35 |
欢迎加群讨论：
36 | 37 | 点击前往 38 |
39 |
40 | ` 41 | document.getElementById('info').addEventListener('click', () => { 42 | if (isMobile()) { 43 | document.getElementById('infoBar').className = 'barSelMobile'; 44 | document.getElementById('infoimgbefore').className = 'infoimgafter'; 45 | } else { 46 | document.getElementById('infoBar').className = 'barSel'; 47 | document.getElementById('infoimgbefore').className = 'infoimgafter'; 48 | } 49 | document.getElementById('click').addEventListener('click', () => { 50 | document.getElementById('infoBar').className = 'bar'; 51 | document.getElementById('infoimgbefore').className = 'infoimgbefore'; 52 | }) 53 | }) 54 | document.getElementById('infoBack').addEventListener('click', () => { 55 | document.getElementById('infoBar').className = 'bar'; 56 | document.getElementById('infoimgbefore').className = 'infoimgbefore'; 57 | }) 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /newPage/components/mainArea/index.js: -------------------------------------------------------------------------------- 1 | import searchBar from "./searchBar/searchBar.js"; 2 | import moreSearch from "./moreSearch/index.js" 3 | import links from "./links.js"; 4 | 5 | export default class mainArea extends HTMLElement { 6 | constructor() { 7 | super() 8 | customElements.define('search-bar', searchBar) 9 | customElements.define('more-search', moreSearch) 10 | customElements.define('main-link', links) 11 | this.render() 12 | } 13 | render() { 14 | this.className = 'main' 15 | this.id = 'main' 16 | this.innerHTML = ` 17 | 18 | 19 | 20 | ` 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /newPage/components/mainArea/links.js: -------------------------------------------------------------------------------- 1 | export default class links extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.className = 'link' 8 | this.id = 'mainlink' 9 | this.innerHTML = ` 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ` 21 | } 22 | } -------------------------------------------------------------------------------- /newPage/components/mainArea/moreSearch/index.js: -------------------------------------------------------------------------------- 1 | import engines, { changeImg } from "./list.js"; 2 | 3 | export default class moreSearch extends HTMLElement { 4 | constructor() { 5 | super() 6 | this.render() 7 | } 8 | render() { 9 | this.className = 'moreSearch' 10 | this.id = 'moreSearch' 11 | this.style.opacity = '0.0' 12 | this.innerHTML = ` 13 |
14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 |
22 | ` 23 | engines.forEach(item => { 24 | document.getElementById(item.name).addEventListener('click', () => { 25 | chrome.storage.sync.set({ 'search': item.name }); 26 | changeImg(item.img) 27 | }) 28 | }) 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /newPage/components/mainArea/moreSearch/list.js: -------------------------------------------------------------------------------- 1 | export function changeImg (img) { 2 | document.getElementById('moreSearch').style = ` 3 | opacity: 0.0; 4 | transform: ; 5 | z-index: 3; 6 | ` 7 | document.getElementById('searchEngine').src = img 8 | } 9 | 10 | export default [ 11 | { 12 | name: 'google', 13 | img: 'imgs/google.png' 14 | }, 15 | { 16 | name: 'bing', 17 | img: 'imgs/bing-logo.png' 18 | }, 19 | { 20 | name: 'baidu', 21 | img: 'imgs/baidu.png' 22 | }, 23 | { 24 | name: 'ddg', 25 | img: 'imgs/ddg.svg' 26 | }, 27 | { 28 | name: 'yandex', 29 | img: 'imgs/yandex.png' 30 | }, 31 | { 32 | name: 'sougou', 33 | img: 'imgs/sougou.png' 34 | }, 35 | { 36 | name: 'cus', 37 | img: 'imgs/search.png' 38 | } 39 | ] 40 | -------------------------------------------------------------------------------- /newPage/components/mainArea/searchBar/searchBar.js: -------------------------------------------------------------------------------- 1 | import isMobile from '../../../util/isMobile.js' 2 | 3 | export default class searchBar extends HTMLElement { 4 | constructor() { 5 | super() 6 | this._data = { 7 | hide: true 8 | } 9 | this.render() 10 | this.init() 11 | chrome.storage.sync.get(['cusSea'], (budget) => { 12 | let cusSea = budget.cusSea 13 | if (typeof cusSea === 'undefined') { 14 | cusSea = '' 15 | } 16 | if (cusSea !== '') { 17 | this.search(cusSea) 18 | document.getElementById('cusSeaIn').value = cusSea 19 | } else { 20 | this.search() 21 | } 22 | }) 23 | } 24 | render() { 25 | this.className = 'searchbar' 26 | this.id = 'searchbar' 27 | this.style.display = 'none' 28 | this.innerHTML = ` 29 | 30 | 31 | 32 |
搜索
33 | ` 34 | document.getElementById('searchEngine').addEventListener('click', () => { 35 | this.hide() 36 | this._data.hide = !this._data.hide 37 | }) 38 | } 39 | init() { 40 | if (!isMobile()) { 41 | document.getElementById('keywords').addEventListener("keyup", () => { 42 | if (document.getElementById('keywords').value) { 43 | document.getElementById('searchBtn').style = ` 44 | width: 45px; 45 | color: ; 46 | ` 47 | document.getElementsByClassName('keywordsRight')[0].style = `display: ;` 48 | } else { 49 | document.getElementById('searchBtn').style = ` 50 | width: ; 51 | color: transparent; 52 | ` 53 | document.getElementsByClassName('keywordsRight')[0].style = `display: none;` 54 | } 55 | }) 56 | } 57 | chrome.storage.sync.get(['search'], (budget) => { 58 | if (budget.search == 'google') { 59 | document.getElementById('searchEngine').hidden = false; 60 | document.getElementById('searchEngine').src = 'imgs/google.png';// change search engine image to google 61 | } else if (budget.search == 'bing') { 62 | document.getElementById('searchEngine').hidden = false; 63 | document.getElementById('searchEngine').src = 'imgs/bing-logo.png';// change search engine image to bing 64 | } else if (budget.search == 'ddg') { 65 | document.getElementById('searchEngine').hidden = false; 66 | document.getElementById('searchEngine').src = 'imgs/ddg.svg'; 67 | } else if (budget.search == 'yandex') { 68 | document.getElementById('searchEngine').hidden = false; 69 | document.getElementById('searchEngine').src = 'imgs/yandex.png'; 70 | } else if (budget.search == 'sougou') { 71 | document.getElementById('searchEngine').hidden = false; 72 | document.getElementById('searchEngine').src = 'imgs/sougou.png'; 73 | } else if (budget.search == 'cus') { 74 | document.getElementById('searchEngine').hidden = false; 75 | document.getElementById('searchEngine').src = 'imgs/search.png'; 76 | } else { 77 | document.getElementById('searchEngine').hidden = false; 78 | document.getElementById('searchEngine').src = 'imgs/baidu.png';//change search engine image to baidu 79 | } 80 | }) 81 | } 82 | search(cusSea) { 83 | document.getElementById('keywords').addEventListener('keydown', (event) => { 84 | let s = document.getElementById('searchEngine').src 85 | let engine = s.substring(s.lastIndexOf("/") + 1) 86 | if (event.key === 'Enter') { 87 | this.sea(cusSea, engine) 88 | } 89 | document.getElementById('searchBtn').addEventListener('click', () => { 90 | this.sea(cusSea, engine) 91 | }) 92 | }) 93 | } 94 | sea(cus, engine) { 95 | let keywords = document.getElementById('keywords').value; //get keywords 96 | if (engine == 'google.png') { 97 | window.open('https://www.google.com/search?q=' + keywords, '_self'); //if engine is google google to google search 98 | } else if (engine == 'baidu.png') { 99 | window.open('https://www.baidu.com/s?wd=' + keywords, '_self'); //if engine is baidu to baidu search 100 | } else if (engine == 'bing-logo.png') { 101 | window.open('https://cn.bing.com/search?q=' + keywords, '_self'); //if engine is bing to bing search 102 | } else if (engine == 'ddg.svg') { 103 | window.open('https://duckduckgo.com/?q=' + keywords, '_self'); 104 | } else if (engine == 'yandex.png') { 105 | window.open('https://yandex.com/search/?text=' + keywords, '_self'); 106 | } else if (engine == 'sougou.png') { 107 | window.open('https://www.sogou.com/web?query=' + keywords, '_self'); 108 | } 109 | if (cus != undefined && engine == 'search.png') { 110 | window.open(cus + keywords, '_self'); 111 | } 112 | if (!cus && engine == 'search.png') { 113 | document.getElementById('keywords').value = '未设置自定义的搜索引擎' 114 | setTimeout(() => { 115 | document.getElementById('keywords').value = '' 116 | }, 1000) 117 | } 118 | } 119 | hide() { 120 | if (this._data.hide) { 121 | setTimeout(() => { 122 | document.getElementById('moreSearch').style.opacity = '1.0'; 123 | }, 100) 124 | document.getElementById('moreSearch').style = ` 125 | transform: translateY(100px); 126 | z-index: ; 127 | ` 128 | document.getElementById('click').addEventListener('click', () => { 129 | this._data.hide = !this._data.hide 130 | document.getElementById('moreSearch').style = ` 131 | opacity: 0.0; 132 | z-index: ; 133 | transform: ; 134 | ` 135 | }) 136 | } else { 137 | document.getElementById('moreSearch').style = ` 138 | opacity: 0.0; 139 | z-index: 3; 140 | transform: ; 141 | ` 142 | } 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /newPage/components/oneWindow/closeOneWindow.js: -------------------------------------------------------------------------------- 1 | import isMobile from "../../util/isMobile.js"; 2 | 3 | export default function () { 4 | document.getElementById('blackBack').style = ` 5 | z-index: -1; 6 | background-color: #00000010; 7 | ` 8 | if (isMobile()) { 9 | document.getElementById('oneMain').style = ` 10 | width: 0px; 11 | height: 0px; 12 | padding: 0px; 13 | margin-bottom: 20vh; 14 | ` 15 | document.getElementById('oneMain').className = 'oneMainBeforeMobile' 16 | } else { 17 | document.getElementById('oneMain').className = 'oneMainBefore' 18 | } 19 | document.getElementById('closeButton').style = ` 20 | width: 0px; 21 | height: 0px; 22 | padding: 0px; 23 | ` 24 | document.getElementById('oneNum').style.fontSize = '0px' 25 | document.getElementById('oneTxt').style.fontSize = '0px' 26 | document.getElementById('oneFrom').style.fontSize = '0px' 27 | document.getElementById('oneNum').style.transition = '0s' 28 | document.getElementById('oneTxt').style.transition = '0s' 29 | document.getElementById('oneFrom').style.transition = '0s' 30 | setTimeout(() => { 31 | document.getElementById('oneNum').style.color = 'transparent' 32 | document.getElementById('oneTxt').style.color = 'transparent' 33 | document.getElementById('oneFrom').style.color = 'transparent' 34 | }, 502) 35 | setTimeout(() => { 36 | document.getElementById('oneNum').style.transition = '0.5s' 37 | document.getElementById('oneTxt').style.transition = '0.5s' 38 | document.getElementById('oneFrom').style.transition = '0.5s' 39 | }, 1000) 40 | } 41 | -------------------------------------------------------------------------------- /newPage/components/oneWindow/index.js: -------------------------------------------------------------------------------- 1 | import oneDataGet from "./oneDataGet.js"; 2 | import openOneWindow from "./openOneWindow.js"; 3 | import closeOneWindow from "./closeOneWindow.js"; 4 | 5 | export default class oneWindow extends HTMLElement { 6 | constructor() { 7 | super() 8 | this.render() 9 | oneDataGet() 10 | openOneWindow() 11 | } 12 | render() { 13 | this.className = 'oneMainBefore' 14 | this.id = 'oneMain' 15 | this.innerHTML = ` 16 |
17 |
18 |
19 |
20 |
21 |
22 | ` 23 | document.getElementById('closeButton').addEventListener('click', () => { 24 | closeOneWindow() 25 | }) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /newPage/components/oneWindow/oneDataGet.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | const httpRequest = new XMLHttpRequest(); 3 | httpRequest.open('GET', 'https://v1.hitokoto.cn/', true); 4 | httpRequest.send(); 5 | 6 | httpRequest.onreadystatechange = () => { 7 | if (httpRequest.readyState == 4 && httpRequest.status == 200) { 8 | var obj = JSON.parse(httpRequest.responseText); 9 | 10 | document.getElementById('button').innerHTML = obj.hitokoto; 11 | document.getElementById('oneNum').innerHTML = '#' + obj.id; 12 | document.getElementById('oneTxt').innerHTML = obj.hitokoto; 13 | document.getElementById('oneFrom').innerHTML = '————' + obj.from; 14 | } 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /newPage/components/oneWindow/openOneWindow.js: -------------------------------------------------------------------------------- 1 | import isMobile from "../../util/isMobile.js"; 2 | import closeOneWindow from "./closeOneWindow.js"; 3 | 4 | export default function () { 5 | const screenHeight = document.documentElement.clientHeight 6 | document.getElementById('button').addEventListener('click', () => { 7 | document.getElementById('blackBack').style = ` 8 | z-index: 150; 9 | background-color: #00000050; 10 | ` 11 | document.getElementById('oneMain').style.display = '' 12 | document.getElementById('oneMain').className = 'oneMain' 13 | document.getElementById('closeButton').style = ` 14 | width: 14px; 15 | height: 14px; 16 | padding: 8px; 17 | ` 18 | if (isMobile()) { 19 | document.getElementById('oneNum').style.fontSize = '20px' 20 | document.getElementById('oneTxt').style.fontSize = '30px' 21 | document.getElementById('oneFrom').style.fontSize = '25px' 22 | document.getElementById('oneMain').style = ` 23 | width: 270px; 24 | height: 400px; 25 | padding: 40px; 26 | bottom: 0; 27 | margin-bottom: ${(screenHeight - 480) / 2}px 28 | ` 29 | } else { 30 | document.getElementById('oneNum').style.fontSize = '25px' 31 | document.getElementById('oneTxt').style.fontSize = '40px' 32 | document.getElementById('oneFrom').style.fontSize = '30px' 33 | } 34 | chrome.storage.sync.get(['dlMode'], (budget) => { 35 | let dlMode = budget.dlMode 36 | if (typeof dlMode === 'undefined') { 37 | dlMode = '' 38 | } 39 | if (dlMode === '') { 40 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 41 | document.getElementById('oneNum').style.color = '#999' 42 | document.getElementById('oneTxt').style.color = '#999' 43 | document.getElementById('oneFrom').style.color = '#999' 44 | } else { 45 | document.getElementById('oneNum').style.color = 'black' 46 | document.getElementById('oneTxt').style.color = 'black' 47 | document.getElementById('oneFrom').style.color = 'black' 48 | } 49 | } else if (dlMode == 'dark') { 50 | document.getElementById('oneNum').style.color = '#999' 51 | document.getElementById('oneTxt').style.color = '#999' 52 | document.getElementById('oneFrom').style.color = '#999' 53 | } else if (dlMode == 'light') { 54 | document.getElementById('oneNum').style.color = 'black' 55 | document.getElementById('oneTxt').style.color = 'black' 56 | document.getElementById('oneFrom').style.color = 'black' 57 | } 58 | }) 59 | document.getElementById('oneNum').style.transition = '0.5s' 60 | document.getElementById('oneTxt').style.transition = '0.5s' 61 | document.getElementById('oneFrom').style.transition = '0.5s' 62 | document.getElementById('blackBack').addEventListener('click', () => { 63 | closeOneWindow() 64 | }) 65 | }) 66 | } 67 | -------------------------------------------------------------------------------- /newPage/components/settingMain/backMenu.js: -------------------------------------------------------------------------------- 1 | export default class backMenu extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'backSettingMenus' 8 | this.style = 'display: none;' 9 | this.innerHTML = ` 10 |
11 | 12 |
13 |
14 | ` 15 | } 16 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/closeSettingWindow.js: -------------------------------------------------------------------------------- 1 | import isMobile from "../../util/isMobile.js"; 2 | 3 | export default function () { 4 | document.getElementById('settingMain').style.transition = '0.5s' 5 | document.getElementById('settingMain').className = 'settingMainBefore' 6 | document.getElementById('settingCloseButton').style.display = 'none' 7 | document.getElementById('backSettingMenu').style.display = 'none' 8 | document.getElementById('settingInnerMain').style.display = 'none' 9 | document.getElementById('settingMenu').style.display = 'none' 10 | document.getElementById('blackBack').style = ` 11 | z-index: -1; 12 | background-color: #00000010; 13 | ` 14 | document.getElementById('viewImg').style.display = 'none' 15 | document.getElementById('fileName').innerText = '选择你的图片' 16 | document.getElementById('backgroundSetButton').hidden = true 17 | document.getElementById('onlinePicUrl').value = '' 18 | document.getElementById('picError').hidden = true 19 | document.getElementById('exImg').style.display = 'none' 20 | if (isMobile()) { 21 | document.getElementById('backSettingMenus').style.display = 'none' 22 | document.getElementById('settingMenu').style.display = 'none' 23 | document.getElementById('settingMain').style = ` 24 | width: 0px; 25 | height: 0px; 26 | padding: 0px; 27 | ` 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /newPage/components/settingMain/index.js: -------------------------------------------------------------------------------- 1 | import backMenu from "./backMenu.js" 2 | import settingInnerMain from "./settingInnerMain/index.js" 3 | import settingMenu from "./settingMenu/index.js" 4 | import closeSettingWindow from "./closeSettingWindow.js"; 5 | 6 | export default class settingMain extends HTMLElement { 7 | constructor() { 8 | super() 9 | customElements.define('back-menu', backMenu) 10 | customElements.define('setting-menu', settingMenu) 11 | customElements.define('setting-inner-main', settingInnerMain) 12 | this.render() 13 | this.init() 14 | } 15 | render() { 16 | this.className = 'settingMainBefore' 17 | this.id = 'settingMain' 18 | this.innerHTML = ` 19 | 20 | 23 | 24 | 25 | ` 26 | } 27 | init() { 28 | document.getElementById('settingCloseButton').addEventListener("click", () => { 29 | this.closeSettingMain() 30 | }) 31 | } 32 | closeSettingMain() { 33 | closeSettingWindow() 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/backgroundMain/apiImgs.js: -------------------------------------------------------------------------------- 1 | export default class apiimgs extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'apiImg' 8 | this.innerHTML = ` 9 |
自动切换图片
10 |
11 |
Bing 每日一图
12 |
东方 Project
13 |
14 | 18 |
19 | 20 |
确定
21 |
22 | ` 23 | } 24 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/backgroundMain/exImgs.js: -------------------------------------------------------------------------------- 1 | export default class exImgs extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'exImg' 8 | this.innerHTML = ` 9 |
本地图片
10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 25 | ` 26 | } 27 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/backgroundMain/imgChange.js: -------------------------------------------------------------------------------- 1 | export function loaclImgChange() { 2 | for (let i = 0; i <= 5; i++) { 3 | document.getElementById(`background${i}`).addEventListener("click", () => { 4 | chrome.storage.local.set({ 'picUrl': `'imgs/background - ${i}.jpg'` }) 5 | document.getElementById('background').style.backgroundImage = `url("imgs/background - ${i}.jpg")` 6 | }) 7 | } 8 | for (let i = 1; i <= 5; i++) { 9 | document.getElementById(`mbackground${i}`).addEventListener("click", () => { 10 | chrome.storage.local.set({ 'picUrl': `'imgs/mobile/background - ${i}.jpg'` }) 11 | document.getElementById('background').style.backgroundImage = `url("imgs/background - ${i}.jpg")` 12 | }) 13 | } 14 | } 15 | 16 | export function apiImg() { 17 | document.getElementById('bingImg').addEventListener("click", () => { 18 | chrome.storage.local.set({ 'picUrl': "https://api.dujin.org/bing/1920.php" }) 19 | document.getElementById('background').style.backgroundImage = 'url("https://api.dujin.org/bing/1920.php")' 20 | }) 21 | document.getElementById('cwImg').addEventListener("click", () => { 22 | chrome.storage.local.set({ 'picUrl': "https://img.paulzzh.com/touhou/random" }) 23 | document.getElementById('background').style.backgroundImage = 'url("https://img.paulzzh.com/touhou/random")' 24 | }) 25 | document.getElementById('bingImgMobile').addEventListener("click", () => { 26 | chrome.storage.local.set({ 'picUrl': "https://api.dujin.org/bing/m.php" }) 27 | document.getElementById('background').style.backgroundImage = 'url("https://api.dujin.org/bing/m.php")' 28 | }) 29 | document.getElementById('cwImgMobile').addEventListener("click", () => { 30 | chrome.storage.local.set({ 'picUrl': "https://img.paulzzh.com/touhou/random?size=wap" }) 31 | document.getElementById('background').style.backgroundImage = 'url("https://img.paulzzh.com/touhou/random?size=wap")' 32 | }) 33 | document.getElementById('cusImgApi').addEventListener("click", () => { 34 | const pic = document.getElementById('cusApiPic').value 35 | chrome.storage.local.set({ 'picUrl': pic }) 36 | document.getElementById('background').style.backgroundImage = 'url("https://img.paulzzh.com/touhou/random?size=wap")' 37 | }) 38 | } 39 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/backgroundMain/index.js: -------------------------------------------------------------------------------- 1 | import apiImgs from './apiImgs.js' 2 | import exImgs from './exImgs.js' 3 | import {apiImg, loaclImgChange} from "./imgChange.js"; 4 | import isMobile from "../../../../util/isMobile.js"; 5 | 6 | export default class backgroundMain extends HTMLElement { 7 | constructor() { 8 | super() 9 | customElements.define('api-imgs', apiImgs) 10 | customElements.define('ex-imgs', exImgs) 11 | this.render() 12 | this.init() 13 | } 14 | render() { 15 | this.id = 'backgroundSetting' 16 | this.className = 'settingInnerTitle' 17 | this.innerHTML = ` 18 |
19 | 背景设置 20 |
21 |
选择图片
22 |
23 |
选择你的图片
24 | 25 |
26 |
在线图片
27 |
28 | 29 |
预览
30 |
31 |
32 | 33 | 34 | 35 |
36 | 37 |
恢复默认
38 |
39 | ` 40 | } 41 | init() { 42 | loaclImgChange() 43 | apiImg() 44 | document.getElementById('backgroundUpload').onchange = function () { 45 | let file = this.files[0] 46 | let reader = new FileReader 47 | document.getElementById('exImg').style.display = 'none' 48 | reader.readAsDataURL(file) 49 | reader.onload = function (e) { 50 | document.getElementById('backgroundSetButton').hidden = false 51 | document.getElementById('viewImg').style.display = '' 52 | document.getElementById('viewImg').hidden = false 53 | document.getElementById('viewImg').src = e.target.result 54 | if (isMobile()) { 55 | document.getElementById('viewImg').style.maxWidth = '130px' 56 | } 57 | document.getElementById('fileName').innerText = file.name 58 | const picUrl = e.target.result 59 | document.getElementById('backgroundSetButton').addEventListener("click", () => { 60 | chrome.storage.local.set({ 'picUrl': picUrl }) 61 | location.reload() 62 | }) 63 | } 64 | } 65 | document.getElementById('backgroundBefore').addEventListener("click", () =>{ 66 | chrome.storage.local.set({ 'picUrl': '' }) 67 | location.reload() 68 | }) 69 | document.getElementById('review').addEventListener("click", () => { 70 | document.getElementById('viewImg').src = document.getElementById('onlinePicUrl').value 71 | document.getElementById('viewImg').addEventListener('error', () =>{ 72 | document.getElementById('picError').innerText = '请输入正确的图片链接' 73 | document.getElementById('picError').hidden = false 74 | }) 75 | document.getElementById('viewImg').addEventListener('load', () => { 76 | document.getElementById('exImg').style.display = 'none' 77 | document.getElementById('picError').hidden = true 78 | document.getElementById('viewImg').style.display = '' 79 | document.getElementById('viewImg').hidden = false 80 | document.getElementById('backgroundSetButton').hidden = false 81 | }) 82 | document.getElementById('backgroundSetButton').addEventListener("click", () => { 83 | chrome.storage.local.set({ 'picUrl': document.getElementById('onlinePicUrl').value }) 84 | location.reload() 85 | }) 86 | }) 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/donateMain/donateMain.js: -------------------------------------------------------------------------------- 1 | export default class donateMain extends HTMLElement { 2 | constructor() { 3 | super() 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'donateMain' 8 | this.className = 'otherInfo' 9 | this.style = 'display: none;' 10 | this.innerHTML = ` 11 |
12 |
捐赠
13 |
14 |
15 |
如果你觉得这个项目帮到你的话可以请我喝杯咖啡吗？
16 |
17 | 18 | 19 | 20 |
21 |
22 | ` 23 | } 24 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/featuresSetting/index.js: -------------------------------------------------------------------------------- 1 | import list from './list.js' 2 | import {hsFeature} from "../../../../js/features/hsFeature.js"; 3 | 4 | export default class festuresSetting extends HTMLElement { 5 | constructor() { 6 | super() 7 | this._data = { 8 | list 9 | } 10 | this.render() 11 | this.init() 12 | } 13 | render() { 14 | this.id = 'festuresSetting' 15 | this.className = 'settingInnerTitle' 16 | this.style = 'display: none;' 17 | this.innerHTML = ` 18 |
19 | 功能设置 20 |
21 |
设置隐藏/显示功能按钮
22 |
23 | ${this._data.list.map(item => { 24 | return ` 25 |
26 |
27 |
28 |
${item.name}
29 |
30 |
显示
31 |
32 | ` 33 | }).join('')} 34 |
35 |
一言
36 |
显示
37 |
38 |
39 | ` 40 | } 41 | init() { 42 | hsFeature() 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/featuresSetting/list.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: '隐藏全部', 4 | img: 'imgs/hide.png', 5 | funId: 'hideHS' 6 | }, 7 | { 8 | name: '历史记录', 9 | img: 'imgs/fy_ic_history.png', 10 | funId: 'historyHS' 11 | }, 12 | { 13 | name: '刷新', 14 | img: 'imgs/reload.png', 15 | funId: 'reloadHS' 16 | }, 17 | { 18 | name: '计算器', 19 | img: 'imgs/calculator.png', 20 | funId: 'calHS' 21 | }, 22 | { 23 | name: '时钟', 24 | img: 'imgs/timer.png', 25 | funId: 'timeHS' 26 | }, 27 | { 28 | name: '天气', 29 | img: 'imgs/weather/01.png', 30 | funId: 'weatherHS' 31 | }, 32 | { 33 | name: '下载背景', 34 | img: 'imgs/down.png', 35 | funId: 'downHS' 36 | }, 37 | { 38 | name: '关于', 39 | img: 'imgs/info.png', 40 | funId: 'infoHS' 41 | } 42 | ] -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/helpMain/helpMain.js: -------------------------------------------------------------------------------- 1 | import list from './list.js' 2 | 3 | export default class helpMain extends HTMLElement { 4 | constructor() { 5 | super() 6 | this._data = { 7 | list 8 | } 9 | this.render() 10 | } 11 | render() { 12 | this.id = 'helpMain' 13 | this.className = 'otherInfo' 14 | this.style = 'display: none;' 15 | this.innerHTML = ` 16 |
17 |
帮助 Q&A
18 |
19 |
20 | ${this._data.list.map(item => { 21 | return ` 22 |
23 |
${item.helpQ}
24 |
${item.helpA}
25 |
26 | ` 27 | }).join('')} 28 |
29 | ` 30 | } 31 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/helpMain/list.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | helpQ: 'Q：如何切换搜索引擎？', 4 | helpA: 'A：点击搜索框最左边的的搜索引擎图标可以更换搜索引擎，默认包括：Google、bing、百度，也可在设置中添加其他搜索引擎使用。' 5 | }, 6 | { 7 | helpQ: 'Q：显示“在线图片加载失败，已加载内建图片”是什么原因？', 8 | helpA: 'A：因为您的网络可能未能及时获取到背景图片的链接，刷新一下可以尝试重新获取。' 9 | }, 10 | { 11 | helpQ: 'Q：书签自定义链接无效是什么原因？', 12 | helpA: 'A：请以 “http://” 或 “https://” 为开头设置连接，其他形式的连接无效。' 13 | }, 14 | { 15 | helpQ: 'Q：如何恢复原书签位的书签？', 16 | helpA: 'A：以空白为连接设置即可恢复原书签位书签。' 17 | } 18 | ] -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/index.js: -------------------------------------------------------------------------------- 1 | import backgroundMain from "./backgroundMain/index.js" 2 | import donateMain from "./donateMain/donateMain.js" 3 | import festuresSetting from "./featuresSetting/index.js" 4 | import helpMain from "./helpMain/helpMain.js" 5 | import linkSetting from "./linkSetting/index.js" 6 | import otherSetting from "./otherSetting/index.js" 7 | import searchSetting from "./searchSetting/index.js" 8 | 9 | export default class settingInnerMain extends HTMLElement { 10 | constructor() { 11 | super() 12 | customElements.define('background-main', backgroundMain) 13 | customElements.define('features-setting', festuresSetting) 14 | customElements.define('link-setting', linkSetting) 15 | customElements.define('search-setting', searchSetting) 16 | customElements.define('other-setting', otherSetting) 17 | customElements.define('help-main', helpMain) 18 | customElements.define('donate-main', donateMain) 19 | this.render() 20 | } 21 | render() { 22 | this.id = 'settingInnerMain' 23 | this.style = 'display: none;' 24 | this.innerHTML = ` 25 |
26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | ` 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/linkSetting/index.js: -------------------------------------------------------------------------------- 1 | import list from "./list.js" 2 | 3 | export default class linkSetting extends HTMLElement { 4 | constructor() { 5 | super() 6 | this._data = { 7 | list 8 | } 9 | this.render() 10 | this.init() 11 | } 12 | render() { 13 | this.id = 'linkSetting' 14 | this.className = 'settingInnerTitle' 15 | this.style = 'display: none;' 16 | this.innerHTML = ` 17 |
18 | 书签设置 19 |
20 |
设置书签的显示/隐藏，以及自定义书签
21 |
22 | ${this._data.list.map((item, index) => { 23 | return ` 24 |
25 |
26 | 27 |
28 |
自定义
29 |
显示
30 |
31 | ` 32 | }).join('')} 33 |
34 | ` 35 | } 36 | init() { 37 | for (let i = 1; i <= 10; i++) { 38 | document.getElementById(`link${i}HS`).addEventListener("click", () => { 39 | if (document.getElementById(`link${i}HS`).className === 'hsFeature') { 40 | chrome.storage.local.set({ [`link${i}HS`]: 'hide' }); 41 | document.getElementById(`link${i}HS`).className = 'hsFeatureHide' 42 | document.getElementById(`link${i}HS`).innerText = '隐藏' 43 | document.getElementById(`link${i}`).style.display = 'none' 44 | } else { 45 | chrome.storage.local.set({ [`link${i}HS`]: 'show' }); 46 | document.getElementById(`link${i}HS`).className = 'hsFeature' 47 | document.getElementById(`link${i}HS`).innerText = '显示' 48 | document.getElementById(`link${i}`).style.display = '' 49 | } 50 | }) 51 | document.getElementById(`link${i}CH`).addEventListener("click", () => { 52 | this.linkChange() 53 | document.getElementById('linkNum').className = `link${i}` 54 | }) 55 | } 56 | } 57 | linkChange() { 58 | document.getElementById('changeLink').style.display = ''; 59 | document.getElementById('blackBack').style.zIndex = '201'; 60 | document.getElementById('blackBack').style.backgroundColor = '#00000050'; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/linkSetting/list.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | img: 'imgs/google.png', 4 | style: '' 5 | }, 6 | { 7 | img: 'imgs/youtube.png', 8 | style: '' 9 | }, 10 | { 11 | img: 'imgs/bing-logo.png', 12 | style: 'padding: 15px; width: 70px; height: 70px;' 13 | }, 14 | { 15 | img: 'imgs/baidu.png', 16 | style: 'padding: 20px; height: 60px; width: 60px;' 17 | }, 18 | { 19 | img: 'imgs/icon_bilibili-circle.png', 20 | style :'padding: 15px; width: 70px; height: 70px;' 21 | }, 22 | { 23 | img: 'imgs/IThome.png', 24 | style :'padding: 10px; width: 80px; height: 80px;' 25 | }, 26 | { 27 | img: 'imgs/Chrome_Web_Store_logo_2012-2015.svg.png', 28 | style: '' 29 | }, 30 | { 31 | img: 'imgs/aliyun.png', 32 | style: 'padding: 20px; height: 60px; width: 60px;' 33 | }, 34 | { 35 | img: 'imgs/azure-blue.png', 36 | style :'' 37 | }, 38 | { 39 | img: 'imgs/GitHub.png', 40 | style: '' 41 | } 42 | ] -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/otherSetting/index.js: -------------------------------------------------------------------------------- 1 | import loadAn from "./loadAn.js"; 2 | 3 | export default class otherSetting extends HTMLElement { 4 | constructor() { 5 | super() 6 | this.render() 7 | this.init() 8 | } 9 | render() { 10 | this.id = 'otherSetting' 11 | this.className = 'settingInnerTitle' 12 | this.style = 'display: none;' 13 | this.innerHTML = ` 14 |
15 | 其他设置 16 |
17 |
18 |
加载动画
19 |
隐藏
20 |
21 | 32 |
33 |
颜色模式
34 |
35 |
跟随系统
36 |
亮色
37 |
38 |
39 | 50 | ` 51 | } 52 | init() { 53 | loadAn() 54 | document.getElementById('setLoadingTime').addEventListener("click", () => { 55 | const loadingTime = document.getElementById('loadingTimeNum').value 56 | document.getElementById('newTimeout').innerText = loadingTime 57 | chrome.storage.local.set({ 'loadingTime': loadingTime }) 58 | }) 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/otherSetting/loadAn.js: -------------------------------------------------------------------------------- 1 | export default function () { 2 | document.getElementById('loadingAn').addEventListener("click", () => { 3 | if (document.getElementById('loadingAn').className == 'otherFeaturesBefore') { 4 | show() 5 | } else { 6 | hide() 7 | } 8 | }) 9 | } 10 | 11 | function show() { 12 | document.getElementById('loadingAn').className = 'otherFeatures' 13 | document.getElementById('loadingAn').innerText = '显示' 14 | document.getElementById('loadingTimeBtn').style.display = '' 15 | document.getElementsByClassName('otherBtn')[1].style = ` 16 | border-radius: 10px 10px 0px 0px; 17 | border-bottom: 1px solid #00000020; 18 | ` 19 | chrome.storage.sync.get(['dlMode'], function (budget) { 20 | let dlMode = budget.dlMode; 21 | if (typeof (dlMode) == 'undefined') { 22 | dlMode = ''; 23 | } 24 | if (dlMode == '') { 25 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 26 | document.getElementsByClassName('otherBtn')[0].style.backgroundColor = '#44444490'; 27 | } else { 28 | document.getElementsByClassName('otherBtn')[0].style.backgroundColor = '#ffffff90'; 29 | } 30 | } else if (dlMode == 'dark') { 31 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#44444490'; 32 | } else if (dlMode == 'light') { 33 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#ffffff90'; 34 | } 35 | }) 36 | chrome.storage.local.set({ 'loadingAn': 'show' }) 37 | } 38 | 39 | function hide() { 40 | document.getElementById('loadingAn').className = 'otherFeaturesBefore' 41 | document.getElementById('loadingAn').innerText = '隐藏' 42 | document.getElementById('loadingTimeBtn').style.display = 'none' 43 | document.getElementsByClassName('otherBtn')[1].style = ` 44 | border-radius: 10px; 45 | border-bottom: none; 46 | ` 47 | chrome.storage.sync.get(['dlMode'], function (budget) { 48 | let dlMode = budget.dlMode; 49 | if (typeof (dlMode) == 'undefined') { 50 | dlMode = ''; 51 | } 52 | if (dlMode == '') { 53 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 54 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#44444450'; 55 | } else { 56 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#ffffff50'; 57 | } 58 | } else if (dlMode == 'dark') { 59 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#44444450'; 60 | } else if (dlMode == 'light') { 61 | document.getElementsByClassName('otherBtn')[1].style.backgroundColor = '#ffffff50'; 62 | } 63 | }) 64 | chrome.storage.local.set({ 'loadingAn': 'hide' }) 65 | } 66 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/searchSetting/index.js: -------------------------------------------------------------------------------- 1 | import list from "./list.js" 2 | 3 | export default class searchSetting extends HTMLElement { 4 | constructor() { 5 | super() 6 | this._data = { 7 | list 8 | } 9 | this.render() 10 | } 11 | render() { 12 | this.id = 'searchSetting' 13 | this.className = 'settingInnerTitle' 14 | this.style = 'display: none;' 15 | this.innerHTML = ` 16 |
17 | 搜索引擎 18 |
19 |
设置搜索引擎的显示/隐藏
20 |
21 |
搜索引擎显示
22 |
显示
23 |
24 |
25 |
26 |
27 | 28 |
29 |
自定义搜索引擎
30 |
31 |
禁用
32 |
33 | 37 | ${this._data.list.map((item, index) => { 38 | return ` 39 |
40 |
41 | 42 |
${item.name}
43 |
44 |
45 | ${index > 2 ? '隐藏' : '显示'} 46 |
47 |
48 | ` 49 | }).join('')} 50 | ` 51 | } 52 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingInnerMain/searchSetting/list.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | name: 'Google', 4 | img: 'imgs/google.png', 5 | funId: 'googleAn' 6 | }, 7 | { 8 | name: '必应', 9 | img: 'imgs/bing-logo.png', 10 | funId: 'bingAn' 11 | }, 12 | { 13 | name: '百度', 14 | img: 'imgs/baidu.png', 15 | funId: 'baiduAn' 16 | }, 17 | { 18 | name: 'Duckduckgo', 19 | img: 'imgs/ddg.svg', 20 | funId: 'ddgAn' 21 | }, 22 | { 23 | name: 'Yandex', 24 | img: 'imgs/yandex.png', 25 | funId: 'yandexAn' 26 | }, 27 | { 28 | name: '搜狗', 29 | img: 'imgs/sougou.png', 30 | funId: 'sougouAn' 31 | } 32 | ] -------------------------------------------------------------------------------- /newPage/components/settingMain/settingMenu/index.js: -------------------------------------------------------------------------------- 1 | import menu from "./menu.js" 2 | import isMobile from "../../../util/isMobile.js"; 3 | import {hideMenu, menuStyle, mobileUse} from "./menuClick.js"; 4 | 5 | export default class settingMenu extends HTMLElement { 6 | constructor() { 7 | super() 8 | this._data = menu 9 | this.render() 10 | this.init() 11 | } 12 | render() { 13 | this.id = 'settingMenu' 14 | this.style = 'display: none;' 15 | this.innerHTML = ` 16 |
设置
17 |
18 | ${this._data.menu1.map(item => { 19 | return `
20 | ${item.name} 21 |
` 22 | }).join('')} 23 |
24 |
25 | ${this._data.menu2.map(item => { 26 | return `
27 | ${item.name} 28 |
` 29 | }).join('')} 30 |
31 |
32 | ${this._data.menu3.map(item => { 33 | return `
34 | ${item.name} 35 |
` 36 | }).join('')} 37 |
38 | ` 39 | } 40 | init() { 41 | document.getElementById('backSettingMenu').addEventListener("click", () => { 42 | const settingMainWidth = document.getElementById('settingMain').offsetWidth 43 | document.getElementById('settingMenu').style.display = '' 44 | document.getElementById('settingInnerMain').style.display = 'none' 45 | document.getElementById('backSettingMenus').style.display = 'none' 46 | document.getElementById('settingMain').style = ` 47 | padding: 40px; 48 | width: ${settingMainWidth - 82}px; 49 | transition: padding 0s; 50 | ` 51 | }) 52 | const menuItems = [...this._data.menu1, ...this._data.menu2, ...this._data.menu3] 53 | menuItems.forEach((item, index) => { 54 | document.getElementById(item.id).addEventListener("click", () => { 55 | menuStyle() 56 | chrome.storage.sync.get(['dlMode'], budget => { 57 | let dlMode = budget.dlMode; 58 | if (typeof (dlMode) == 'undefined') { 59 | dlMode = ''; 60 | } 61 | if (dlMode === '') { 62 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 63 | document.getElementById(item.id).style.backgroundColor = '#44444470' 64 | } else { 65 | document.getElementById(item.id).style.backgroundColor = '#ffffff70' 66 | } 67 | } else if (dlMode === 'dark') { 68 | document.getElementById(item.id).style.backgroundColor = '#44444470' 69 | } else if (dlMode === 'light') { 70 | document.getElementById(item.id).style.backgroundColor = '#ffffff70' 71 | } 72 | hideMenu() 73 | let innerId = item.id.substring(0, item.id.length - 1) 74 | if (item.id === 'helpInfo') { 75 | innerId = 'helpMain' 76 | } else if (item.id === 'donateInfo') { 77 | innerId = 'donateMain' 78 | } 79 | document.getElementById(innerId).style.display = '' 80 | if (isMobile()) { 81 | mobileUse(index, item.name) 82 | if (item.id === 'backgroundSettings') { 83 | this.background() 84 | } else if (item.id === 'otherSettings') { 85 | this.other(150) 86 | } else if (item.id === 'donateInfo') { 87 | this.donate() 88 | } 89 | } else { 90 | if (item.id === 'otherSettings') { 91 | this.other(140) 92 | } 93 | } 94 | }) 95 | }) 96 | }) 97 | } 98 | background() { 99 | const settingWidth = document.getElementById('settingMain').offsetWidth 100 | document.getElementById('mbackground1').style.width = `${settingWidth / 3 - 20}px` 101 | document.getElementById('mbackground2').style.width = `${settingWidth / 3 - 21}px` 102 | document.getElementById('mbackground3').style.width = `${settingWidth / 3 - 21}px` 103 | document.getElementById('mbackground3').style.marginRight = '0px' 104 | document.getElementById('mbackground4').style.width = `${settingWidth / 3 - 20}px` 105 | document.getElementById('mbackground5').style.width = `${settingWidth / 3 - 21}px` 106 | document.getElementById('uploadBtn').style.width = `${settingWidth - 62}px` 107 | document.getElementById('onlinePicUrl').style.width = `${settingWidth - 97}px` 108 | document.getElementById('review').style.width = '70px' 109 | document.getElementsByClassName('apiImgButton')[2].style.width = `${settingWidth / 2 - 46.5}px` 110 | document.getElementsByClassName('apiImgButton')[3].style.width = `${settingWidth / 2 - 46.5}px` 111 | document.getElementById('cusApiPic').style.width = `${settingWidth - 160}px` 112 | } 113 | other(num) { 114 | const otherBtnWidth = document.getElementsByClassName('otherBtn')[0].offsetWidth 115 | const msWidth = document.getElementsByClassName('ms')[0].offsetWidth 116 | document.getElementById('loadingTimeNum').style.width = `${otherBtnWidth - num - msWidth}px` 117 | } 118 | donate() { 119 | const settingWidth = document.getElementById('settingMain').offsetWidth 120 | document.getElementsByClassName('dotImg')[1].style = ` 121 | margin-right: 0px; 122 | max-width: ${settingWidth / 2 - 26.5}px 123 | ` 124 | document.getElementsByClassName('dotImg')[0].style.maxWidth = `${settingWidth / 2 - 26.5}px` 125 | document.getElementsByClassName('dotImg')[2].style.maxWidth = `${settingWidth / 2 - 26.5}px` 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /newPage/components/settingMain/settingMenu/menu.js: -------------------------------------------------------------------------------- 1 | export default { 2 | menu1: [{ 3 | name: '背景', 4 | id: 'backgroundSettings' 5 | }, 6 | { 7 | name: '功能', 8 | id: 'festuresSettings' 9 | }, 10 | { 11 | name: '书签', 12 | id: 'linkSettings' 13 | }, 14 | { 15 | name: '搜索引擎', 16 | id: 'searchSettings' 17 | }], 18 | menu2: [{ 19 | name: '其他设置', 20 | id: 'otherSettings' 21 | }], 22 | menu3: [{ 23 | name: '帮助 Q&A', 24 | id: 'helpInfo' 25 | }, 26 | { 27 | name: '捐赠', 28 | id: 'donateInfo' 29 | }] 30 | } -------------------------------------------------------------------------------- /newPage/components/settingMain/settingMenu/menuClick.js: -------------------------------------------------------------------------------- 1 | export function menuStyle() { 2 | document.getElementById('backgroundSettings').style.backgroundColor = 'transparent'; 3 | document.getElementById('festuresSettings').style.backgroundColor = 'transparent'; 4 | document.getElementById('linkSettings').style.backgroundColor = 'transparent'; 5 | document.getElementById('searchSettings').style.backgroundColor = 'transparent'; 6 | document.getElementById('helpInfo').style.backgroundColor = 'transparent'; 7 | document.getElementById('donateInfo').style.backgroundColor = 'transparent'; 8 | document.getElementById('otherSettings').style.backgroundColor = 'transparent' 9 | } 10 | export function hideMenu() { 11 | document.getElementById('backgroundSetting').style.display = 'none'; 12 | document.getElementById('festuresSetting').style.display = 'none'; 13 | document.getElementById('linkSetting').style.display = 'none'; 14 | document.getElementById('searchSetting').style.display = 'none'; 15 | document.getElementById('helpMain').style.display = 'none'; 16 | document.getElementById('donateMain').style.display = 'none'; 17 | document.getElementById('otherSetting').style.display = 'none'; 18 | } 19 | export function mobileUse(num, name) { 20 | const settingMainWidth = document.getElementById('settingMain').offsetWidth 21 | document.getElementById('settingMenu').style.display = 'none' 22 | document.getElementById('settingInnerMain').style = ` 23 | display: ; 24 | margin-top: 20px; 25 | broder-radius: 8px; 26 | ` 27 | document.getElementById('backSettingMenus').style.display = '' 28 | document.getElementById('settingMain').style = ` 29 | padding-left: 20px; 30 | padding-right: 20px; 31 | width: ${ settingMainWidth - 42}px; 32 | transition: padding 0px; 33 | ` 34 | document.getElementsByClassName('settingsInnerTitle')[num].style.display = 'none' 35 | document.getElementById('backSettingMenuName').innerText = name 36 | document.getElementById('backSettingMenu').style.display = '' 37 | } 38 | -------------------------------------------------------------------------------- /newPage/components/toast/toast.js: -------------------------------------------------------------------------------- 1 | export default class toast extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.render() 5 | } 6 | render() { 7 | this.id = 'toast' 8 | this.style = 'display: none;' 9 | this.innerHTML = ` 10 |
11 |
确认
12 | ` 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /newPage/components/topLeft/topLeft.js: -------------------------------------------------------------------------------- 1 | import weather from './weather/index.js' 2 | import isMobile from "../../util/isMobile.js"; 3 | import settingMain from "../settingMain/index.js"; 4 | import closeSettingWindow from "../settingMain/closeSettingWindow.js"; 5 | 6 | export default class topLeft extends HTMLElement { 7 | constructor() { 8 | super() 9 | customElements.define('weather-com', weather) 10 | this.render() 11 | this.init() 12 | } 13 | render() { 14 | this.className = 'top-left' 15 | this.id = 'top-right' 16 | this.style = 'top: 0;' 17 | this.innerHTML = ` 18 | 19 | 20 | ` 21 | } 22 | init() { 23 | document.getElementById('settings').addEventListener("click", () => { 24 | document.getElementById('settingMain').className = 'settingMain' 25 | document.getElementById('settingMain').style.transition = '0.5s' 26 | setTimeout(() => { 27 | if (isMobile()) { 28 | document.getElementById('settingInnerMain').style.display = 'none' 29 | document.getElementById('settingMenu').style.marginRight = '-20px' 30 | } else { 31 | document.getElementById('settingInnerMain').style.display = '' 32 | } 33 | document.getElementById('settingCloseButton').style.display = '' 34 | document.getElementById('settingMenu').style.display = '' 35 | }, 450) 36 | document.getElementById('blackBack').style = ` 37 | z-index: 150; 38 | background-color: #00000050 39 | ` 40 | if (isMobile()) { 41 | document.getElementById('settingMain').style = ` 42 | width: 70%; 43 | height: 50%; 44 | padding: 40px; 45 | ` 46 | document.getElementById('settingMenu').style.display = 'none' 47 | } 48 | document.getElementById('blackBack').addEventListener("click", () => { 49 | const changLinkDisplay = document.getElementById('changeLink').style.display 50 | const toastDisplay = document.getElementById('toast').style.display 51 | if (changLinkDisplay === 'none' && toastDisplay === 'none') { 52 | closeSettingWindow() 53 | } 54 | }) 55 | }) 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /newPage/components/topLeft/weather/dayWeather.js: -------------------------------------------------------------------------------- 1 | import { dayTo, dayTo2 } from "./getDatShow.js"; 2 | import getWeatherImg from "./weatherImg.js" 3 | 4 | export default class dayWeather extends HTMLElement { 5 | constructor() { 6 | super() 7 | this._data = { 8 | com: [2, 3, 4] 9 | } 10 | this.render() 11 | this.init() 12 | } 13 | render() { 14 | this.className = 'dayWeather' 15 | this.id = 'dayWeather' 16 | this.innerHTML = ` 17 |
18 |
19 |
20 | ${this._data.com.map(item => { 21 | return ` 22 |
23 |
24 |
25 | 26 |
27 |
` 28 | }).join('')} 29 |
30 | ` 31 | } 32 | init() { 33 | chrome.storage.sync.get(['weatherCity'], (budget) => { 34 | let weatherCity = budget.weatherCity 35 | if (typeof (weatherCity) == 'undefined') { 36 | weatherCity = ''; 37 | } 38 | if (weatherCity == '') { 39 | weatherCity = '北京'; 40 | } 41 | this.weatherGet(weatherCity, 1) 42 | }) 43 | setTimeout(() => { 44 | document.getElementById('weatherImg').hidden = false; 45 | }, 200) 46 | document.getElementById('weatherCityUp').addEventListener("click", () => { 47 | const city = document.getElementById('weatherCityIn').value 48 | this.weatherGet(city, 1) 49 | chrome.storage.sync.set({ 'weatherCity': city }) 50 | }) 51 | } 52 | weatherGet(city, day) { 53 | const httpRequest = new XMLHttpRequest() 54 | day = day - 1 55 | 56 | let weatherTime = '' 57 | 58 | httpRequest.open('GET', 'https://query.asilu.com/weather/baidu/?city=' + city, true) 59 | httpRequest.send() 60 | 61 | httpRequest.onreadystatechange = function () { 62 | if (httpRequest.readyState == 4 && httpRequest.status == 200) { 63 | const obj = JSON.parse(httpRequest.responseText); 64 | 65 | function weatherDay(day) { 66 | const weatherImg = getWeatherImg(obj.weather[day].weather) 67 | document.getElementById('weatherImg').src = weatherImg 68 | document.getElementById('weatherCityIn').placeholder = '当前城市：' + obj.city; 69 | } 70 | 71 | function feaDayWeather(dayfea) { 72 | const weatherImg = getWeatherImg(obj.weather[dayfea - 1].weather); 73 | 74 | if (dayfea < 4) { 75 | weatherTime = dayTo(obj.weather[dayfea - 1].date)[1]; 76 | } else { 77 | weatherTime = dayTo2(obj.weather[dayfea - 1].date)[0] 78 | } 79 | 80 | document.getElementById('time' + dayfea).innerText = weatherTime; 81 | document.getElementById('day' + dayfea + 'Weather').innerText = obj.weather[dayfea - 1].weather; 82 | document.getElementById('day' + dayfea + 'Img').src = weatherImg; 83 | document.getElementById('day' + dayfea + 'Temp').innerText = obj.weather[dayfea - 1].temp; 84 | } 85 | 86 | weatherDay(day); 87 | feaDayWeather(day + 2); 88 | feaDayWeather(day + 3); 89 | feaDayWeather(day + 4); 90 | 91 | document.getElementById('todayWeather').innerText = obj.weather[day].weather; 92 | document.getElementById('todayWeathertemp').innerText = '今日温度：' + obj.weather[day].temp; 93 | } 94 | }; 95 | 96 | document.getElementById('weather').hidden = false; 97 | 98 | setTimeout(() => { 99 | if (document.getElementById('button').innerText == '暂时没有有连接到可以访问互联网的网络哦~') { 100 | document.getElementById('weatherMain').style = ` 101 | justify-content: center; 102 | align-items: center; 103 | width: 270px; 104 | font-size: 20px; 105 | font-weight: bold; 106 | background-color: #ffffff70; 107 | border-radius: 10px; 108 | ` 109 | document.getElementById('weatherMain').innerText = '无网络连接'; 110 | document.getElementById('weatherImg').src = 'imgs/dLinkIcon.png'; 111 | } 112 | }, 300) 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /newPage/components/topLeft/weather/getDatShow.js: -------------------------------------------------------------------------------- 1 | export function dayTo(str) { 2 | return str.match(/\（([^)]*)\）/) 3 | } 4 | 5 | export function dayTo2(str) { 6 | return str.split(/\（.*?\）/) 7 | } 8 | -------------------------------------------------------------------------------- /newPage/components/topLeft/weather/index.js: -------------------------------------------------------------------------------- 1 | import dayWeather from './dayWeather.js' 2 | import isMobile from "../../../util/isMobile.js"; 3 | 4 | export default class weatherCom extends HTMLElement { 5 | constructor() { 6 | super() 7 | customElements.define('day-weather', dayWeather) 8 | this.render() 9 | this.init() 10 | } 11 | render() { 12 | this.className = 'topButton' 13 | this.id = 'weather' 14 | this.style = 'display: none;' 15 | this.innerHTML = ` 16 | 17 | 24 | ` 25 | } 26 | init() { 27 | let weatherHide = true 28 | document.getElementById('weatherImg').addEventListener("click", () => { 29 | if (weatherHide) { 30 | weatherHide = !weatherHide; 31 | document.getElementById('weather').style = ` 32 | width: 350px; 33 | height: 230px; 34 | padding: 20px; 35 | ` 36 | document.getElementById('weatherImg').style = ` 37 | width: 60px; 38 | height: 60px; 39 | ` 40 | if (isMobile()) { 41 | let weatherLeft = -(90 - (window.innerWidth - 310) / 2); 42 | document.getElementById('weather').style = ` 43 | width: 270px; 44 | height: 310px; 45 | transform: translateX(${weatherLeft}px) translateY(100px); 46 | ` 47 | document.getElementById('blackBack').style = ` 48 | z-index: 101; 49 | background-color: #00000050; 50 | ` 51 | document.getElementById('weather').style.flexDirection = 'column'; 52 | document.getElementById('weatherMain').style = ` 53 | margin-top: 10px; 54 | margin-left: 0px; 55 | ` 56 | document.getElementById('dayWeather').style.top = '137px'; 57 | if (document.getElementById('button').innerText == '暂时没有有连接到可以访问互联网的网络哦~') { 58 | document.getElementById('weatherMain').style.display = 'flex'; 59 | } 60 | document.getElementById('blackBack').onclick = function () { 61 | document.getElementById('weather').style = ` 62 | width: 30px; 63 | height: 30px; 64 | ` 65 | document.getElementById('weatherImg').style = ` 66 | width: 30px; 67 | height: 30px; 68 | ` 69 | document.getElementById('weather').style = ` 70 | padding: 10px; 71 | position: ; 72 | margin-top: 15px; 73 | margin-left: 20px; 74 | transform: ; 75 | ` 76 | document.getElementById('weatherMain').style.display = 'none'; 77 | document.getElementById('blackBack').style = ` 78 | z-index: -1; 79 | background-color: #00000010; 80 | ` 81 | weatherHide = !weatherHide; 82 | } 83 | } else { 84 | document.getElementsByClassName('feaWeatherbox')[0].style.marginLeft = '-3px'; 85 | document.getElementsByClassName('feaWeatherbox')[2].style.marginRight = '-3px'; 86 | document.getElementsByClassName('feaWeatherbox')[0].style.width = '74px'; 87 | document.getElementsByClassName('feaWeatherbox')[1].style.width = '74px'; 88 | document.getElementsByClassName('feaWeatherbox')[2].style.width = '74px'; 89 | document.getElementsByClassName('feaWeather')[0].style.marginBottom = '4px'; 90 | document.getElementById('weather').style.height = '250px' 91 | 92 | } 93 | setTimeout(() => { 94 | document.getElementById('weatherMain').style.display = ''; 95 | if (document.getElementById('button').innerText == '暂时没有有连接到可以访问互联网的网络哦~') { 96 | document.getElementById('weatherMain').style.display = 'flex'; 97 | } 98 | }, 300) 99 | document.getElementById('click').onclick = function () { 100 | document.getElementById('weather').style = ` 101 | width: 30px; 102 | height: 30px; 103 | padding: 10px; 104 | ` 105 | document.getElementById('weatherImg').style = ` 106 | width: 30px; 107 | height: 30px; 108 | ` 109 | document.getElementById('weatherMain').style.display = 'none'; 110 | weatherHide = !weatherHide; 111 | } 112 | } else { 113 | document.getElementById('weather').style = ` 114 | width: 30px; 115 | height: 30px; 116 | padding: 10px; 117 | ` 118 | document.getElementById('weatherImg').style = ` 119 | width: 30px; 120 | height: 30px; 121 | ` 122 | document.getElementById('weatherMain').style.display = 'none'; 123 | if (isMobile()) { 124 | document.getElementById('weather').style.transform = ''; 125 | document.getElementById('blackBack').style = ` 126 | z-index: -1; 127 | background-color: #00000010; 128 | ` 129 | } 130 | weatherHide = !weatherHide; 131 | } 132 | }) 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /newPage/components/topLeft/weather/weatherImg.js: -------------------------------------------------------------------------------- 1 | export default function (weather) { 2 | if (weather.search("雪") != -1) { 3 | return 'imgs/weather/03.png'; 4 | } else if (weather.search("雨") != -1) { 5 | return'imgs/weather/04.png'; 6 | } else if (weather.search("多云") != -1) { 7 | return 'imgs/weather/00.png'; 8 | } else if (weather.search("晴") != -1) { 9 | return 'imgs/weather/01.png'; 10 | } else if (weather.search("阴") != -1) { 11 | return 'imgs/weather/02.png'; 12 | } else { 13 | return 'imgs/dLinkIcon.png'; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /newPage/components/topRight/hide.js: -------------------------------------------------------------------------------- 1 | import isMobile from "../../util/isMobile.js"; 2 | import { onHide, onShow } from "../../js/main/function.js"; 3 | //This is hide all element function 4 | //if bottemButton is hide all element will hide 5 | //else show all element 6 | export default function hideClick() { 7 | const hideButton = document.getElementById('button').hidden 8 | const hide = document.getElementById('hide') 9 | const info = document.getElementById('info') 10 | 11 | if (!hideButton) { 12 | chrome.storage.local.set({ 'hs': 'show' }) 13 | onHide() 14 | hide.hidden = false 15 | chrome.storage.sync.get(['seaBarHS'], (budget) => { 16 | let seaBarHS = budget.seaBarHS; 17 | if (typeof seaBarHS === 'undefined') { 18 | seaBarHS = 'show' 19 | } 20 | if (seaBarHS === 'show') { 21 | document.getElementById('searchbar').style.display = '' 22 | } 23 | }) 24 | if (isMobile()) { 25 | hide.style.marginRight = '0px' 26 | info.hidden = true 27 | } 28 | } else { 29 | onShow() 30 | chrome.storage.local.set({ 'hs': 'hide' }) 31 | if (isMobile()) { 32 | document.getElementById('history').hidden = true 33 | document.getElementById('clock').hidden = true 34 | info.hidden = false 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /newPage/components/topRight/topRight.js: -------------------------------------------------------------------------------- 1 | import hideClick from "./hide.js"; 2 | 3 | export default class topRight extends HTMLElement { 4 | constructor() { 5 | super() 6 | this.render() 7 | } 8 | render() { 9 | this.className = 'title' 10 | this.id = 'title' 11 | this.style = 'top: 0;' 12 | this.innerHTML = ` 13 | 14 | 15 | 16 | 17 | 18 | ` 19 | document.getElementById('hide').addEventListener('click', () => { 20 | hideClick() 21 | }) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /newPage/css/cal.css: -------------------------------------------------------------------------------- 1 | @import url(./color.css); 2 | 3 | /* cal css */ 4 | .mainCal{ 5 | position: relative; 6 | background: var(--color90); 7 | border-radius: 20px; 8 | overflow: hidden; 9 | z-index: 100; 10 | border-top: 2px solid var(--borderColor); 11 | border-left: 2px solid var(--borderColor); 12 | box-shadow: 5px 5px 30px #00000050; 13 | } 14 | .mainCal .card{ 15 | position: relative; 16 | display: grid; 17 | backdrop-filter: blur(20px); 18 | } 19 | .card .value{ 20 | grid-column: span 4; 21 | height: 150px; 22 | width: 320px; 23 | text-align: right; 24 | border: none; 25 | outline: none; 26 | padding-left: 30px; 27 | padding-right: 30px; 28 | font-size: 30px; 29 | background-color: transparent; 30 | color: black; 31 | border-bottom:2px solid #00000030; 32 | margin-bottom: 10px; 33 | } 34 | .card span{ 35 | display: grid; 36 | place-items: center; 37 | height: 80px; 38 | width: 90px; 39 | font-weight: bold; 40 | font-size: 20px; 41 | cursor: pointer; 42 | user-select: none; 43 | border-radius: 10px; 44 | transition: 0.5s; 45 | color: var(--textColor); 46 | } 47 | .card span:hover{ 48 | background-color: var(--color70); 49 | transition: 0.5s; 50 | } 51 | .card span:active{ 52 | background: var(--color50); 53 | font-size: 70px; 54 | } 55 | .card .clear{ 56 | grid-column: 2 span; 57 | width: 180px; 58 | } 59 | .card .result{ 60 | grid-column: 2 span; 61 | width: 180px; 62 | margin-bottom: 10px; 63 | } 64 | 65 | #txt{ 66 | color: var(--textColor); 67 | } -------------------------------------------------------------------------------- /newPage/css/color.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --searchBarColor: #ffffff90; 3 | --searchBarColorHover: #ffffff70; 4 | --searchBarBorderColor: #ffffff70; 5 | --searchBarBorderColorHover: #ffffff50; 6 | --linkColorActive: #aaaaaa50; 7 | --linkBorderColorActive: #ffffff30; 8 | --clickColor: #00000000; 9 | --weatherColor: #ffffff70; 10 | --fontColor: black; 11 | --inputBackground: white; 12 | --buttonMainColor: #ffffff90; 13 | --mainBorder: #ffffff70; 14 | --buttonColor: #e6e6e6; 15 | --buttonColorActive: #9e9e9e; 16 | --color50: #ffffff50; 17 | --featureColor: #ffffffee; 18 | --linkChangeColor: #ffffff90; 19 | --selColor: #ffffff70; 20 | --color90: #ffffff90; 21 | --color70: #ffffff70; 22 | --borderColor: #ffffff70; 23 | --textColor: black; 24 | --barColor: #ffffff90; 25 | --inColor: #ffffff90; 26 | --seaRight: #44444450; 27 | } 28 | 29 | :root.dark{ 30 | --searchBarColor: #11111190; 31 | --searchBarColorHover: #00000070; 32 | --searchBarBorderColor: #00000010; 33 | --searchBarBorderColorHover: #00000010; 34 | --linkColorActive: #00000050; 35 | --linkBorderColorActive: #00000010; 36 | --clickColor: #00000050; 37 | --weatherColor: #44444470; 38 | --fontColor: #999; 39 | --inputBackground: #44444490; 40 | --buttonMainColor: #11111190; 41 | --mainBorder: #00000030; 42 | --buttonColor: #4e4e4e; 43 | --buttonColorActive: #2e2e2e; 44 | --color50: #44444450; 45 | --featureColor: #444444ee; 46 | --linkChangeColor: #44444430; 47 | --selColor: #44444470; 48 | --color90: #11111190; 49 | --color70: #00000070; 50 | --borderColor: #00000010; 51 | --textColor: #999999; 52 | --barColor: #11111190; 53 | --inColor: #44444470; 54 | --seaRight: #cccccc70; 55 | } -------------------------------------------------------------------------------- /newPage/css/history.css: -------------------------------------------------------------------------------- 1 | @import url(./color.css); 2 | 3 | /* This is historybar style */ 4 | .bar{ 5 | height: 100vh; 6 | width: 0px; 7 | position: fixed; 8 | top: 0; 9 | right: 0; 10 | transition: width 0.5s; 11 | backdrop-filter: blur(20px); 12 | background-color: var(--color90); 13 | box-shadow: -10px 0px 20px #00000050; 14 | z-index: 110; 15 | } 16 | .barSel{ 17 | height: 100vh; 18 | width: 380px; 19 | box-shadow: -10px 0px 20px #00000050; 20 | position: fixed; 21 | top: 0; 22 | right: 0; 23 | transition: width 0.5s; 24 | background-color: var(--color90); 25 | backdrop-filter: blur(20px); 26 | z-index: 110; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | } 31 | .historyButton{ 32 | width: 100%; 33 | } 34 | .historyback{ 35 | width: 40px; 36 | height: 40px; 37 | padding: 5px; 38 | margin-top: 20px; 39 | margin-left: 20px; 40 | background-color: var(--inColor); 41 | box-shadow: 0px 0px 20px #00000050; 42 | border-radius: 50%; 43 | cursor: pointer; 44 | } 45 | .historyback:active{ 46 | background-color: #00000010; 47 | } 48 | .historyback .imgafter{ 49 | width: 100%; 50 | height: 100%; 51 | transition: 1s; 52 | } 53 | .imgbefore{ 54 | width: 100%; 55 | height: 100%; 56 | transform: rotate(180deg); 57 | transition: 1s; 58 | } 59 | 60 | .historyInfo{ 61 | background-color: var(--inColor); 62 | width: 85%; 63 | border-radius: 10px; 64 | box-shadow: 0px 0px 8px #00000050; 65 | padding: 15px; 66 | margin-bottom: 10px; 67 | margin-top: 10px; 68 | cursor: pointer; 69 | } 70 | .historyInfo:hover{ 71 | background-color: var(--color50) 72 | } 73 | .historyInfo:active{ 74 | background-color: #00000010; 75 | } 76 | #historyIn{ 77 | width: 97%; 78 | margin: 20px; 79 | display: flex; 80 | flex-direction: column; 81 | align-items: center; 82 | overflow-y:scroll; 83 | } 84 | .historyTitle{ 85 | font-size: 20px; 86 | font-weight: bold; 87 | margin-bottom: 10px; 88 | max-width: 80%; 89 | overflow: hidden; 90 | text-overflow: ellipsis; 91 | white-space: nowrap; 92 | } 93 | .historyLink{ 94 | font-size: 18px; 95 | max-width: 100%; 96 | overflow: hidden; 97 | text-overflow: ellipsis; 98 | white-space: nowrap; 99 | } 100 | -------------------------------------------------------------------------------- /newPage/css/info.css: -------------------------------------------------------------------------------- 1 | @import url(./color.css); 2 | 3 | .bottom-right{ 4 | position: fixed; 5 | right: 0; 6 | z-index: 100; 7 | } 8 | .bottomButton{ 9 | width: 30px; 10 | height: 30px; 11 | padding: 10px; 12 | margin-bottom: 20px; 13 | margin-right: 20px; 14 | background-color: var(--barColor); 15 | box-shadow: 5px 5px 30px #00000050; 16 | border-radius: 50%; 17 | backdrop-filter: blur(20px); 18 | cursor: pointer 19 | } 20 | .bottomButton:active{ 21 | background-color: #00000010; 22 | } 23 | .bottomButton img{ 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | .bar{ 29 | height: 100vh; 30 | width: 0px; 31 | position: fixed; 32 | top: 0; 33 | right: 0; 34 | transition: width 0.5s; 35 | backdrop-filter: blur(20px); 36 | background-color: var(--barColor); 37 | box-shadow: -10px 0px 20px #00000050; 38 | z-index: 110; 39 | color: var(--textColor); 40 | } 41 | .barSel{ 42 | height: 100vh; 43 | width: 380px; 44 | box-shadow: -10px 0px 20px #00000050; 45 | position: fixed; 46 | top: 0; 47 | right: 0; 48 | transition: width 0.5s; 49 | background-color: var(--barColor); 50 | backdrop-filter: blur(20px); 51 | z-index: 110; 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | color: var(--textColor); 56 | } 57 | .barSelMobile{ 58 | height: 100vh; 59 | width: 100vw; 60 | box-shadow: -10px 0px 20px #00000050; 61 | position: fixed; 62 | top: 0; 63 | right: 0; 64 | transition: width 0.5s; 65 | background-color: var(--barColor); 66 | backdrop-filter: blur(20px); 67 | z-index: 110; 68 | display: flex; 69 | flex-direction: column; 70 | align-items: center; 71 | color: var(--textColor); 72 | } 73 | .infoButton{ 74 | width: 100%; 75 | } 76 | .infoBack{ 77 | width: 40px; 78 | height: 40px; 79 | padding: 5px; 80 | margin-top: 20px; 81 | margin-left: 20px; 82 | background-color: var(--inColor); 83 | box-shadow: 0px 0px 20px #00000050; 84 | border-radius: 50%; 85 | cursor: pointer; 86 | } 87 | .infoBack:active{ 88 | background-color: #00000010; 89 | } 90 | .infoimgafter{ 91 | width: 100%; 92 | height: 100%; 93 | transition: 1s; 94 | } 95 | .infoimgbefore{ 96 | width: 100%; 97 | height: 100%; 98 | transform: rotate(180deg); 99 | transition: 1s; 100 | } 101 | 102 | .infoMain{ 103 | display: flex; 104 | flex-direction: column; 105 | width: 90%; 106 | padding: 20px; 107 | overflow-y:scroll; 108 | margin-top: 15px; 109 | margin-bottom: 15px; 110 | } 111 | .infoTitle{ 112 | font-size: 25px; 113 | font-weight: bold; 114 | margin-bottom: 15px; 115 | margin-left: 10px; 116 | margin-top: -15px; 117 | } 118 | .infoTxt{ 119 | background-color: var(--inColor); 120 | padding: 15px; 121 | font-size: 15px; 122 | border-radius: 15px; 123 | box-shadow: 0px 0px 8px #00000050; 124 | margin-bottom: 15px; 125 | font-weight: bold; 126 | } 127 | .infoTxt div{ 128 | margin-bottom: 10px; 129 | font-weight: bold; 130 | } 131 | .infoTxt a{ 132 | display: block; 133 | width: 100px; 134 | padding: 10px; 135 | border-radius: 10px; 136 | background-color: #0078d4; 137 | color: white; 138 | text-align: center; 139 | } 140 | .infoTxt a:active{ 141 | background-color: #035fa5; 142 | } 143 | .infoTxt img{ 144 | width: 100%; 145 | margin-bottom: 5px; 146 | border-radius: 10px; 147 | border: 1px #ddd solid; 148 | } 149 | 150 | .infoImg{ 151 | width: 80px; 152 | height: 80px; 153 | margin-bottom: 20px; 154 | margin-left: 5px; 155 | border-radius: 40px; 156 | box-shadow: 0px 0px 8px #00000050; 157 | } -------------------------------------------------------------------------------- /newPage/css/one.css: -------------------------------------------------------------------------------- 1 | @import url(./color.css); 2 | 3 | .button{ 4 | position: fixed; 5 | bottom: 0px; 6 | background-color: var(--color90); 7 | border-radius: 50px; 8 | box-shadow: 0px 0px 20px #00000070; 9 | backdrop-filter: blur(40px); 10 | margin-bottom: -200px; 11 | cursor: pointer; 12 | height: 50px; 13 | line-height: 50px; 14 | text-align: center; 15 | padding-left: 20px; 16 | padding-right: 20px; 17 | max-width: 500px; 18 | color: var(--textColor); 19 | } 20 | .button:hover{ 21 | background-color: var(--color70); 22 | } 23 | .button:active{ 24 | background-color: var(--color50); 25 | } 26 | a{ 27 | color: black; 28 | text-decoration: none; 29 | font-weight: bold; 30 | font-size: 13.5px; 31 | overflow: hidden; 32 | text-overflow: ellipsis; 33 | white-space: nowrap; 34 | } 35 | 36 | .oneMain{ 37 | position: fixed; 38 | z-index: 200; 39 | width: 550px; 40 | height: 300px; 41 | background-color: var(--color90); 42 | box-shadow: 0px 0px 70px #00000070; 43 | backdrop-filter: blur(20px); 44 | border-radius: 20px; 45 | padding: 50px; 46 | display: flex; 47 | flex-direction: row; 48 | margin-bottom: 10px; 49 | border-top: 2px solid var(--borderColor); 50 | border-left: 2px solid var(--borderColor); 51 | transition: 0.5s; 52 | } 53 | .oneMainBefore{ 54 | position: fixed; 55 | width: 0px; 56 | height: 0px; 57 | margin-top: 90vh; 58 | transition: 0.5s; 59 | z-index: 200; 60 | } 61 | .oneMainBeforeMobile{ 62 | position: fixed; 63 | bottom: 0; 64 | margin-bottom: 20vh; 65 | transition: 0.5s; 66 | z-index: 200; 67 | } 68 | #innerMain{ 69 | height: 100%; 70 | width: 100%; 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: space-between; 74 | } 75 | #innerMain div{ 76 | font-weight: bold; 77 | } 78 | #oneNum{ 79 | color: transparent; 80 | } 81 | #oneTxt{ 82 | width: 100%; 83 | text-align: center; 84 | color: transparent; 85 | } 86 | 87 | #oneFrom{ 88 | width: 100%; 89 | text-align: right; 90 | color: transparent; 91 | } 92 | 93 | #closeButton{ 94 | padding: 0px; 95 | width: 0px; 96 | height: 0px; 97 | background-color: var(--color90); 98 | position: absolute; 99 | right: 30px; 100 | top: 30px; 101 | border-radius: 50%; 102 | box-shadow: 0px 0px 5px #00000070; 103 | display: flex; 104 | justify-content: center; 105 | align-items: center; 106 | cursor: pointer; 107 | transition: 0.3s; 108 | } 109 | #closeButton:hover{ 110 | background-color: #00000005; 111 | } 112 | #closeButton:active{ 113 | background-color: #00000000; 114 | } 115 | #closeButton img{ 116 | width: 100%; 117 | height: 100%; 118 | } -------------------------------------------------------------------------------- /newPage/css/style.css: -------------------------------------------------------------------------------- 1 | @import url(./color.css); 2 | @import url(./setting.css); 3 | @import url(./cal.css); 4 | @import url(./history.css); 5 | @import url(./info.css); 6 | @import url(./one.css); 7 | 8 | ::-webkit-scrollbar { 9 | display: none; /* Chrome Safari */ 10 | } 11 | *{ 12 | margin: 0; 13 | padding: 0; 14 | } 15 | body{ 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | height: 100vh; 20 | background-repeat: no-repeat; 21 | flex-direction: column; 22 | background-size: cover; 23 | } 24 | input{ 25 | background-color: var(--inputBackground); 26 | color: var(--fontColor); 27 | } 28 | 29 | #weatherImg{ 30 | filter: drop-shadow(0px 0px 1px #00000050); 31 | width: 30px; 32 | height: 30px; 33 | transition: 0.3s; 34 | } 35 | #weather{ 36 | display: flex; 37 | flex-direction: row; 38 | border-radius: 25px; 39 | transition: width 0.3s,height 0.3s,padding 0.3s,transform 0.3s; 40 | } 41 | #weather:active{ 42 | background-color: var(--searchBarColor); 43 | } 44 | .weatherCity{ 45 | display: flex; 46 | flex-direction: row; 47 | } 48 | #weatherCityIn{ 49 | outline: none; 50 | border: 0px; 51 | border-radius: 10px; 52 | margin-right: 10px; 53 | width: 170px; 54 | padding-left: 10px; 55 | padding-right: 10px; 56 | } 57 | #weatherCityUp{ 58 | background-color: #0078d4; 59 | color: white; 60 | padding: 10px; 61 | border-radius: 10px; 62 | width: 50px; 63 | text-align: center; 64 | height: 17px; 65 | line-height: 17px; 66 | } 67 | #weatherCityUp:active{ 68 | background-color: #035fa5; 69 | } 70 | #weatherMain{ 71 | margin-left: 20px; 72 | } 73 | .dayWeather{ 74 | position: absolute; 75 | background-color: var(--weatherColor); 76 | border-radius: 10px; 77 | width: 250px; 78 | padding: 10px; 79 | top: 67px; 80 | bottom: 20px; 81 | display: flex; 82 | align-items: center; 83 | flex-direction: column; 84 | color: var(--fontColor); 85 | } 86 | #todayWeather{ 87 | font-size: 15px; 88 | font-weight: bold; 89 | margin-bottom: 5px; 90 | background-color: var(--weatherColor); 91 | padding: 5px 20px 5px 20px; 92 | border-radius: 20px; 93 | color: var(--fontColor); 94 | } 95 | .feaWeather{ 96 | position: relative; 97 | display: flex; 98 | flex-direction: row; 99 | justify-content: space-between; 100 | margin-top: 10px; 101 | margin-bottom: 10px; 102 | top: 0; 103 | width: 250px; 104 | height: 100%; 105 | bottom: 0; 106 | } 107 | .feaWeatherbox{ 108 | display: flex; 109 | flex-direction: column; 110 | justify-content: center; 111 | align-items: center; 112 | width: 72px; 113 | padding: 4px; 114 | background-color: var(--weatherColor); 115 | border-radius: 8px; 116 | height: 100%; 117 | text-align: center; 118 | color: var(--fontColor); 119 | } 120 | .weatherTime{ 121 | background-color: var(--weatherColor); 122 | padding: 3px; 123 | margin-bottom: 2px; 124 | width: 40px; 125 | text-align: center; 126 | border-radius: 20px; 127 | } 128 | 129 | #click{ 130 | position: fixed; 131 | width: 200vw; 132 | height: 200vh; 133 | background-color: var(--clickColor); 134 | } 135 | 136 | /* This is searchMain style */ 137 | .main{ 138 | display: flex; 139 | flex-direction: column; 140 | align-items: center; 141 | } 142 | 143 | /* This is searchbar style */ 144 | .searchbar{ 145 | width: 570px; 146 | height: 30px; 147 | background-color: var(--searchBarColor); 148 | box-shadow: 3px 3px 10px #00000050; 149 | backdrop-filter: blur(20px); 150 | border-radius: 10px; 151 | padding: 10px; 152 | display: flex; 153 | flex-direction: row; 154 | margin-bottom: 20px; 155 | border-top: 2px solid var(--searchBarBorderColor); 156 | border-left: 2px solid var(--searchBarBorderColor); 157 | transition: 0.25s; 158 | z-index: 5; 159 | } 160 | .searchbar:hover{ 161 | background-color: var(--searchBarColorHover); 162 | border-top: 2px solid var(--searchBarBorderColorHover); 163 | border-left: 2px solid var(--searchBarBorderColorHover); 164 | } 165 | .searchbar input{ 166 | border: 0px; 167 | background-color: transparent; 168 | border-radius: 6px; 169 | height: 30px; 170 | flex: 1; 171 | font-size: 20px; 172 | font-weight: bold; 173 | outline: 0px; 174 | } 175 | .searchbar img{ 176 | padding: 5px; 177 | height: 20px; 178 | width: 20px; 179 | margin-right: 10px; 180 | border-radius: 50%; 181 | background-color: white; 182 | } 183 | .keywordsRight{ 184 | width: 2px; 185 | height: 30px; 186 | margin: 0px 10px 0px 10px; 187 | background-color: var(--seaRight); 188 | } 189 | #searchBtn{ 190 | width: 0px; 191 | text-align: center; 192 | color: var(--fontColor); 193 | font-weight: bold; 194 | font-size: 17px; 195 | line-height: 28px; 196 | cursor: pointer; 197 | user-select: none; 198 | overflow: hidden; 199 | white-space: nowrap; 200 | transition: 0.3s; 201 | } 202 | 203 | /* This is favourite link style */ 204 | .link{ 205 | display: flex; 206 | flex-direction: row; 207 | width: 610px; 208 | flex-wrap: wrap; 209 | z-index: 2; 210 | } 211 | .link a div{ 212 | width: 50px; 213 | height: 50px; 214 | background-color: var(--searchBarColor); 215 | backdrop-filter: blur(20px); 216 | margin: 10px; 217 | border-radius: 10px; 218 | box-shadow: 0px 0px 10px #00000050; 219 | border-top: 2px solid var(--searchBarBorderColor); 220 | border-left: 2px solid var(--searchBarBorderColor); 221 | display: flex; 222 | align-items: center; 223 | text-align: center; 224 | padding: 25px; 225 | } 226 | .link div:hover{ 227 | background-color: var(--searchBarColorHover); 228 | border-top: 2px solid var(--searchBarBorderColorHover); 229 | border-left: 2px solid var(--searchBarBorderColorHover); 230 | } 231 | .link div:active{ 232 | background-color: var(--linkColorActive); 233 | border-top: 2px solid var(--linkBorderColorActive); 234 | border-left: 2px solid var(--linkBorderColorActive); 235 | } 236 | 237 | .link a div img{ 238 | max-width: 100%; 239 | max-height: 100%; 240 | min-width: 100%; 241 | min-width: 100%; 242 | } 243 | 244 | /* This is top-left button element style */ 245 | .title{ 246 | position: fixed; 247 | right: 0; 248 | z-index: 100; 249 | } 250 | .titleButton{ 251 | width: 30px; 252 | height: 30px; 253 | padding: 10px; 254 | margin-top: 20px; 255 | margin-right: 20px; 256 | background-color: var(--searchBarColor); 257 | box-shadow: 5px 5px 30px #00000050; 258 | border-radius: 50%; 259 | backdrop-filter: blur(20px); 260 | cursor: pointer 261 | } 262 | .titleButton:active{ 263 | background-color: var(--linkBorderColorActive); 264 | } 265 | .titleButton img{ 266 | width: 100%; 267 | height: 100%; 268 | } 269 | 270 | /* Clock css */ 271 | .mainClock{ 272 | width: 750px; 273 | height: 400px; 274 | background-color: var(--searchBarColor); 275 | border-radius: 40px; 276 | backdrop-filter: blur(40px); 277 | border-top:2px solid var(--searchBarBorderColor); 278 | border-left:2px solid var(--searchBarBorderColor); 279 | box-shadow: 10px 5px 50px #00000050; 280 | display: flex; 281 | flex-direction: row; 282 | text-align: center; 283 | align-items: center; 284 | justify-content: center; 285 | } 286 | #time{ 287 | font-weight: bold; 288 | font-size: 150px; 289 | color: var(--fontColor); 290 | } 291 | 292 | /* searchengins css */ 293 | 294 | .moreSearch{ 295 | position: fixed; 296 | background-color: var(--searchBarColor); 297 | backdrop-filter: blur(20px); 298 | border-radius: 20px; 299 | box-shadow: 5px 5px 30px #00000050; 300 | border-top: 2px solid var(--searchBarBorderColor); 301 | border-left: 2px solid var(--searchBarBorderColor); 302 | z-index: 4; 303 | transition: transform 0.3s, opacity 0.2s; 304 | margin-top: -30px; 305 | } 306 | .searchEngines{ 307 | max-width: 500px; 308 | display: flex; 309 | flex-direction: row; 310 | flex-wrap: wrap; 311 | } 312 | .searchEngines div{ 313 | padding: 25px; 314 | border-radius: 20px; 315 | } 316 | .searchEngines div img{ 317 | width: 50px; 318 | height: 50px; 319 | } 320 | .searchEngines div:hover{ 321 | background-color: #00000010; 322 | } 323 | 324 | #blackBack{ 325 | position: fixed; 326 | background-color: #00000010; 327 | width: 200vw; 328 | height: 200vh; 329 | } 330 | 331 | #loading{ 332 | position: fixed; 333 | width: 100vw; 334 | height: 100vh; 335 | background-color: var(--linkBorderColorActive); 336 | backdrop-filter: blur(20px); 337 | z-index: -2; 338 | display: flex; 339 | justify-content: center; 340 | align-items: center; 341 | color: var(--fontColor); 342 | } 343 | #loading{ 344 | font-size: 50px; 345 | font-weight: bold; 346 | } -------------------------------------------------------------------------------- /newPage/imgs/Chrome_Web_Store_logo_2012-2015.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/Chrome_Web_Store_logo_2012-2015.svg.png -------------------------------------------------------------------------------- /newPage/imgs/GitHub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/GitHub.png -------------------------------------------------------------------------------- /newPage/imgs/IThome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/IThome.png -------------------------------------------------------------------------------- /newPage/imgs/aliyun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/aliyun.png -------------------------------------------------------------------------------- /newPage/imgs/azure-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/azure-blue.png -------------------------------------------------------------------------------- /newPage/imgs/back_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/back_black.png -------------------------------------------------------------------------------- /newPage/imgs/background - 0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 0.jpg -------------------------------------------------------------------------------- /newPage/imgs/background - 1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 1.jpg -------------------------------------------------------------------------------- /newPage/imgs/background - 2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 2.jpg -------------------------------------------------------------------------------- /newPage/imgs/background - 3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 3.jpg -------------------------------------------------------------------------------- /newPage/imgs/background - 4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 4.jpg -------------------------------------------------------------------------------- /newPage/imgs/background - 5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/background - 5.jpg -------------------------------------------------------------------------------- /newPage/imgs/baidu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/baidu.png -------------------------------------------------------------------------------- /newPage/imgs/bing-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/bing-logo.png -------------------------------------------------------------------------------- /newPage/imgs/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/calculator.png -------------------------------------------------------------------------------- /newPage/imgs/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/close.png -------------------------------------------------------------------------------- /newPage/imgs/coolapk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/coolapk.png -------------------------------------------------------------------------------- /newPage/imgs/dLinkIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dLinkIcon.png -------------------------------------------------------------------------------- /newPage/imgs/dark/Timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/Timer.png -------------------------------------------------------------------------------- /newPage/imgs/dark/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/back.png -------------------------------------------------------------------------------- /newPage/imgs/dark/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/calculator.png -------------------------------------------------------------------------------- /newPage/imgs/dark/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/close.png -------------------------------------------------------------------------------- /newPage/imgs/dark/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/down.png -------------------------------------------------------------------------------- /newPage/imgs/dark/fy_ic_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/fy_ic_history.png -------------------------------------------------------------------------------- /newPage/imgs/dark/hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/hide.png -------------------------------------------------------------------------------- /newPage/imgs/dark/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/info.png -------------------------------------------------------------------------------- /newPage/imgs/dark/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/reload.png -------------------------------------------------------------------------------- /newPage/imgs/dark/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/setting.png -------------------------------------------------------------------------------- /newPage/imgs/dark/to.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/dark/to.png -------------------------------------------------------------------------------- /newPage/imgs/ddg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /newPage/imgs/donate/donate1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/donate/donate1.png -------------------------------------------------------------------------------- /newPage/imgs/donate/donate2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/donate/donate2.jpg -------------------------------------------------------------------------------- /newPage/imgs/donate/donate3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/donate/donate3.png -------------------------------------------------------------------------------- /newPage/imgs/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/down.png -------------------------------------------------------------------------------- /newPage/imgs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/favicon.ico -------------------------------------------------------------------------------- /newPage/imgs/fy_ic_history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/fy_ic_history.png -------------------------------------------------------------------------------- /newPage/imgs/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/google.png -------------------------------------------------------------------------------- /newPage/imgs/hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/hide.png -------------------------------------------------------------------------------- /newPage/imgs/icon_bilibili-circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/icon_bilibili-circle.png -------------------------------------------------------------------------------- /newPage/imgs/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/info.png -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 0.jpg -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 1.jpg -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 2.jpg -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 3.jpg -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 4.jpg -------------------------------------------------------------------------------- /newPage/imgs/mobile/background - 5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/mobile/background - 5.jpg -------------------------------------------------------------------------------- /newPage/imgs/qq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/qq.jpg -------------------------------------------------------------------------------- /newPage/imgs/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/reload.png -------------------------------------------------------------------------------- /newPage/imgs/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/search.png -------------------------------------------------------------------------------- /newPage/imgs/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/setting.png -------------------------------------------------------------------------------- /newPage/imgs/sougou.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/sougou.png -------------------------------------------------------------------------------- /newPage/imgs/timer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/timer.png -------------------------------------------------------------------------------- /newPage/imgs/to.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/to.png -------------------------------------------------------------------------------- /newPage/imgs/weather/00.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/weather/00.png -------------------------------------------------------------------------------- /newPage/imgs/weather/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/weather/01.png -------------------------------------------------------------------------------- /newPage/imgs/weather/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/weather/02.png -------------------------------------------------------------------------------- /newPage/imgs/weather/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/weather/03.png -------------------------------------------------------------------------------- /newPage/imgs/weather/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/weather/04.png -------------------------------------------------------------------------------- /newPage/imgs/yandex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/yandex.png -------------------------------------------------------------------------------- /newPage/imgs/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonylu110/uyouNewTab/ac5cb18fed95082011e80ec4a2d5deb541333995/newPage/imgs/youtube.png -------------------------------------------------------------------------------- /newPage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /newPage/js/features/backgroud.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId, clog } from "../main/function.js"; 2 | 3 | //load background img in page 4 | export function loadBackground() { 5 | var httpRequest = new XMLHttpRequest(); 6 | function imgload(imgUrl) { 7 | var img = document.createElement('img') 8 | img.src = imgUrl 9 | img.onload = () => { 10 | elemenetGetId('background').style.display = '' 11 | } 12 | } 13 | function picget(url) { 14 | httpRequest.open('GET', url, true); 15 | httpRequest.send(); 16 | httpRequest.onreadystatechange = function () { 17 | if (httpRequest.readyState == 4 && httpRequest.status == 200) { 18 | var obj = JSON.parse(httpRequest.responseText); 19 | var pic = obj.pic; 20 | 21 | elemenetGetId('picurl').className = pic; 22 | 23 | imgload(elemenetGetId('picurl').className) 24 | } 25 | }; 26 | } 27 | chrome.storage.local.get(['picUrl'], function (budget) { 28 | var picUrl = budget.picUrl; 29 | var background = elemenetGetId('background'); 30 | var down = elemenetGetId('down'); 31 | var button = elemenetGetId('button'); 32 | var picurl = elemenetGetId('picurl'); 33 | var oneMain = elemenetGetId('oneMain'); 34 | if (typeof (budget.picUrl) == 'undefined') { 35 | picUrl = ''; 36 | } 37 | if (picUrl != '') { 38 | elemenetGetId('background').style.display = '' 39 | background.style.backgroundImage = 'url(' + budget.picUrl + ')'; 40 | down.style.display = 'none'; 41 | } else { 42 | elemenetGetId('backgroundBefore').hidden = true; 43 | elemenetGetId('backgroundSetButton').style.marginRight = '0px'; 44 | //This is onload script 45 | //else load 'imgs/background.png' 46 | var screenWidth = window.innerWidth; 47 | if (screenWidth <= 813) { 48 | // elemenetGetId('picurl').className = 'https://dev.iw233.cn/api.php?sort=mp' 49 | picget("http://mark.tnyl.xyz/api/api.php?sort=mp&type=json") 50 | setTimeout(function () { 51 | if (button.innerHTML != '') { 52 | clog('network is working'); 53 | background.style.backgroundImage = "url(" + picurl.className + ")"; 54 | setTimeout(function () { 55 | if (background.style.backgroundImage == 'url("")') { 56 | background.style.backgroundImage = "url(" + picurl.className + ")"; 57 | } 58 | }, 200) 59 | } else { 60 | clog('network is not working'); 61 | background.style.backgroundImage = "url('imgs/mobile/background - " + Math.ceil(Math.random() * 5) + ".jpg')"; 62 | button.innerHTML = '暂时没有有连接到可以访问互联网的网络哦~'; 63 | button.onclick = oneMain.style.display = 'none'; 64 | down.onclick = function () { 65 | button.innerHTML = '本地图片无法下载哦~'; 66 | setTimeout(function () { 67 | button.innerHTML = '暂时没有有连接到可以访问互联网的网络哦~'; 68 | }, 2500) 69 | } 70 | } 71 | }, 300) 72 | setTimeout(function () { 73 | elemenetGetId('background').style.display = '' 74 | if (picurl.className != '') { 75 | if (background.style.backgroundImage == 'url("")') { 76 | background.style.backgroundImage = "url(" + picurl.className + ")"; 77 | } 78 | } else { 79 | if (background.style.backgroundImage == 'url("")') { 80 | background.style.backgroundImage = "url('imgs/mobile/background - " + Math.ceil(Math.random() * 5) + ".jpg')"; 81 | setTimeout(function () { 82 | button.innerHTML = '在线图片加载失败，已加载内建图片哦~'; 83 | }, 500) 84 | button.onclick = oneMain.style.display = 'none'; 85 | down.onclick = function () { 86 | button.innerHTML = '本地图片无法下载哦~'; 87 | setTimeout(function () { 88 | button.innerHTML = '在线图片加载失败，已加载内建图片哦~'; 89 | }, 2500) 90 | } 91 | } 92 | } 93 | }, 1000) 94 | } else { 95 | // elemenetGetId('picurl').className = 'https://dev.iw233.cn/api.php?sort=pc' 96 | picget("http://mark.tnyl.xyz/api/api.php?sort=pc&type=json") 97 | setTimeout(function () { 98 | if (button.innerHTML != '') { 99 | clog('network is working'); 100 | background.style.backgroundImage = "url(" + picurl.className + ")"; 101 | setTimeout(function () { 102 | if (background.style.backgroundImage == 'url("")') { 103 | background.style.backgroundImage = "url(" + picurl.className + ")"; 104 | } 105 | }, 200) 106 | } else { 107 | clog('network is not working'); 108 | background.style.backgroundImage = "url('imgs/background - " + Math.ceil(Math.random() * 5) + ".jpg')"; 109 | button.innerHTML = '暂时没有有连接到可以访问互联网的网络哦~'; 110 | button.onclick = oneMain.style.display = 'none'; 111 | down.onclick = function () { 112 | button.innerHTML = '本地图片无法下载哦~'; 113 | setTimeout(function () { 114 | button.innerHTML = '暂时没有有连接到可以访问互联网的网络哦~'; 115 | }, 2500) 116 | } 117 | } 118 | }, 300) 119 | setTimeout(function () { 120 | elemenetGetId('background').style.display = '' 121 | if (picurl.className != '') { 122 | if (background.style.backgroundImage == 'url("")') { 123 | background.style.backgroundImage = "url(" + picurl.className + ")"; 124 | } 125 | } else { 126 | if (background.style.backgroundImage == 'url("")') { 127 | background.style.backgroundImage = "url('imgs/background - " + Math.ceil(Math.random() * 5) + ".jpg')"; 128 | setTimeout(function () { 129 | button.innerHTML = '在线图片加载失败，已加载内建图片哦~'; 130 | }, 500) 131 | button.onclick = oneMain.style.display = 'none'; 132 | down.onclick = function () { 133 | button.innerHTML = '本地图片无法下载哦~'; 134 | setTimeout(function () { 135 | button.innerHTML = '在线图片加载失败，已加载内建图片哦~'; 136 | }, 2500) 137 | } 138 | } 139 | } 140 | }, 1000) 141 | } 142 | } 143 | }) 144 | } 145 | -------------------------------------------------------------------------------- /newPage/js/features/hsFeature.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId, body, onShow, onHide } from "../main/function.js"; 2 | 3 | export function hsFeature() { 4 | var screenWidth = window.innerWidth;//get screen width 5 | var hideHS = elemenetGetId('hideHS'); 6 | var historyHS = elemenetGetId('historyHS'); 7 | var reloadHS = elemenetGetId('reloadHS'); 8 | var calHS = elemenetGetId('calHS'); 9 | var timeHS = elemenetGetId('timeHS'); 10 | var downHS = elemenetGetId('downHS'); 11 | var infoHS = elemenetGetId('infoHS'); 12 | var oneHS = elemenetGetId('oneHS'); 13 | hideHS.onclick = function () { 14 | if (hideHS.className == 'hsFeatures') { 15 | chrome.storage.local.set({ 'hideHS': 'hide' }); 16 | hideHS.className = 'hsFeatureHides'; 17 | hideHS.innerText = '隐藏'; 18 | elemenetGetId('hide').hidden = true; 19 | if (screenWidth <= 813) { 20 | elemenetGetId('reload').style.marginLeft = '0px' 21 | if (historyHS.className == 'hsFeatureHides') { 22 | elemenetGetId('cal').style.marginLeft = '0px' 23 | } 24 | } 25 | } else { 26 | chrome.storage.local.set({ 'hideHS': 'show' }); 27 | hideHS.className = 'hsFeatures'; 28 | hideHS.innerText = '显示'; 29 | elemenetGetId('hide').hidden = false; 30 | if (screenWidth <= 813) { 31 | elemenetGetId('reload').style.marginLeft = '20px' 32 | elemenetGetId('cal').style.marginLeft = '20px' 33 | } 34 | } 35 | } 36 | historyHS.onclick = function () { 37 | if (historyHS.className == 'hsFeatures') { 38 | chrome.storage.local.set({ 'historyHS': 'hide' }); 39 | historyHS.className = 'hsFeatureHides'; 40 | historyHS.innerText = '隐藏'; 41 | elemenetGetId('history').hidden = true; 42 | } else { 43 | chrome.storage.local.set({ 'historyHS': 'show' }); 44 | historyHS.className = 'hsFeatures'; 45 | historyHS.innerText = '显示'; 46 | elemenetGetId('history').hidden = false; 47 | } 48 | } 49 | reloadHS.onclick = function () { 50 | if (reloadHS.className == 'hsFeatures') { 51 | chrome.storage.local.set({ 'reloadHS': 'hide' }); 52 | reloadHS.className = 'hsFeatureHides'; 53 | reloadHS.innerText = '隐藏'; 54 | elemenetGetId('reload').hidden = true; 55 | if (screenWidth <= 813 && hideHS.className == 'hsFeatureHides') { 56 | elemenetGetId('cal').style.marginLeft = '0px' 57 | } 58 | } else { 59 | chrome.storage.local.set({ 'reloadHS': 'show' }); 60 | reloadHS.className = 'hsFeatures'; 61 | reloadHS.innerText = '显示'; 62 | elemenetGetId('reload').hidden = false; 63 | if (screenWidth <= 813 && hideHS.className == 'hsFeatureHides') { 64 | elemenetGetId('cal').style.marginLeft = '20px' 65 | } 66 | } 67 | } 68 | calHS.onclick = function () { 69 | if (calHS.className == 'hsFeatures') { 70 | chrome.storage.local.set({ 'calHS': 'hide' }); 71 | calHS.className = 'hsFeatureHides'; 72 | calHS.innerText = '隐藏'; 73 | elemenetGetId('cal').hidden = true; 74 | } else { 75 | chrome.storage.local.set({ 'calHS': 'show' }); 76 | calHS.className = 'hsFeatures'; 77 | calHS.innerText = '显示'; 78 | elemenetGetId('cal').hidden = false; 79 | if (screenWidth <= 813 && hideHS.className == 'hsFeatures') { 80 | elemenetGetId('cal').style.marginLeft = '20px' 81 | } 82 | } 83 | } 84 | timeHS.onclick = function () { 85 | if (timeHS.className == 'hsFeatures') { 86 | chrome.storage.local.set({ 'timeHS': 'hide' }); 87 | timeHS.className = 'hsFeatureHides'; 88 | timeHS.innerText = '隐藏'; 89 | elemenetGetId('clock').hidden = true; 90 | } else { 91 | chrome.storage.local.set({ 'timeHS': 'show' }); 92 | timeHS.className = 'hsFeatures'; 93 | timeHS.innerText = '显示'; 94 | elemenetGetId('clock').hidden = false; 95 | } 96 | } 97 | weatherHS.onclick = function () { 98 | if (weatherHS.className == 'hsFeatures') { 99 | chrome.storage.local.set({ 'weatherHS': 'hide' }); 100 | weatherHS.className = 'hsFeatureHides'; 101 | weatherHS.innerText = '隐藏'; 102 | elemenetGetId('weather').style.display = 'none'; 103 | } else { 104 | chrome.storage.local.set({ 'weatherHS': 'show' }); 105 | weatherHS.className = 'hsFeatures'; 106 | weatherHS.innerText = '显示'; 107 | elemenetGetId('weather').style = ''; 108 | } 109 | } 110 | downHS.onclick = function () { 111 | if (downHS.className == 'hsFeatures') { 112 | chrome.storage.local.set({ 'downHS': 'hide' }); 113 | downHS.className = 'hsFeatureHides'; 114 | downHS.innerText = '隐藏'; 115 | elemenetGetId('down').hidden = true; 116 | } else { 117 | chrome.storage.local.set({ 'downHS': 'show' }); 118 | downHS.className = 'hsFeatures'; 119 | downHS.innerText = '显示'; 120 | elemenetGetId('down').hidden = false; 121 | } 122 | } 123 | infoHS.onclick = function () { 124 | if (infoHS.className == 'hsFeatures') { 125 | chrome.storage.local.set({ 'infoHS': 'hide' }); 126 | infoHS.className = 'hsFeatureHides'; 127 | infoHS.innerText = '隐藏'; 128 | elemenetGetId('info').hidden = true; 129 | } else { 130 | chrome.storage.local.set({ 'infoHS': 'show' }); 131 | infoHS.className = 'hsFeatures'; 132 | infoHS.innerText = '显示'; 133 | elemenetGetId('info').hidden = false; 134 | } 135 | } 136 | oneHS.onclick = function () { 137 | if (oneHS.className == 'hsFeatures') { 138 | chrome.storage.local.set({ 'oneHS': 'hide' }); 139 | oneHS.className = 'hsFeatureHides'; 140 | oneHS.innerText = '隐藏'; 141 | elemenetGetId('button').style.marginBottom = '-100px'; 142 | } else { 143 | chrome.storage.local.set({ 'oneHS': 'show' }); 144 | oneHS.className = 'hsFeatures'; 145 | oneHS.innerText = '显示'; 146 | if (screenWidth <= 813) { 147 | elemenetGetId('button').style.marginBottom = '150px'; 148 | } else { 149 | elemenetGetId('button').style.marginBottom = '20px'; 150 | } 151 | } 152 | } 153 | } 154 | 155 | export function hsFeatureUse() { 156 | chrome.storage.local.get(['hideHS', 'historyHS', 'reloadHS', 'calHS', 'timeHS', 'weatherHS', 'downHS', 'infoHS', 'oneHS', 'hs'], function (budget) { 157 | let hideHS = budget.hideHS; 158 | let historyHS = budget.historyHS; 159 | let reloadHS = budget.reloadHS; 160 | let calHS = budget.calHS; 161 | let timeHS = budget.timeHS; 162 | let weatherHS = budget.weatherHS; 163 | let downHS = budget.downHS; 164 | let infoHS = budget.infoHS; 165 | let oneHS = budget.oneHS; 166 | var hide = elemenetGetId('hide'); 167 | var info = elemenetGetId('info'); 168 | let hs = budget.hs; 169 | loadHs(hideHS, historyHS, reloadHS, calHS, timeHS, weatherHS, downHS, infoHS, oneHS, hs, hide, info) 170 | }) 171 | } 172 | 173 | export function loadHs(hideHS, historyHS, reloadHS, calHS, timeHS, weatherHS, downHS, infoHS, oneHS, hs, hide, info) { 174 | var screenWidth = window.innerWidth;//get screen width 175 | if (hs == 'show') { 176 | onHide(); 177 | hide.hidden = false; //show hide button 178 | chrome.storage.sync.get(['seaBarHS'], (budget) => { 179 | var seaBarHS = budget.seaBarHS; 180 | if (typeof (seaBarHS) == 'undefined') { 181 | seaBarHS = 'show'; 182 | } 183 | if (seaBarHS == 'show') { 184 | elemenetGetId('searchbar').style.display = ""; //show searchBar element 185 | } 186 | }) 187 | if (screenWidth <= 813) { 188 | hide.style.marginRight = '0px'; 189 | info.hidden = true; //hide info button 190 | } 191 | } else { 192 | onShow(); 193 | if (screenWidth <= 813) { 194 | elemenetGetId('history').hidden = true; //hide history button 195 | elemenetGetId('clock').hidden = true; //hide clock button 196 | info.hidden = false; //hide info button 197 | } 198 | if (hideHS == 'hide') { 199 | elemenetGetId('hide').hidden = true; 200 | elemenetGetId('hideHS').className = 'hsFeatureHides'; 201 | elemenetGetId('hideHS').innerText = '隐藏'; 202 | if (screenWidth <= 813) { 203 | elemenetGetId('reload').style.marginLeft = '0px' 204 | if (elemenetGetId('historyHS').className == 'hsFeatureHides') { 205 | elemenetGetId('cal').style.marginLeft = '0px' 206 | } 207 | } 208 | } else { 209 | elemenetGetId('hide').hidden = false; 210 | } 211 | if (historyHS == 'hide') { 212 | elemenetGetId('history').hidden = true; 213 | elemenetGetId('historyHS').className = 'hsFeatureHides'; 214 | elemenetGetId('historyHS').innerText = '隐藏'; 215 | } else { 216 | if (screenWidth > 813) { 217 | elemenetGetId('history').hidden = false; 218 | } 219 | } 220 | if (reloadHS == 'hide') { 221 | elemenetGetId('reload').hidden = true; 222 | elemenetGetId('reloadHS').className = 'hsFeatureHides'; 223 | elemenetGetId('reloadHS').innerText = '隐藏'; 224 | if (screenWidth <= 813 && elemenetGetId('hideHS').className == 'hsFeatureHides') { 225 | elemenetGetId('cal').style.marginLeft = '0px' 226 | } 227 | } else { 228 | elemenetGetId('reload').hidden = false; 229 | } 230 | if (calHS == 'hide') { 231 | elemenetGetId('cal').hidden = true; 232 | elemenetGetId('calHS').className = 'hsFeatureHides'; 233 | elemenetGetId('calHS').innerText = '隐藏'; 234 | } else if (calHS == 'show') { 235 | elemenetGetId('calHS').className = 'hsFeatures'; 236 | elemenetGetId('calHS').innerText = '显示'; 237 | if (screenWidth <= 813 && elemenetGetId('hideHS').className == 'hsFeatures') { 238 | elemenetGetId('cal').style.marginLeft = '20px' 239 | } 240 | elemenetGetId('cal').hidden = false; 241 | } 242 | if (timeHS == 'hide') { 243 | elemenetGetId('clock').hidden = true; 244 | elemenetGetId('timeHS').className = 'hsFeatureHides'; 245 | elemenetGetId('timeHS').innerText = '隐藏'; 246 | } else { 247 | if (screenWidth > 813) { 248 | elemenetGetId('clock').hidden = false; 249 | } 250 | } 251 | if (weatherHS == 'hide') { 252 | elemenetGetId('weather').style.display = 'none'; 253 | elemenetGetId('weatherHS').className = 'hsFeatureHides'; 254 | elemenetGetId('weatherHS').innerText = '隐藏'; 255 | } else { 256 | elemenetGetId('weather').style.display = ''; 257 | } 258 | if (downHS == 'hide') { 259 | elemenetGetId('down').hidden = true; 260 | elemenetGetId('downHS').className = 'hsFeatureHides'; 261 | elemenetGetId('downHS').innerText = '隐藏'; 262 | } else { 263 | elemenetGetId('down').hidden = false; 264 | } 265 | if (infoHS == 'hide') { 266 | elemenetGetId('info').hidden = true; 267 | elemenetGetId('infoHS').className = 'hsFeatureHides'; 268 | elemenetGetId('infoHS').innerText = '隐藏'; 269 | } else { 270 | elemenetGetId('info').hidden = false; 271 | } 272 | if (oneHS == 'hide') { 273 | elemenetGetId('button').style.marginBottom = '-100px'; 274 | elemenetGetId('oneHS').className = 'hsFeatureHides'; 275 | elemenetGetId('oneHS').innerText = '隐藏'; 276 | } 277 | } 278 | } -------------------------------------------------------------------------------- /newPage/js/features/hsLink.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId } from "../main/function.js"; 2 | 3 | export function hsLinkUse() { 4 | chrome.storage.local.get(['link1HS', 'link2HS', 'link3HS', 'link4HS', 'link5HS', 'link6HS', 'link7HS', 'link8HS', 'link9HS', 'link10HS'], function (budget) { 5 | let link1HS = budget.link1HS; 6 | let link2HS = budget.link2HS; 7 | let link3HS = budget.link3HS; 8 | let link4HS = budget.link4HS; 9 | let link5HS = budget.link5HS; 10 | let link6HS = budget.link6HS; 11 | let link7HS = budget.link7HS; 12 | let link8HS = budget.link8HS; 13 | let link9HS = budget.link9HS; 14 | let link10HS = budget.link10HS; 15 | if (link1HS == 'hide') { 16 | elemenetGetId('link1HS').className = 'hsFeatureHide'; 17 | elemenetGetId('link1HS').innerText = '隐藏'; 18 | elemenetGetId('link1').style.display = 'none'; 19 | } else { 20 | elemenetGetId('link1').style.display = ''; 21 | } 22 | if (link2HS == 'hide') { 23 | elemenetGetId('link2HS').className = 'hsFeatureHide'; 24 | elemenetGetId('link2HS').innerText = '隐藏'; 25 | elemenetGetId('link2').style.display = 'none'; 26 | } else { 27 | elemenetGetId('link2').style.display = ''; 28 | } 29 | if (link3HS == 'hide') { 30 | elemenetGetId('link3HS').className = 'hsFeatureHide'; 31 | elemenetGetId('link3HS').innerText = '隐藏'; 32 | elemenetGetId('link3').style.display = 'none'; 33 | } else { 34 | elemenetGetId('link3').style.display = ''; 35 | } 36 | if (link4HS == 'hide') { 37 | elemenetGetId('link4HS').className = 'hsFeatureHide'; 38 | elemenetGetId('link4HS').innerText = '隐藏'; 39 | elemenetGetId('link4').style.display = 'none'; 40 | } else { 41 | elemenetGetId('link4').style.display = ''; 42 | } 43 | if (link5HS == 'hide') { 44 | elemenetGetId('link5HS').className = 'hsFeatureHide'; 45 | elemenetGetId('link5HS').innerText = '隐藏'; 46 | elemenetGetId('link5').style.display = 'none'; 47 | } else { 48 | elemenetGetId('link5').style.display = ''; 49 | } 50 | if (link6HS == 'hide') { 51 | elemenetGetId('link6HS').className = 'hsFeatureHide'; 52 | elemenetGetId('link6HS').innerText = '隐藏'; 53 | elemenetGetId('ithome').style.display = 'none'; 54 | } else { 55 | elemenetGetId('ithome').style.display = ''; 56 | } 57 | if (link7HS == 'hide') { 58 | elemenetGetId('link7HS').className = 'hsFeatureHide'; 59 | elemenetGetId('link7HS').innerText = '隐藏'; 60 | elemenetGetId('chromeStore').style.display = 'none'; 61 | } else { 62 | elemenetGetId('chromeStore').style.display = ''; 63 | } 64 | if (link8HS == 'hide') { 65 | elemenetGetId('link8HS').className = 'hsFeatureHide'; 66 | elemenetGetId('link8HS').innerText = '隐藏'; 67 | elemenetGetId('aliyun').style.display = 'none'; 68 | } else { 69 | elemenetGetId('aliyun').style.display = ''; 70 | } 71 | if (link9HS == 'hide') { 72 | elemenetGetId('link9HS').className = 'hsFeatureHide'; 73 | elemenetGetId('link9HS').innerText = '隐藏'; 74 | elemenetGetId('azure').style.display = 'none'; 75 | } else { 76 | elemenetGetId('azure').style.display = ''; 77 | } 78 | if (link10HS == 'hide') { 79 | elemenetGetId('link10HS').className = 'hsFeatureHide'; 80 | elemenetGetId('link10HS').innerText = '隐藏'; 81 | elemenetGetId('link10').style.display = 'none'; 82 | } else { 83 | elemenetGetId('link10').style.display = ''; 84 | } 85 | }) 86 | } 87 | -------------------------------------------------------------------------------- /newPage/js/features/search.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId, elemenetGetClass, body, elemIdSty, elemClassSty } from "../main/function.js"; 2 | 3 | export function searchUse() { 4 | //This is searchBar function 5 | elemenetGetId('keywords').onclick = () => { //get searchEngin img 6 | getSearchEngine(); 7 | } 8 | function getSearchEngine() { //get searchEngin img 9 | var s = elemenetGetId('searchEngine').src; 10 | var engine = s.substring(s.lastIndexOf("/") + 1) 11 | } 12 | 13 | elemenetGetId('setCus').onclick = () => { 14 | var cusSea = elemenetGetId('cusSeaIn').value; 15 | chrome.storage.sync.set({ 'cusSea': cusSea }); 16 | searchChangeUse(); 17 | } 18 | } 19 | 20 | export function moreSearch() { 21 | function changeAn(an, button) { 22 | if (elemenetGetId(an).className == 'otherFeatures') { 23 | elemenetGetId(an).className = 'otherFeaturesBefore'; 24 | if (an == 'cusAn') { 25 | elemenetGetId(an).innerText = '禁用'; 26 | } else { 27 | elemenetGetId(an).innerText = '隐藏'; 28 | } 29 | elemenetGetId(button).style.display = 'none'; 30 | } else { 31 | if (an == 'cusAn') { 32 | elemenetGetId(an).innerText = '启用'; 33 | } else { 34 | elemenetGetId(an).innerText = '显示'; 35 | } 36 | elemenetGetId(an).className = 'otherFeatures'; 37 | 38 | elemenetGetId(button).style.display = ''; 39 | } 40 | } 41 | elemenetGetId('cusAn').onclick = () => { 42 | changeAn('cusAn', 'cus'); 43 | if (elemenetGetId('cusAn').className == 'otherFeaturesBefore') { 44 | chrome.storage.sync.set({ 'cus': 'hide' }); 45 | elemenetGetId('seaIn').style.display = 'none'; 46 | elemenetGetClass('seaBtn')[0].style.borderRadius = ''; 47 | elemenetGetClass('seaBtn')[0].style.background = '' 48 | } else { 49 | chrome.storage.sync.set({ 'cus': 'show' }); 50 | elemenetGetId('seaIn').style.display = ''; 51 | elemenetGetClass('seaBtn')[0].style.borderRadius = '10px 10px 0px 0px'; 52 | chrome.storage.sync.get(['dlMode'], (budget) => { 53 | let dlMode = budget.dlMode; 54 | if (typeof (dlMode) == 'undefined') { 55 | dlMode = ''; 56 | } 57 | if (dlMode == '') { 58 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 59 | elemenetGetClass('seaBtn')[0].style.background = '#44444470' 60 | } else { 61 | elemenetGetClass('seaBtn')[0].style.background = '#ffffff70' 62 | } 63 | } else if (dlMode == 'dark') { 64 | elemenetGetClass('seaBtn')[0].style.background = '#44444470' 65 | } else if (dlMode == 'light') { 66 | elemenetGetClass('seaBtn')[0].style.background = '#ffffff70' 67 | } 68 | }) 69 | 70 | } 71 | } 72 | elemenetGetId('googleAn').onclick = () => { 73 | changeAn('googleAn', 'google'); 74 | if (elemenetGetId('googleAn').className == 'otherFeaturesBefore') { 75 | chrome.storage.sync.set({ 'google': 'hide' }); 76 | } else { 77 | chrome.storage.sync.set({ 'google': 'show' }); 78 | } 79 | } 80 | elemenetGetId('bingAn').onclick = () => { 81 | changeAn('bingAn', 'bing'); 82 | if (elemenetGetId('bingAn').className == 'otherFeaturesBefore') { 83 | chrome.storage.sync.set({ 'bing': 'hide' }); 84 | } else { 85 | chrome.storage.sync.set({ 'bing': 'show' }); 86 | } 87 | } 88 | elemenetGetId('baiduAn').onclick = () => { 89 | changeAn('baiduAn', 'baidu'); 90 | if (elemenetGetId('baiduAn').className == 'otherFeaturesBefore') { 91 | chrome.storage.sync.set({ 'baidu': 'hide' }); 92 | } else { 93 | chrome.storage.sync.set({ 'baidu': 'show' }); 94 | } 95 | } 96 | elemenetGetId('ddgAn').onclick = () => { 97 | changeAn('ddgAn', 'ddg'); 98 | if (elemenetGetId('ddgAn').className == 'otherFeaturesBefore') { 99 | chrome.storage.sync.set({ 'ddg': 'hide' }); 100 | } else { 101 | chrome.storage.sync.set({ 'ddg': 'show' }); 102 | } 103 | } 104 | elemenetGetId('yandexAn').onclick = () => { 105 | changeAn('yandexAn', 'yandex'); 106 | if (elemenetGetId('yandexAn').className == 'otherFeaturesBefore') { 107 | chrome.storage.sync.set({ 'yandex': 'hide' }); 108 | } else { 109 | chrome.storage.sync.set({ 'yandex': 'show' }); 110 | } 111 | } 112 | elemenetGetId('sougouAn').onclick = () => { 113 | changeAn('sougouAn', 'sougou'); 114 | if (elemenetGetId('sougouAn').className == 'otherFeaturesBefore') { 115 | chrome.storage.sync.set({ 'sougou': 'hide' }); 116 | } else { 117 | chrome.storage.sync.set({ 'sougou': 'show' }); 118 | } 119 | } 120 | chrome.storage.sync.get(['google', 'bing', 'baidu', 'ddg', 'yandex', 'sougou', 'cus', 'cusSea'], (budget) => { 121 | let google = budget.google; 122 | let bing = budget.bing; 123 | let baidu = budget.baidu; 124 | let ddg = budget.ddg; 125 | let yandex = budget.yandex; 126 | let sougou = budget.sougou; 127 | let cus = budget.cus; 128 | function showLoadSearch(an, button) { 129 | elemenetGetId(an).className = 'otherFeatures'; 130 | if (an == 'cusAn') { 131 | elemenetGetId(an).innerText = '启用'; 132 | } else { 133 | elemenetGetId(an).innerText = '显示'; 134 | } 135 | elemenetGetId(button).style.display = ''; 136 | } 137 | function hideLoadSearch(an, button) { 138 | elemenetGetId(an).className = 'otherFeaturesBefore'; 139 | if (an == 'cusAn') { 140 | elemenetGetId(an).innerText = '禁用'; 141 | } else { 142 | elemenetGetId(an).innerText = '隐藏'; 143 | } 144 | elemenetGetId(button).style.display = 'none'; 145 | } 146 | if (typeof (google) == 'undefined') { 147 | google = 'show'; 148 | } 149 | if (typeof (bing) == 'undefined') { 150 | bing = 'show'; 151 | } 152 | if (typeof (baidu) == 'undefined') { 153 | baidu = 'show'; 154 | } 155 | if (typeof (ddg) == 'undefined') { 156 | ddg = 'hide'; 157 | } 158 | if (typeof (yandex) == 'undefined') { 159 | yandex = 'hide'; 160 | } 161 | if (typeof (sougou) == 'undefined') { 162 | sougou = 'hide'; 163 | } 164 | if (typeof (cus) == 'undefined') { 165 | cus = 'hide'; 166 | } 167 | if (google == 'show') { 168 | showLoadSearch('googleAn', 'google') 169 | } else if (google == 'hide') { 170 | hideLoadSearch('googleAn', 'google') 171 | } 172 | if (bing == 'show') { 173 | showLoadSearch('bingAn', 'bing') 174 | } else if (bing == 'hide') { 175 | hideLoadSearch('bingAn', 'bing') 176 | } 177 | if (baidu == 'show') { 178 | showLoadSearch('baiduAn', 'baidu') 179 | } else if (baidu == 'hide') { 180 | hideLoadSearch('baiduAn', 'baidu') 181 | } 182 | if (ddg == 'show') { 183 | showLoadSearch('ddgAn', 'ddg') 184 | } else if (ddg == 'hide') { 185 | hideLoadSearch('ddgAn', 'ddg') 186 | } 187 | if (yandex == 'show') { 188 | showLoadSearch('yandexAn', 'yandex') 189 | } else if (yandex == 'hide') { 190 | hideLoadSearch('yandexAn', 'yandex') 191 | } 192 | if (sougou == 'show') { 193 | showLoadSearch('sougouAn', 'sougou') 194 | } else if (sougou == 'hide') { 195 | hideLoadSearch('sougouAn', 'sougou') 196 | } 197 | if (cus == 'show') { 198 | showLoadSearch('cusAn', 'cus') 199 | elemenetGetId('seaIn').style.display = ''; 200 | elemenetGetClass('seaBtn')[0].style.borderRadius = '10px 10px 0px 0px'; 201 | chrome.storage.sync.get(['dlMode'], (budget) => { 202 | let dlMode = budget.dlMode; 203 | if (typeof (dlMode) == 'undefined') { 204 | dlMode = ''; 205 | } 206 | if (dlMode == '') { 207 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 208 | elemenetGetClass('seaBtn')[0].style.background = '#44444470' 209 | } else { 210 | elemenetGetClass('seaBtn')[0].style.background = '#ffffff70' 211 | } 212 | } else if (dlMode == 'dark') { 213 | elemenetGetClass('seaBtn')[0].style.background = '#44444470' 214 | } else if (dlMode == 'light') { 215 | elemenetGetClass('seaBtn')[0].style.background = '#ffffff70' 216 | } 217 | }) 218 | } else if (cus == 'hide') { 219 | hideLoadSearch('cusAn', 'cus') 220 | } 221 | }) 222 | } 223 | 224 | export function showOrHideSearch() { 225 | var hideSearchBar = elemenetGetId('hideSearchBar') 226 | hideSearchBar.onclick = () => { 227 | if (hideSearchBar.innerText == '显示') { 228 | hideSearchBar.innerText = '隐藏' 229 | hideSearchBar.className = 'otherFeaturesBefore' 230 | hideOrShow('hide') 231 | } else { 232 | hideSearchBar.innerText = '显示' 233 | hideSearchBar.className = 'otherFeatures' 234 | hideOrShow('show') 235 | } 236 | } 237 | function hideOrShow(hs) { 238 | if (hs == 'show') { 239 | elemIdSty('searchbar').display = '' 240 | chrome.storage.sync.set({ 'seaBarHS': hs }); 241 | } else { 242 | elemIdSty('searchbar').display = 'none' 243 | chrome.storage.sync.set({ 'seaBarHS': hs }); 244 | } 245 | } 246 | chrome.storage.sync.get(['seaBarHS'], (budget) => { 247 | var seaBarHS = budget.seaBarHS; 248 | if (typeof (seaBarHS) == 'undefined') { 249 | seaBarHS = 'show'; 250 | } 251 | if (seaBarHS == 'hide') { 252 | hideSearchBar.innerText = '隐藏' 253 | hideSearchBar.className = 'otherFeaturesBefore' 254 | elemIdSty('searchbar').display = 'none' 255 | } 256 | }) 257 | } 258 | -------------------------------------------------------------------------------- /newPage/js/main/dark2light.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId, elemenetGetClass } from './function.js' 2 | 3 | //dark mode to change style 4 | function dark(alpha) { 5 | elemenetGetId('click').style.background = '#000000' + alpha; 6 | document.getElementsByTagName('html')[0].className = 'dark'; 7 | elemenetGetId('hideImg').src = 'imgs/dark/hide.png'; 8 | elemenetGetId('historyImg').src = 'imgs/dark/fy_ic_history.png'; 9 | elemenetGetId('reloadImg').src = 'imgs/dark/reload.png'; 10 | elemenetGetId('calImg').src = 'imgs/dark/calculator.png'; 11 | elemenetGetId('clockImg').src = 'imgs/dark/timer.png'; 12 | elemenetGetId('settingImg').src = 'imgs/dark/setting.png'; 13 | elemenetGetId('downImg').src = 'imgs/dark/down.png'; 14 | elemenetGetId('infoImg').src = 'imgs/dark/info.png'; 15 | elemenetGetId('infoimgbefore').src = 'imgs/dark/back.png'; 16 | elemenetGetId('imgbefore').src = 'imgs/dark/back.png'; 17 | elemenetGetId('oneCloseImg').src = 'imgs/dark/close.png'; 18 | elemenetGetId('settingCloseImg').src = 'imgs/dark/close.png'; 19 | elemenetGetId('backSettingImg').src = 'imgs/dark/to.png'; 20 | elemenetGetClass('feaImg')[0].src = 'imgs/dark/hide.png'; 21 | elemenetGetClass('feaImg')[1].src = 'imgs/dark/fy_ic_history.png'; 22 | elemenetGetClass('feaImg')[2].src = 'imgs/dark/reload.png'; 23 | elemenetGetClass('feaImg')[3].src = 'imgs/dark/calculator.png'; 24 | elemenetGetClass('feaImg')[4].src = 'imgs/dark/timer.png'; 25 | elemenetGetClass('feaImg')[5].src = 'imgs/dark/down.png'; 26 | elemenetGetClass('feaImg')[6].src = 'imgs/dark/info.png'; 27 | elemenetGetId('dlAn').innerText = '暗色'; 28 | elemenetGetClass('otherBtn')[2].style.background = '#44444470'; 29 | elemenetGetClass('otherBtn')[2].style.borderRadius = '10px 10px 0px 0px'; 30 | elemenetGetClass('otherBtn')[3].style.display = ''; 31 | } 32 | 33 | //light mode to change style 34 | function light() { 35 | elemenetGetId('click').style.background = ''; 36 | document.getElementsByTagName('html')[0].className = ''; 37 | elemenetGetId('hideImg').src = 'imgs/hide.png'; 38 | elemenetGetId('historyImg').src = 'imgs/fy_ic_history.png'; 39 | elemenetGetId('reloadImg').src = 'imgs/reload.png'; 40 | elemenetGetId('calImg').src = 'imgs/calculator.png'; 41 | elemenetGetId('clockImg').src = 'imgs/timer.png'; 42 | elemenetGetId('settingImg').src = 'imgs/setting.png'; 43 | elemenetGetId('downImg').src = 'imgs/down.png'; 44 | elemenetGetId('infoImg').src = 'imgs/info.png'; 45 | elemenetGetId('infoimgbefore').src = 'imgs/back_black.png'; 46 | elemenetGetId('imgbefore').src = 'imgs/back_black.png'; 47 | elemenetGetId('oneCloseImg').src = 'imgs/close.png'; 48 | elemenetGetId('settingCloseImg').src = 'imgs/close.png'; 49 | elemenetGetId('backSettingImg').src = 'imgs/to.png'; 50 | elemenetGetClass('feaImg')[0].src = 'imgs/hide.png'; 51 | elemenetGetClass('feaImg')[1].src = 'imgs/fy_ic_history.png'; 52 | elemenetGetClass('feaImg')[2].src = 'imgs/reload.png'; 53 | elemenetGetClass('feaImg')[3].src = 'imgs/calculator.png'; 54 | elemenetGetClass('feaImg')[4].src = 'imgs/timer.png'; 55 | elemenetGetClass('feaImg')[5].src = 'imgs/down.png'; 56 | elemenetGetClass('feaImg')[6].src = 'imgs/info.png'; 57 | elemenetGetId('dlAn').innerText = '亮色' 58 | elemenetGetClass('otherBtn')[2].style.background = ''; 59 | elemenetGetClass('otherBtn')[2].style.borderRadius = ''; 60 | elemenetGetClass('otherBtn')[3].style.display = 'none'; 61 | 62 | } 63 | 64 | export function loadTheme() { 65 | //onload to dark or light mode 66 | chrome.storage.sync.get(['dlMode', 'alphaColor', 'dlAlpha'], function (budget) { 67 | let dlMode = budget.dlMode; 68 | let alphaColor = budget.alphaColor; 69 | let dlAlpha = budget.dlAlpha; 70 | if (typeof (dlMode) == 'undefined') { 71 | dlMode = ''; 72 | } 73 | if (typeof (alphaColor) == 'undefined') { 74 | alphaColor = '50'; 75 | } 76 | if (typeof (dlAlpha) == 'undefined') { 77 | dlAlpha = 'show'; 78 | } 79 | elemenetGetId('click').className = alphaColor; 80 | if (dlAlpha == 'hide') { 81 | alphaColor = '00'; 82 | elemenetGetId('blackBackShow').innerText = '隐藏'; 83 | elemenetGetId('blackBackShow').className = 'otherFeaturesBefore'; 84 | elemenetGetId('backAlpha').style.display = 'none'; 85 | elemenetGetClass('dlMore')[1].style.display = 'none'; 86 | elemenetGetClass('dlMore')[0].style.marginBottom = ''; 87 | elemenetGetId('click').style.background = '#00000000'; 88 | } 89 | if (dlMode == '') { 90 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 91 | dark(alphaColor); 92 | } 93 | window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { 94 | if (event.matches) { 95 | dark(alphaColor); 96 | } else { 97 | light(); 98 | } 99 | }) 100 | } else if (dlMode == 'dark') { 101 | dark(alphaColor); 102 | elemenetGetId('click').className = alphaColor; 103 | elemenetGetId('colorMode').innerText = '深色模式' 104 | elemenetGetId('reDlAn').className = 'otherFeaturesBefore' 105 | } else { 106 | elemenetGetId('colorMode').innerText = '亮色模式' 107 | elemenetGetId('reDlAn').className = 'otherFeaturesBefore' 108 | } 109 | elemenetGetId('backAlpha').innerText = '当前背景暗色遮罩深度为：' + alphaColor; 110 | }) 111 | } 112 | 113 | //customize the dark or light mode 114 | export function dlUse() { 115 | elemenetGetId('dlAn').onclick = function () { 116 | if (elemenetGetId('dlAn').innerText == '暗色') { 117 | light(); 118 | elemenetGetId('otherSettings').style.background = '#ffffff70'; 119 | chrome.storage.sync.set({ 'dlMode': 'light' }); 120 | if (elemenetGetId('loadingAn').innerText == '隐藏') { 121 | elemenetGetClass('otherBtn')[1].style.background = '#ffffff50'; 122 | } else { 123 | elemenetGetClass('otherBtn')[1].style.background = '#ffffff90'; 124 | } 125 | elemenetGetId('colorMode').innerText = '亮色模式'; 126 | } else { 127 | dark(elemenetGetId('click').className); 128 | elemenetGetId('otherSettings').style.background = '#44444470'; 129 | chrome.storage.sync.set({ 'dlMode': 'dark' }); 130 | if (elemenetGetId('loadingAn').innerText == '隐藏') { 131 | elemenetGetClass('otherBtn')[1].style.background = '#44444450'; 132 | } else { 133 | elemenetGetClass('otherBtn')[1].style.background = '#44444490'; 134 | } 135 | elemenetGetId('colorMode').innerText = '深色模式' 136 | } 137 | elemenetGetId('reDlAn').className = 'otherFeaturesBefore' 138 | } 139 | elemenetGetId('reDlAn').onclick = function () { 140 | chrome.storage.sync.set({ 'dlMode': '' }); 141 | location.reload(); 142 | } 143 | elemenetGetId('setBackAlpha').onclick = function () { 144 | let alphaColor = elemenetGetId('blackBackColor').value; 145 | if (Number(alphaColor) < 10) { 146 | alphaColor = '0' + alphaColor; 147 | } 148 | chrome.storage.sync.set({ 'alphaColor': alphaColor }); 149 | dark(alphaColor); 150 | elemenetGetId('click').className = alphaColor; 151 | elemenetGetId('backAlpha').innerText = '当前背景暗色遮罩深度为：' + alphaColor; 152 | } 153 | elemenetGetId('blackBackShow').onclick = function () { 154 | let isHide = elemenetGetId('blackBackShow').innerText; 155 | let alphaColor = elemenetGetId('click').className; 156 | if (isHide == '显示') { 157 | elemenetGetId('blackBackShow').innerText = '隐藏'; 158 | elemenetGetId('blackBackShow').className = 'otherFeaturesBefore'; 159 | elemenetGetId('backAlpha').style.display = 'none'; 160 | elemenetGetClass('dlMore')[1].style.display = 'none'; 161 | elemenetGetClass('dlMore')[0].style.marginBottom = ''; 162 | elemenetGetId('click').style.background = '#00000000'; 163 | chrome.storage.sync.set({ 'dlAlpha': 'hide' }); 164 | } else { 165 | elemenetGetId('blackBackShow').innerText = '显示'; 166 | elemenetGetId('blackBackShow').className = 'otherFeatures'; 167 | elemenetGetId('backAlpha').style.display = ''; 168 | elemenetGetClass('dlMore')[1].style.display = ''; 169 | elemenetGetClass('dlMore')[0].style.marginBottom = '10px'; 170 | elemenetGetId('click').style.background = '#000000' + alphaColor; 171 | chrome.storage.sync.set({ 'dlAlpha': 'show' }); 172 | } 173 | } 174 | } -------------------------------------------------------------------------------- /newPage/js/main/function.js: -------------------------------------------------------------------------------- 1 | //set function 2 | export function elemenetGetId(id) { 3 | return document.getElementById(id); 4 | } 5 | export function elemIdSty(id) { 6 | return document.getElementById(id).style; 7 | } 8 | export function elemenetGetClass(name) { 9 | return document.getElementsByClassName(name); 10 | } 11 | export function elemClassSty(name, num) { 12 | return document.getElementsByClassName(name)[num].style; 13 | } 14 | export function body() { 15 | return document.body; 16 | } 17 | export function clog(str) { 18 | return console.log(str); 19 | } 20 | 21 | //This is show all element function 22 | export function onShow() { 23 | elemenetGetId('mainlink').style.display = ""; //show link element 24 | elemenetGetId('button').hidden = false; //show bottom button 25 | elemenetGetId('history').hidden = false; //show history button 26 | elemenetGetId('reload').hidden = false; //show reload button 27 | elemenetGetId('info').hidden = false; //show info button 28 | elemenetGetId('cal').hidden = false; // show calculator button 29 | elemenetGetId('hide').hidden = false; // show hide button 30 | elemenetGetId('searchbar').style.display = ""; //show searchBar button 31 | elemenetGetId('clock').hidden = false; //show clock button 32 | elemenetGetId('down').hidden = false; 33 | elemenetGetId('settings').hidden = false; 34 | elemenetGetId('weather').style.display = ''; 35 | } 36 | 37 | //This is hide all element function 38 | export function onHide() { 39 | elemenetGetId("mainlink").style.display = "none"; //hide link elemnet 40 | elemenetGetId('button').hidden = true; //hide bottom button 41 | elemenetGetId('history').hidden = true; //hide history button 42 | elemenetGetId('reload').hidden = true; //hide reload button 43 | elemenetGetId('info').hidden = true; //hide info button 44 | elemenetGetId('cal').hidden = true; //hide calculator button 45 | elemenetGetId('hide').hidden = true; //hide hide button 46 | elemenetGetId('searchbar').style.display = "none"; //hide searchBar button 47 | elemenetGetId('clock').hidden = true; //hide clock button 48 | elemenetGetId('down').hidden = true; 49 | elemenetGetId('settings').hidden = true; 50 | elemenetGetId('weather').style.display = 'none'; 51 | } -------------------------------------------------------------------------------- /newPage/js/main/index.js: -------------------------------------------------------------------------------- 1 | import settingUse from './settings.js' 2 | import printInfo from './print.js' 3 | import { hsFeatureUse } from '../features/hsFeature.js' 4 | import { hsLinkUse } from '../features/hsLink.js' 5 | import { useLinkChange } from '../features/changeLink.js' 6 | import { loadTheme, dlUse } from './dark2light.js' 7 | import { getTime, fesUse, otherSettingOnLoad, changeStyle } from './onLoadFeature.js' 8 | import { searchUse, showOrHideSearch } from '../features/search.js' 9 | 10 | printInfo();//prtint info 11 | 12 | document.addEventListener('DOMContentLoaded', () => { 13 | settingUse(); 14 | loadTheme(); 15 | fesUse(); 16 | otherSettingOnLoad(); 17 | dlUse(); 18 | hsFeatureUse(); 19 | hsLinkUse(); 20 | useLinkChange(); 21 | getTime(); 22 | changeStyle(); 23 | searchUse(); 24 | showOrHideSearch(); 25 | }) 26 | -------------------------------------------------------------------------------- /newPage/js/main/onLoadFeature.js: -------------------------------------------------------------------------------- 1 | import { elemenetGetId, elemenetGetClass, body, onHide, onShow } from "./function.js"; 2 | import { loadHs } from "../features/hsFeature.js"; 3 | 4 | export function getTime() { 5 | //with onload to get now time 6 | setInterval(() => { 7 | var time = new Date(); 8 | var timeele = elemenetGetId('time') 9 | var h = time.getHours(); 10 | var m = time.getMinutes(); 11 | var s = time.getSeconds(); 12 | 13 | if (h < 10) { 14 | h = '0' + h; 15 | } 16 | if (m < 10) { 17 | m = '0' + m 18 | } 19 | if (s < 10) { 20 | s = '0' + s 21 | } 22 | 23 | timeele.innerHTML = h + ":" + m + ":" + s; 24 | }, 1000) 25 | } 26 | 27 | //other feature to use with onload 28 | export function fesUse() { 29 | //download picture 30 | elemenetGetId('down').onclick = () => { 31 | chrome.downloads.download({ 32 | url: elemenetGetId('picurl').className, 33 | filename: "pic-" + Math.ceil(Math.random() * 1000) + ".png" 34 | }); 35 | } 36 | 37 | //This is historybar function 38 | elemenetGetId('history').onclick = () => { 39 | elemenetGetId('bar').className = 'barSel'; //change historyBar style to barSelect style 40 | elemenetGetId('imgbefore').className = 'imgafter' //change historyBarIcon style to historyBarIconSelect style1 41 | elemenetGetId('click').onclick = () => { 42 | elemenetGetId('bar').className = 'bar'; //change hidtoryBar style to barBefore style 43 | elemenetGetId('imgbefore').className = 'imgbefore' //change historyBarIcon style to historyBayIconBefore style 44 | } 45 | } 46 | 47 | //This is historybar back function 48 | elemenetGetId('historyback').onclick = () => { 49 | elemenetGetId('bar').className = 'bar'; //change hidtoryBar style to barBefore style 50 | elemenetGetId('imgbefore').className = 'imgbefore' //change historyBarIcon style to historyBayIconBefore style 51 | } 52 | 53 | elemenetGetId('reload').onclick = () => { 54 | location.reload(); 55 | } 56 | 57 | //This is calculator function 58 | elemenetGetId('cal').onclick = () => { 59 | var screenWidth = window.innerWidth; 60 | var hide = elemenetGetId('button').hidden; 61 | if (hide == false) { 62 | elemenetGetId('mainCal').hidden = false; //show calculator element 63 | onHide(); 64 | elemenetGetId('cal').hidden = false; //show calculator button 65 | if (screenWidth <= 813) { 66 | elemenetGetId('cal').style.marginLeft = '0px'; 67 | } 68 | } else { 69 | elemenetGetId('mainCal').hidden = true; //hide calculator element 70 | chrome.storage.local.get(['hideHS', 'historyHS', 'reloadHS', 'calHS', 'timeHS', 'weatherHS', 'downHS', 'infoHS', 'oneHS', 'hs'], function (budget) { 71 | let hideHS = budget.hideHS; 72 | let historyHS = budget.historyHS; 73 | let reloadHS = budget.reloadHS; 74 | let calHS = budget.calHS; 75 | let timeHS = budget.timeHS; 76 | let weatherHS = budget.weatherHS; 77 | let downHS = budget.downHS; 78 | let infoHS = budget.infoHS; 79 | let oneHS = budget.oneHS; 80 | var hide = elemenetGetId('hide'); 81 | var info = elemenetGetId('info'); 82 | let hs = budget.hs; 83 | loadHs(hideHS, historyHS, reloadHS, calHS, timeHS, weatherHS, downHS, infoHS, oneHS, hs, hide, info) 84 | }) 85 | if (screenWidth <= 813) { 86 | elemenetGetId('history').hidden = true; //hide history button 87 | elemenetGetId('clock').hidden = true; //hide clock button 88 | elemenetGetId('cal').style.marginLeft = '20px'; 89 | } 90 | } 91 | } 92 | 93 | //show clock in page 94 | elemenetGetId('clock').onclick = () => { 95 | var hide = elemenetGetId('button').hidden; 96 | if (hide == false) { 97 | elemenetGetId('mainClock').style.display = ""; //show clock element 98 | onHide(); 99 | elemenetGetId('clock').hidden = false; //show calculator button 100 | } else { 101 | elemenetGetId('mainClock').style.display = "none"; //hide clock element 102 | chrome.storage.local.get(['hideHS', 'historyHS', 'reloadHS', 'calHS', 'timeHS', 'weatherHS', 'downHS', 'infoHS', 'oneHS', 'hs'], function (budget) { 103 | let hideHS = budget.hideHS; 104 | let historyHS = budget.historyHS; 105 | let reloadHS = budget.reloadHS; 106 | let calHS = budget.calHS; 107 | let timeHS = budget.timeHS; 108 | let weatherHS = budget.weatherHS; 109 | let downHS = budget.downHS; 110 | let infoHS = budget.infoHS; 111 | let oneHS = budget.oneHS; 112 | var hide = elemenetGetId('hide'); 113 | var info = elemenetGetId('info'); 114 | let hs = budget.hs; 115 | loadHs(hideHS, historyHS, reloadHS, calHS, timeHS, weatherHS, downHS, infoHS, oneHS, hs, hide, info) 116 | }) 117 | } 118 | } 119 | } 120 | 121 | //other default function to use with onload 122 | export function otherSettingOnLoad() { 123 | //loading animation setting load with page onload 124 | chrome.storage.local.get(['loadingAn', 'loadingTime'], (budget) => { 125 | var loadingAn = budget.loadingAn; 126 | var loadingTime = budget.loadingTime; 127 | if (typeof (loadingTime) == 'undefined') { 128 | loadingTime = '300'; 129 | }//set default loadingTime to 300 130 | elemenetGetId('newTimeout').innerHTML = loadingTime; 131 | if (loadingAn == 'show') { 132 | //loading animation show style 133 | elemenetGetId('loadingAn').className = 'otherFeatures'; 134 | elemenetGetId('loadingAn').innerText = '显示'; 135 | elemenetGetId('loading').style.zIndex = '300'; 136 | elemenetGetId('loading').style.display = ''; 137 | elemenetGetId('loadingTimeBtn').style.display = ''; 138 | elemenetGetClass('otherBtn')[0].style.borderRadius = '10px 10px 0px 0px'; 139 | elemenetGetClass('otherBtn')[0].style.borderBottom = '1px solid #00000020'; 140 | //at dark or light mode to show style 141 | chrome.storage.sync.get(['dlMode'], (budget) => { 142 | let dlMode = budget.dlMode; 143 | if (typeof (dlMode) == 'undefined') { 144 | dlMode = ''; 145 | } 146 | if (dlMode == '') { 147 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 148 | elemenetGetClass('otherBtn')[0].style.backgroundColor = '#44444490'; 149 | } else { 150 | elemenetGetClass('otherBtn')[0].style.backgroundColor = '#ffffff90'; 151 | } 152 | } else if (dlMode == 'dark') { 153 | elemenetGetClass('otherBtn')[0].style.backgroundColor = '#44444490'; 154 | } else if (dlMode == 'light') { 155 | elemenetGetClass('otherBtn')[0].style.backgroundColor = '#ffffff90'; 156 | } 157 | }) 158 | //loading animation time setting 159 | setTimeout(() => { 160 | elemenetGetId('loading').style.zIndex = '-3'; 161 | elemenetGetId('loading').style.display = 'none'; 162 | }, Number(loadingTime)) 163 | } 164 | }) 165 | 166 | //dark or light mode setting load with page onload 167 | chrome.storage.sync.get(['dlMode'], (budget) => { 168 | let dlMode = budget.dlMode; 169 | if (typeof (dlMode) == 'undefined') { 170 | dlMode = ''; 171 | }//set default dlMode to with system 172 | if (dlMode == '') { 173 | //white system dark or light mode load 174 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 175 | if (elemenetGetId('loadingAn').innerText == '隐藏') { 176 | elemenetGetClass('otherBtn')[0].style.background = '#44444450'; 177 | } else { 178 | elemenetGetClass('otherBtn')[0].style.background = '#44444490'; 179 | } 180 | } 181 | } else if (dlMode == 'dark') { 182 | //use costom dark mode 183 | if (elemenetGetId('loadingAn').innerText == '隐藏') { 184 | elemenetGetClass('otherBtn')[0].style.background = '#44444450'; 185 | } else { 186 | elemenetGetClass('otherBtn')[0].style.background = '#44444490'; 187 | } 188 | } 189 | }) 190 | } 191 | 192 | //mobile page style 193 | export function changeStyle() { 194 | var screenWidth = window.innerWidth;//get screen width 195 | var screenHeight = document.documentElement.clientHeight; 196 | var bottom_right = elemenetGetId('bottom-right'); 197 | var down = elemenetGetId('down'); 198 | var searchbar = elemenetGetId('searchbar'); 199 | var mainlink = elemenetGetId('mainlink'); 200 | var title = elemenetGetId('title'); 201 | var cal = elemenetGetId('cal'); 202 | var clock = elemenetGetId('clock'); 203 | var history = elemenetGetId('history'); 204 | var button = elemenetGetId('button'); 205 | var oneMain = elemenetGetId('oneMain'); 206 | var azure = elemenetGetId('azure'); 207 | var ithome = elemenetGetId('ithome'); 208 | var chromeStore = elemenetGetId('chromeStore'); 209 | var aliyun = elemenetGetId('aliyun'); 210 | var main = elemenetGetId('main'); 211 | var backgroundSetButton = elemenetGetId('backgroundSetButton'); 212 | var backgroundBefore = elemenetGetId('backgroundBefore'); 213 | var msgTitleColor = ''; 214 | //if screen is phone to phone style 215 | if (screenWidth <= 813) { 216 | bottom_right.style.marginTop = '15px'; 217 | bottom_right.style.top = '0'; 218 | bottom_right.style.bottom = ''; 219 | down.style.marginBottom = '-50px'; 220 | down.style.marginLeft = '-65px'; 221 | searchbar.style.width = '324px';//set search bar to phone style 222 | mainlink.style.width = '366px';//set links to phone style 223 | title.style.display = 'flex'; 224 | //set tools button style 225 | title.style.justifyContent = 'center'; 226 | title.style.bottom = '0'; 227 | title.style.top = ''; 228 | title.style.width = '100%'; 229 | title.style.marginBottom = '5vh'; 230 | cal.style.marginRight = '0';//set calculator button margin right to 0px 231 | clock.hidden = true; //hide clock button 232 | history.hidden = true; //hide history button 233 | button.style.maxWidth = '280px'; 234 | button.style.zIndex = '100'; 235 | oneMain.style.width = '0px'; 236 | oneMain.style.height = '0px'; 237 | oneMain.style.padding = '0px'; 238 | oneMain.className = 'oneMainBeforeMobile'; 239 | //hide links button 240 | azure.hidden = true; 241 | ithome.hidden = true; 242 | chromeStore.hidden = true; 243 | aliyun.hidden = true; 244 | main.style.marginTop = - (screenHeight / 4) + 20 + 'px';//set search area margin top 245 | backgroundSetButton.style.flex = '1'; 246 | backgroundBefore.style.flex = '1'; 247 | elemenetGetId('infoBar').style.height = screenHeight + 'px'; 248 | elemenetGetId('background').style.height = screenHeight + 'px'; 249 | elemenetGetId('settings').style.marginTop = '15px'; 250 | elemenetGetId('historyFeatureBtn').style.display = 'none'; 251 | elemenetGetId('clockFeatureBtn').style.display = 'none'; 252 | elemenetGetId('hide').style.marginRight = '0px'; 253 | elemenetGetId('reload').style.marginLeft = '20px'; 254 | elemenetGetId('reload').style.marginRight = '0px'; 255 | elemenetGetId('cal').style.marginLeft = '20px'; 256 | elemenetGetId('link6Btn').style.display = 'none'; 257 | elemenetGetId('link7Btn').style.display = 'none'; 258 | elemenetGetId('link8Btn').style.display = 'none'; 259 | elemenetGetId('link9Btn').style.display = 'none'; 260 | elemenetGetId('backgroundSettings').style.backgroundColor = 'transparent'; 261 | elemenetGetId('exImgs').style.display = 'none'; 262 | elemenetGetId('searchEngines').style.maxWidth = '300px'; 263 | elemenetGetId('settingCloseButton').style.top = '20px'; 264 | elemenetGetId('settingCloseButton').style.right = '20px'; 265 | elemenetGetId('top-right').style.display = 'flex'; 266 | elemenetGetId('top-right').style.flexDirection = 'row'; 267 | elemenetGetId('weather').style.marginTop = '15px'; 268 | elemenetGetId('top-right').style.zIndex = 102; 269 | elemenetGetId('apiImgs').style.display = 'none'; 270 | elemenetGetId('mobileApiImgs').style.display = ''; 271 | elemenetGetClass('mobileExImgs')[0].style.display = ''; 272 | elemenetGetClass('donateMsg')[0].style.borderRadius = '10px'; 273 | elemenetGetClass('donateMsg')[0].style.padding = '10px'; 274 | //if in dark mode change some style 275 | chrome.storage.sync.get(['dlMode'], (budget) => { 276 | let dlMode = budget.dlMode; 277 | if (typeof (dlMode) == 'undefined') { 278 | dlMode = ''; 279 | } 280 | if (dlMode == '') { 281 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 282 | msgTitleColor = '#44444450'; 283 | } else { 284 | msgTitleColor = '#ffffff70'; 285 | } 286 | } else if (dlMode == 'dark') { 287 | msgTitleColor = '#44444450'; 288 | } else if (dlMode == 'light') { 289 | msgTitleColor = '#ffffff70'; 290 | } 291 | function titleBack(num) { 292 | elemenetGetClass('backgroundTitile')[num].style.backgroundColor = msgTitleColor; 293 | elemenetGetClass('backgroundTitile')[num].style.borderRadius = '10px'; 294 | elemenetGetClass('backgroundTitile')[num].style.padding = '10px'; 295 | if (num == 0 || num == 1 || num == 2 || num == 3) { 296 | elemenetGetClass('backgroundTitile')[num].style.width = 'fit-content'; 297 | } 298 | if (num == 1) { 299 | elemenetGetClass('backgroundTitile')[num].style.marginTop = '10px'; 300 | } 301 | } 302 | elemenetGetClass('donateMsg')[0].style.backgroundColor = msgTitleColor; 303 | titleBack(0); 304 | titleBack(1); 305 | titleBack(2); 306 | titleBack(3); 307 | titleBack(4); 308 | titleBack(5); 309 | titleBack(6); 310 | }) 311 | //in mobile with keyboard on screen to change some button hide 312 | window.onresize = () => { 313 | var nowHeight = document.documentElement.clientHeight; 314 | if (screenHeight - nowHeight > 50) { 315 | elemenetGetId('button').style.marginBottom = '-60px'; 316 | elemenetGetId('title').style.marginBottom = '-60px'; 317 | } else { 318 | elemenetGetId('button').style.marginBottom = '20vh'; 319 | elemenetGetId('title').style.marginBottom = '5vh'; 320 | } 321 | } 322 | chrome.storage.local.get(['oneHS'], (budget) => { 323 | var oneHS = budget.oneHS; 324 | if (typeof (oneHS) == 'undefined') { 325 | oneHS = 'show'; 326 | } 327 | if (oneHS == 'show') { 328 | button.addEventListener('DOMNodeInserted', () => { 329 | button.style.marginBottom = '20vh';//chenge ui button 330 | }) 331 | } 332 | }) 333 | } else { 334 | //in desktop mode to change some style 335 | chrome.storage.local.get(['oneHS'], (budget) => { 336 | var oneHS = budget.oneHS; 337 | if (typeof (oneHS) == 'undefined') { 338 | oneHS = 'show'; 339 | } 340 | if (oneHS == 'show') { 341 | button.addEventListener('DOMNodeInserted', () => { 342 | button.style.marginBottom = '20px' 343 | }) 344 | } 345 | }) 346 | oneMain.className = 'oneMainBefore'; 347 | } 348 | } -------------------------------------------------------------------------------- /newPage/js/main/print.js: -------------------------------------------------------------------------------- 1 | import { clog } from './function.js' 2 | 3 | export default function printInfo () { 4 | clog('▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇') 5 | clog('▇▇▇▇▇▇hello world！▇▇▇▇▇▇') 6 | clog('▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇') 7 | clog('') 8 | clog('QQ: 1848367623') 9 | clog('Twitter: @Tony_Lu110') 10 | clog('github: https://github.com/tonylu110') 11 | clog('') 12 | clog('This project link is https://github.com/tonylu110/uyouNewTab') 13 | } -------------------------------------------------------------------------------- /newPage/js/main/settings.js: -------------------------------------------------------------------------------- 1 | import { moreSearch } from '../features/search.js'; 2 | import { useChangeLink } from '../features/changeLink.js'; 3 | 4 | export default function settingUse() { 5 | //other setting feature 6 | useChangeLink();//change link function 7 | moreSearch();//more search function 8 | } 9 | -------------------------------------------------------------------------------- /newPage/util/isMobile.js: -------------------------------------------------------------------------------- 1 | export default () => window.innerWidth < 813 -------------------------------------------------------------------------------- /newPage/util/reactivity.js: -------------------------------------------------------------------------------- 1 | export default function Observer(obj, domNode) { 2 | const domTree = document.querySelector(domNode) 3 | if (!obj || typeof obj !== 'object') return 4 | Object.keys(obj).forEach(key => { 5 | let value = obj[key] 6 | checkDom(domTree, key, value) 7 | Observer(value) 8 | Object.defineProperty(obj, key, { 9 | enumerable: true, 10 | configurable: true, 11 | get: () => { 12 | return value 13 | }, 14 | set: (newValue) => { 15 | value = newValue 16 | Observer(newValue) 17 | checkDom(domTree, key, newValue) 18 | } 19 | }) 20 | }) 21 | } 22 | 23 | function checkDom (domTree, key, newValue) { 24 | domTree.childNodes.forEach(item => { 25 | if (item.tagName === 'INPUT' && item.getAttribute('data-bind') === key) { 26 | item.value = newValue 27 | } else if (item instanceof HTMLElement && item.getAttribute('data-bind') === key) { 28 | item.innerText = newValue 29 | } else { 30 | haveBind(item, key, newValue) 31 | } 32 | }) 33 | } 34 | 35 | function haveBind(dom, key, newValue) { 36 | if (dom.attributes === undefined) { 37 | return 38 | } else { 39 | for(let i = 0; i < dom.attributes.length; i++) { 40 | if (dom.attributes.item(i).name.indexOf('bind-') > -1 && dom.attributes.item(i).value === key) { 41 | const att = dom.attributes.item(i).name.substr(dom.attributes.item(i).name.lastIndexOf("-") + 1) 42 | dom[att] = newValue 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /popupPage/extension.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

欢迎使用 uyou 新标签页

13 |
14 |
回到主页
15 |
前往官网
16 |
17 |
当前版本：
18 |
19 |
版本：1.2.9
20 |
恢复背景下载功能
21 |
恢复隐藏背景下载功能
22 |
修复了一些其他 Bug
23 |
24 |
历史版本：
25 |
26 |
版本：1.2.8
27 |
修复了搜索栏 Bug
28 |
修复了一些其他 Bug
29 |
30 |
31 |
版本：1.2.7
32 |
更换默认背景加载逻辑
33 |
更换默认背景 API
34 |
35 |
36 |
版本：1.2.6
37 |
修复背景加载
38 |
取消了背景下载功能
39 |
40 |
41 |
版本：1.2.5
42 |
修复一言无法隐藏
43 |
44 |
45 |
版本：1.2.4
46 |
修复在线图片加载问题
47 |
48 |
49 |
版本：1.2.3
50 |
新增隐藏搜索栏功能
51 |
修复了部分功能按钮使用后显示问题
52 |
修复了一些移动端 ui 显示
53 |
删除了一言功能上移动画
54 |
55 |
56 |
版本：1.2.2
57 |
重构部分代码
58 |
新增搜索引擎选择弹出动画
59 |
新增自定义壁纸api
60 |
61 |
62 |
版本：1.2.1
63 |
新增暗色模式下细节设置
64 |
新增输入关键字后显示搜索按钮功能
65 |
优化了移动端 ui 加载细节
66 |
修改了一些 ui 细节
67 |
68 |
69 |
版本：1.2.0
70 |
新增暗色模式
71 |
新增自定义颜色模式功能
72 |
新增自定义搜索引擎功能
73 |
移动端天气功能新增动画
74 |
修复有关点击空白处关闭页面的部分 bug
75 |
修复了一些 ui 显示 bug
76 |
77 |
78 |
版本：1.1.5
79 |
新增更多自动切换图片源
80 |
优化天气功能显示
81 |
优化搜索栏图标
82 |
83 |
84 |
版本：1.1.4
85 |
新增天气功能
86 |
新增点击空白区域关闭设置/一言功能
87 |
新增点击空白区域关闭关于/历史记录功能
88 |
89 |
90 |
版本：1.1.3
91 |
优化了移动端扩展菜单样式
92 |
修复隐藏功能后加载开始时会显示原布局的bug
93 |
修复隐藏书签后加载开始时会显示原布局的bug
94 |
修复修改书签后加载开始时会显示原布局的bug
95 |
修复了其他类似的bug
96 |
97 |
98 |
版本：1.1.2
99 |
重新设计的移动端设置二级菜单
100 |
新增更多搜索引擎
101 |
新增加载动画时间设置
102 |
修复了部分移动端浏览器搜索引擎栏显示 bug
103 |
104 |
105 |
版本：1.1.1
106 |
移动端可选择本地离线图片为背景
107 |
修复了一些移动端机型的显示bug
108 |
修复了计算器功能
109 |
110 |
111 |
版本：1.1.0
112 |
新的设置页面让你耳目一新
113 |
新增选择本地离线图片为背景
114 |
新增刷新加载动画
115 |
适配 manifest version 3
116 |
修复了一些 Bug
117 |
118 |
119 |
版本：1.0.1
120 |
精简插件大小
121 |
修复了一些 Bug
122 |
123 |
124 |
版本：1.0.0
125 |
第一个 1.0.0 版本
126 |
新增修改书签功能
127 |
修复了一些 Bug
128 |
129 |
130 |
版本：0.3.0
131 |
新增修改功能按钮是否显示功能
132 |
新增书签是否显示功能
133 |
修复了一些 Bug
134 |
135 |
136 |
版本：0.2.1
137 |
新增设置在线背景功能
138 |
修复了一些 Bug
139 |
140 |
141 |
版本：0.2.0
142 |
新增下载背景功能
143 |
新增设置功能（更改自定义背景）
144 |
新增帮助功能
145 |
146 | 147 | -------------------------------------------------------------------------------- /popupPage/popup.js: -------------------------------------------------------------------------------- 1 | window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => { 2 | if (event.matches) { 3 | document.getElementsByTagName('html')[0].className = 'dark'; 4 | } else { 5 | document.getElementsByTagName('html')[0].className = ''; 6 | } 7 | }) 8 | window.onload = function () { 9 | document.getElementById('home').onclick = function () { 10 | chrome.tabs.create({ 11 | url: 'chrome://newtab' 12 | }); 13 | } 14 | document.getElementById('web').onclick = function () { 15 | chrome.tabs.create({ 16 | url: 'https://newtab.uyou.org.cn/' 17 | }); 18 | } 19 | if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { 20 | document.getElementById('body').style.width = '100vw'; 21 | } 22 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { 23 | document.getElementsByTagName('html')[0].className = 'dark'; 24 | } 25 | } -------------------------------------------------------------------------------- /popupPage/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --backgroundColor: white; 3 | --fontColor: black; 4 | --messageColor: #eee 5 | } 6 | 7 | :root.dark{ 8 | --backgroundColor: #111; 9 | --fontColor: #999; 10 | --messageColor: #222; 11 | } 12 | 13 | ::-webkit-scrollbar { 14 | display: none; /* Chrome Safari */ 15 | } 16 | 17 | body{ 18 | margin: 0; 19 | width: 320px; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | height: 100vh; 24 | background-size: cover; 25 | background-color: var(--backgroundColor); 26 | color: var(--fontColor); 27 | } 28 | 29 | #home{ 30 | background-color: #0078d4; 31 | width: 100%; 32 | color: white; 33 | border-radius: 5px; 34 | padding: 10px; 35 | font-size: 17px; 36 | font-weight: bold; 37 | text-align: center; 38 | cursor:pointer; 39 | margin-bottom: 10px; 40 | margin-right: 10px; 41 | } 42 | #web{ 43 | background-color: #1EC22C; 44 | width: 100%; 45 | color: white; 46 | border-radius: 5px; 47 | padding: 10px; 48 | font-size: 17px; 49 | font-weight: bold; 50 | text-align: center; 51 | cursor:pointer; 52 | margin-bottom: 10px; 53 | } 54 | #web:active{ 55 | background-color: #0c8015; 56 | } 57 | .buttons{ 58 | width: 90%; 59 | display: flex; 60 | flex-direction: row; 61 | justify-content: center; 62 | align-items: center; 63 | } 64 | 65 | .message{ 66 | width: 88%; 67 | padding: 10px; 68 | margin-top: 5px; 69 | margin-bottom: 5px; 70 | font-size: 20px; 71 | background-color: var(--messageColor); 72 | border-radius: 10px; 73 | display: flex; 74 | flex-direction: column; 75 | align-items: flex-start; 76 | } 77 | .Title{ 78 | font-size: 17px; 79 | font-weight: bold; 80 | width: 85%; 81 | } 82 | .new{ 83 | margin-bottom: 5px; 84 | } 85 | .old{ 86 | margin-top: 15px; 87 | margin-bottom: 5px; 88 | } 89 | 90 | .v{ 91 | font-size: 15px; 92 | font-weight: bold; 93 | margin-bottom: 5px; 94 | } 95 | .info{ 96 | font-size: 13px; 97 | } --------------------------------------------------------------------------------