// ==UserScript== // @name 聚合搜索引擎切换导航 + GitHub增强(移动端优化) // @namespace http://tampermonkey.net/ // @version v1.40 // @author 晚风知我意 // @match *://*/* // @grant unsafeWindow // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @grant GM_xmlhttpRequest // @connect github.com // @connect raw.githubusercontent.com // @connect api.github.com // @icon https://hub.gitmirror.com/https://raw.githubusercontent.com/qq5855144/greasyfork/main/shousuo.svg // @run-at document-body // @license MIT // @description * 搜索引擎快捷工具 + GitHub搜索结果增强 * 核心功能：页面底部搜索引擎快捷栏、GitHub搜索结果显示部署网站和发布版本标签、拖拽排序、自定义引擎管理、快捷搜索 // ==/UserScript== // ===== GitHub 功能模块 ===== const githubEnhancer = { CONFIG: { checkInterval: 1000, maxRetries: 3, deploymentKeywords: { 'github.io': true, 'vercel.app': true, 'netlify.app': true, 'herokuapp.com': true, 'firebaseapp.com': true, 'pages.dev': true, 'railway.app': true, 'render.com': true, 'surge.sh': true, 'gitlab.io': true }, excludedExtensions: [ '.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp', '.svg', '.ico', '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.zip', '.rar', '.7z', '.tar', '.gz', '.md', '.txt', '.json', '.xml', '.yml', '.yaml', '.js', '.ts', '.jsx', '.tsx', '.css', '.scss', '.less', '.java', '.py', '.rb', '.php', '.go', '.rs', '.cpp', '.c', '.h', '.html', '.htm', '.vue', '.svelte', '.csv', '.tsv', '.sql', '.db', '.woff', '.woff2', '.ttf', '.eot', '.mp4', '.avi', '.mov', '.mp3', '.wav', '.flac', '.log', '.lock', '.env', '.gitignore', '.dockerfile' ] }, ICONS: { deployment: ``, releases: `` }, processedRepos: new Set(), init() { if (this.isGitHubSearchPage()) { this.injectGitHubStyles(); this.startGitHubProcessing(); this.initGitHubObserver(); } }, isGitHubSearchPage() { return window.location.hostname === 'github.com' && (window.location.pathname === '/search' || window.location.pathname.includes('/search')); }, injectGitHubStyles() { const style = document.createElement('style'); style.textContent = ` .github-search-tag { display: inline-flex; align-items: center; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 11px; font-weight: 500; border-radius: 12px; text-decoration: none; transition: all 0.2s ease; cursor: pointer; line-height: 1.4; white-space: nowrap; background-color: #DDF4FF !important; border: none !important; } .github-search-tag-deployment { color: #0284c7 !important; } .github-search-tag-releases { color: #0284c7 !important; } .github-search-tag:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-decoration: none !important; background-color: #DDF4FF !important; } .github-tags-container { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; gap: 4px; animation: fadeInUp 0.3s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .github-search-tag svg { display: block; width: 12px; height: 12px; } `; document.head.appendChild(style); }, makeRequest(url) { return new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: url, onload: (response) => { if (response.status === 200) { resolve(response.responseText); } else { reject(new Error(`HTTP ${response.status}`)); } }, onerror: reject }); }); }, isValidWebsiteUrl(url) { try { const urlObj = new URL(url); if (!['http:', 'https:'].includes(urlObj.protocol)) { return false; } const pathname = urlObj.pathname.toLowerCase(); const lastSegment = pathname.split('/').pop() || ''; for (const ext of this.CONFIG.excludedExtensions) { if (lastSegment.endsWith(ext)) { return false; } } const filePatterns = [ /\/[^/]+\.[a-z0-9]{2,5}$/i, /\/blob\//, /\/raw\//, /\/releases\/download\//, /\/archive\//, ]; for (const pattern of filePatterns) { if (pattern.test(url)) { return false; } } const domain = urlObj.hostname; for (const keyword in this.CONFIG.deploymentKeywords) { if (domain.includes(keyword)) { return true; } } if (domain.includes('github.com') || domain.includes('github.io')) { return false; } return true; } catch (e) { return false; } }, async checkGitHubPages(repoOwner, repoName) { try { const possibleUrls = [ `https://${repoOwner}.github.io`, `https://${repoOwner}.github.io/${repoName}`, `https://${repoName}.${repoOwner}.github.io` ]; for (const url of possibleUrls) { try { await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'HEAD', url: url, onload: (response) => { if (response.status < 400) { resolve(url); } else { reject(new Error(`HTTP ${response.status}`)); } }, onerror: reject }); }); return url; } catch (e) { continue; } } try { const settingsHtml = await this.makeRequest(`https://github.com/${repoOwner}/${repoName}/settings/pages`); if (settingsHtml.includes('is published') || settingsHtml.includes('is enrolled') || settingsHtml.includes('CNAME') || settingsHtml.includes('github-pages')) { const urlMatch = settingsHtml.match(/(https?:\/\/[^\s"']+\.github\.io[^\s"']*)/); if (urlMatch) { return urlMatch[0]; } return `https://${repoOwner}.github.io/${repoName}`; } } catch (e) { // 忽略错误 } try { const repoInfo = await this.makeRequest(`https://api.github.com/repos/${repoOwner}/${repoName}`); const repoData = JSON.parse(repoInfo); if (repoData.has_pages) { return `https://${repoOwner}.github.io/${repoName}`; } } catch (e) { // 忽略错误 } } catch (error) { // 忽略错误 } return null; }, async checkDeployment(repoOwner, repoName) { try { const githubPagesUrl = await this.checkGitHubPages(repoOwner, repoName); if (githubPagesUrl) { return githubPagesUrl; } try { const readmeUrls = [ `https://raw.githubusercontent.com/${repoOwner}/${repoName}/main/README.md`, `https://raw.githubusercontent.com/${repoOwner}/${repoName}/master/README.md`, `https://raw.githubusercontent.com/${repoOwner}/${repoName}/HEAD/README.md` ]; for (const readmeUrl of readmeUrls) { try { const readmeText = await this.makeRequest(readmeUrl); const urlRegex = /(?:https?:\/\/)(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s\)\]>]*)?/g; const urls = readmeText.match(urlRegex) || []; const validDeploymentUrls = []; for (const url of urls) { if (!this.isValidWebsiteUrl(url)) { continue; } const isKnownPlatform = Object.keys(this.CONFIG.deploymentKeywords).some(keyword => url.includes(keyword) ); if (isKnownPlatform) { validDeploymentUrls.push(url); } } if (validDeploymentUrls.length > 0) { return validDeploymentUrls[0]; } } catch (e) { continue; } } } catch (e) { // 忽略错误 } try { const packageJsonUrls = [ `https://raw.githubusercontent.com/${repoOwner}/${repoName}/main/package.json`, `https://raw.githubusercontent.com/${repoOwner}/${repoName}/master/package.json` ]; for (const packageUrl of packageJsonUrls) { try { const packageText = await this.makeRequest(packageUrl); const packageData = JSON.parse(packageText); if (packageData.homepage && typeof packageData.homepage === 'string' && packageData.homepage.startsWith('http')) { const homepage = packageData.homepage; if (this.isValidWebsiteUrl(homepage)) { return homepage; } } } catch (e) { continue; } } } catch (e) { // 忽略错误 } } catch (error) { // 忽略错误 } return null; }, async checkReleases(repoOwner, repoName) { try { const releasesData = await this.makeRequest(`https://api.github.com/repos/${repoOwner}/${repoName}/releases`); const releases = JSON.parse(releasesData); return releases.length > 0; } catch (e) { return false; } }, createTag(text, href, type) { const tag = document.createElement('a'); tag.className = `github-search-tag github-search-tag-${type}`; const iconSpan = document.createElement('span'); iconSpan.innerHTML = type === 'deployment' ? this.ICONS.deployment : this.ICONS.releases; iconSpan.style.cssText = 'display: inline-flex; align-items: center; margin-right: 4px;'; const textSpan = document.createElement('span'); textSpan.textContent = text; tag.appendChild(iconSpan); tag.appendChild(textSpan); tag.href = href; tag.target = '_blank'; tag.rel = 'noopener noreferrer'; return tag; }, findBestPosition(repoItem) { const positions = [ () => { const description = repoItem.querySelector('[class*="description"], .jsbtiO'); if (description) { const container = document.createElement('div'); container.className = 'github-tags-container'; description.parentNode.insertBefore(container, description.nextSibling); return container; } return null; }, () => { const metadata = repoItem.querySelector('[class*="metadata"], .dmuROe, .gbntE'); if (metadata) { const container = document.createElement('div'); container.className = 'github-tags-container'; metadata.appendChild(container); return container; } return null; }, () => { const container = document.createElement('div'); container.className = 'github-tags-container'; repoItem.appendChild(container); return container; }, () => { const repoLink = repoItem.querySelector('a[href*="/"][href*="/"]:first-child'); if (repoLink && repoLink.parentNode) { const container = document.createElement('div'); container.className = 'github-tags-container'; repoLink.parentNode.insertBefore(container, repoLink.nextSibling); return container; } return null; } ]; for (const positionFinder of positions) { try { const container = positionFinder(); if (container) { return container; } } catch (e) { continue; } } return null; }, async processRepo(repoItem) { const repoLink = repoItem.querySelector('a[href*="/"][href*="/"]'); if (!repoLink) return; const href = repoLink.getAttribute('href'); const match = href.match(/\/([^\/]+)\/([^\/]+)$/); if (!match) return; const [_, repoOwner, repoName] = match; const repoId = `${repoOwner}/${repoName}`; if (this.processedRepos.has(repoId) || repoItem.dataset.tagsProcessed) { return; } this.processedRepos.add(repoId); repoItem.dataset.tagsProcessed = 'true'; const tagsContainer = this.findBestPosition(repoItem); if (!tagsContainer) return; const loadingTag = document.createElement('span'); loadingTag.innerHTML = '⏳检查中...'; loadingTag.style.cssText = 'font-size: 11px; color: #6a737d; margin-left: 8px; display: inline-flex; align-items: center;'; tagsContainer.appendChild(loadingTag); try { const [deploymentUrl, hasReleases] = await Promise.all([ this.checkDeployment(repoOwner, repoName), this.checkReleases(repoOwner, repoName) ]); tagsContainer.removeChild(loadingTag); if (deploymentUrl) { const deploymentTag = this.createTag('访问网站', deploymentUrl, 'deployment'); tagsContainer.appendChild(deploymentTag); } if (hasReleases) { const releasesUrl = `https://github.com/${repoOwner}/${repoName}/releases`; const releasesTag = this.createTag('查看版本', releasesUrl, 'releases'); tagsContainer.appendChild(releasesTag); } if (tagsContainer.children.length === 0) { tagsContainer.remove(); } } catch (error) { if (loadingTag.parentNode === tagsContainer) { tagsContainer.removeChild(loadingTag); } } }, findRepoItems() { const selectors = [ '.fXzjPH', '[data-testid="repository-card"]', '.Box-row', '.repo-list-item' ]; for (const selector of selectors) { const items = document.querySelectorAll(selector); if (items.length > 0) { return Array.from(items); } } const repoLinks = document.querySelectorAll('a[href*="/"][href*="/"]'); return Array.from(repoLinks) .filter(link => { const href = link.getAttribute('href'); return href.match(/^\/[^\/]+\/[^\/]+$/); }) .map(link => link.closest('div, article, li, .Box, .fXzjPH') || link.parentElement) .filter(item => item && item.querySelector('a[href*="/"][href*="/"]')); }, processVisibleRepos() { const repoItems = this.findRepoItems(); repoItems.forEach(repoItem => { if (!repoItem.dataset.tagsProcessed) { this.processRepo(repoItem); } }); }, startGitHubProcessing() { let processedCount = 0; const interval = setInterval(() => { const currentCount = this.findRepoItems().length; if (currentCount > 0) { this.processVisibleRepos(); processedCount++; if (processedCount >= this.CONFIG.maxRetries || this.findRepoItems().every(item => item.dataset.tagsProcessed)) { clearInterval(interval); } } }, this.CONFIG.checkInterval); }, initGitHubObserver() { const observer = new MutationObserver((mutations) => { let shouldProcess = false; mutations.forEach((mutation) => { if (mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { if (node.querySelector && ( node.querySelector('.fXzjPH') || node.querySelector('[data-testid="repository-card"]') || node.querySelector('a[href*="/"][href*="/"]') )) { shouldProcess = true; } if (node.matches && ( node.matches('.fXzjPH') || node.matches('[data-testid="repository-card"]') || (node.querySelector && node.querySelector('a[href*="/"][href*="/"]')) )) { shouldProcess = true; } } }); } }); if (shouldProcess) { setTimeout(() => this.processVisibleRepos(), 500); } }); observer.observe(document.body, { childList: true, subtree: true }); return observer; } }; const punkDeafultMark = "Bing-Google-Baidu-MetaSo-YandexSearch-Bilibili-ApkPure-Quark-Zhihu"; const defaultSearchEngines = [{ name: "谷歌", searchUrl: "https://www.google.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: /google\.com.*?search.*?q=/g, mark: "Google", svgCode: ` ` }, { name: "必应", searchUrl: "https://www.bing.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: /bing\.com.*?search\?q=?/g, mark: "Bing", svgCode: ` ` }, { name: "百度", searchUrl: "https://www.baidu.com/s?wd={keyword}", searchkeyName: ["wd", "word"], matchUrl: /baidu\.com.*?w(or)?d=?/g, mark: "Baidu", svgCode: ` ` }, { name: "密塔", searchUrl: "https://metaso.cn/?s=itab1&q={keyword}", searchkeyName: ["q"], matchUrl: /metaso\.cn.*?q=/g, mark: "MetaSo", svgCode: ` ` }, { name: "Yandex", searchUrl: "https://yandex.com/search/?text={keyword}", searchkeyName: ["text"], matchUrl: /yandex\.com.*?text=/g, mark: "YandexSearch", svgCode: ` ` }, { name: "ApkPure", searchUrl: "https://apkpure.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: /apkpure\.com.*?q=?/g, mark: "ApkPure", svgCode: ` ` }, { name: "哔哩哔哩", searchUrl: "https://m.bilibili.com/search?keyword={keyword}", searchkeyName: ["keyword"], matchUrl: /bilibili\.com.*?keyword=/g, mark: "Bilibili", svgCode: ` ` }, { name: "夸克", searchUrl: "https://quark.sm.cn/s?q={keyword}", searchkeyName: ["q"], matchUrl: /quark\.sm\.cn.*?q=/g, mark: "Quark", svgCode: ` ` }, { name: "扩展搜索", searchUrl: "https://www.crxsoso.com/search?keyword={keyword}&store=chrome", searchkeyName: ["keyword"], matchUrl: /crxsoso\.com\/search\?keyword=/g, mark: "Crxsoso", svgCode: ` ` }, { name: "知乎", searchUrl: "https://www.zhihu.com/search?type=content&q={keyword}", searchkeyName: ["q"], matchUrl: /zhihu\.com.*?q=/g, mark: "Zhihu", svgCode: ` ` }, { name: "GitHub", searchUrl: "https://github.com/search?q={keyword}+is%3Apublic&type=repositories&s=stars&o=desc", searchkeyName: ["q"], matchUrl: /github\.com.*?search\?q=/, mark: "GitHub", svgCode: ` ` }, { name: "YouTube", searchUrl: "https://www.youtube.com/results?search_query={keyword}", searchkeyName: ["search_query"], matchUrl: "youtube\\.com.*?results\\?search_query=", mark: "YouTube", svgCode: ` ` }, { "name": "Baidu图片", "searchUrl": "https://www.baidu.com/sf/vsearch?pd=image_content&from={source}&atn=page&fr=tab&tn=vsearch&ss=100&sa=tb&rsv_sug4={suggestion}&inputT={input_time}&oq={original_query}&word={keyword}", "searchkeyName": ["keyword", "source", "suggestion", "input_time", "original_query"], "matchUrl": /baidu\.com\/sf\/vsearch.*?word=/g, "mark": "Baidutp", "svgCode": ` ` }, { name: "淘宝", searchUrl: "https://s.taobao.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: "taobao\\.com.*?search\\?q=", mark: "TaoBao", svgCode: ` ` }, { name: "PubMed", searchUrl: "https://pubmed.ncbi.nlm.nih.gov/?term={keyword}", searchkeyName: ["term"], matchUrl: "pubmed\\.ncbi\\.nlm\\.nih\\.gov.*?term={keyword}", mark: "PubMed", svgCode: ` ` }, { name: "DuckDuckGo", searchUrl: "https://duckduckgo.com/?q={keyword}", searchkeyName: ["q"], matchUrl: "duckduckgo\\.com.*?q={keyword}", mark: "DuckDuckGo", svgCode: ` ` }, { name: "矢量图库", searchUrl: "https://www.iconfont.cn/search/index?searchType=icon&q={keyword}", searchkeyName: ["q"], matchUrl: /iconfont\.cn\/search\/index\?searchType=icon&q=/g, mark: "iconfont", svgCode: ` ` }, { name: "搜狗", searchUrl: "https://www.sogou.com/web?query={keyword}", searchkeyName: ["query"], matchUrl: /sogou\.com.*?query=/g, mark: "Sogou", svgCode: ` ` }, { name: "猫脚本", searchUrl: "https://scriptcat.org/zh-CN/search?keyword={keyword}", searchkeyName: ["keyword"], matchUrl: /scriptcat\.org\/zh-CN\/search\?keyword=/g, mark: "ScriptCat", svgCode: ` ` }, { name: "360搜索", searchUrl: "https://www.so.com/s?q={keyword}", searchkeyName: ["q"], matchUrl: /so\.com.*?q=/g, mark: "360Search", svgCode: ` ` }, { name: "Startpage", searchUrl: "https://www.startpage.com/sp/search?query={keyword}", searchkeyName: ["query"], matchUrl: /startpage\.com.*?query=/g, mark: "Startpage", svgCode: ` ` }, { name: "WolframAlpha", searchUrl: "https://www.wolframalpha.com/input?i={keyword}", searchkeyName: ["i"], matchUrl: /wolframalpha\.com.*?i=/g, mark: "WolframAlpha", svgCode: `` }, { name: "谷歌学术", searchUrl: "https://scholar.google.com/scholar?q={keyword}", searchkeyName: ["q"], matchUrl: /scholar\.google\..*?q=/g, mark: "GoogleScholar", svgCode: `` }, { name: "百度学术", searchUrl: "https://xueshu.baidu.com/s?wd={keyword}", searchkeyName: ["wd"], matchUrl: /xueshu\.baidu\.com.*?wd=/g, mark: "BaiduScholar", svgCode: `` }, { name: "CNKI", searchUrl: "https://search.cnki.net/search.aspx?q={keyword}", searchkeyName: ["q"], matchUrl: /cnki\.net.*?q=/g, mark: "CNKI", svgCode: `` }, { name: "StackOverflow", searchUrl: "https://stackoverflow.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: /stackoverflow\.com.*?search\?q=/g, mark: "StackOverflow", svgCode: `` }, { name: "MDN", searchUrl: "https://developer.mozilla.org/zh-CN/search?q={keyword}", searchkeyName: ["q"], matchUrl: /developer\.mozilla\.org.*?q=/g, mark: "MDN", svgCode: ` ` }, { name: "Coursera", searchUrl: "https://www.coursera.org/search?query={keyword}", searchkeyName: ["query"], matchUrl: /coursera\.org.*?query=/g, mark: "Coursera", svgCode: `` }, { name: "京东", searchUrl: "https://search.jd.com/Search?keyword={keyword}", searchkeyName: ["keyword"], matchUrl: /jd\.com.*?keyword=/g, mark: "JD", svgCode: `` }, { name: "亚马逊", searchUrl: "https://www.amazon.com/s?k={keyword}", searchkeyName: ["k"], matchUrl: /amazon\..*?k=/g, mark: "Amazon", svgCode: ` ` }, { name: "AliExpress", searchUrl: "https://www.aliexpress.com/wholesale?SearchText={keyword}", searchkeyName: ["SearchText"], matchUrl: /aliexpress\.com.*?SearchText=/g, mark: "AliExpress", svgCode: `` }, { name: "微博", searchUrl: "https://s.weibo.com/weibo?q={keyword}", searchkeyName: ["q"], matchUrl: /weibo\.com.*?q=/g, mark: "Weibo", svgCode: `` }, { name: "抖音", searchUrl: "https://www.douyin.com/search/{keyword}", searchkeyName: ["keyword"], matchUrl: /douyin\.com.*?search/g, mark: "Douyin", svgCode: `` }, { name: "小红书", searchUrl: "https://www.xiaohongshu.com/search_result?keyword={keyword}", searchkeyName: ["keyword"], matchUrl: /xiaohongshu\.com.*?keyword=/g, mark: "Xiaohongshu", svgCode: `` }, { name: "豆瓣", searchUrl: "https://www.douban.com/search?q={keyword}", searchkeyName: ["q"], matchUrl: /douban\.com.*?q=/g, mark: "Douban", svgCode: `` }, { name: "IMDb", searchUrl: "https://www.imdb.com/find?q={keyword}", searchkeyName: ["q"], matchUrl: /imdb\.com.*?q=/g, mark: "IMDb", svgCode: `` }, { name: "RottenTomatoes", searchUrl: "https://www.rottentomatoes.com/search?search={keyword}", searchkeyName: ["search"], matchUrl: /rottentomatoes\.com.*?search=/g, mark: "RottenTomatoes", svgCode: `` }, { name: "Steam", searchUrl: "https://store.steampowered.com/search/?term={keyword}", searchkeyName: ["term"], matchUrl: /steampowered\.com.*?term=/g, mark: "Steam", svgCode: ` ` }, { name: "Spotify", searchUrl: "https://open.spotify.com/search/{keyword}", searchkeyName: ["q"], matchUrl: /open\.spotify\.com.*?search/g, mark: "Spotify", svgCode: `` }, { name: "网易云音乐", searchUrl: "https://music.163.com/#/search/m/?s={keyword}", searchkeyName: ["s"], matchUrl: /music\.163\.com.*?s=/g, mark: "NeteaseMusic", svgCode: `` }, { name: "Pinterest", searchUrl: "https://www.pinterest.com/search/pins/?q={keyword}", searchkeyName: ["q"], matchUrl: /pinterest\..*?q=/g, mark: "Pinterest", svgCode: `` }, { name: "Flickr", searchUrl: "https://www.flickr.com/search/?text={keyword}", searchkeyName: ["text"], matchUrl: /flickr\.com.*?text=/g, mark: "Flickr", svgCode: `` }, { name: "维基百科", searchUrl: "https://zh.wikipedia.org/w/index.php?search={keyword}", searchkeyName: ["search"], matchUrl: /wikipedia\.org.*?search=/g, mark: "Wikipedia", svgCode: `` }, { name: "ArchWiki", searchUrl: "https://wiki.archlinux.org/index.php?search={keyword}", searchkeyName: ["search"], matchUrl: /archlinux\.org.*?search=/g, mark: "ArchWiki", svgCode: `` }, { name: "微信读书", searchUrl: "https://weread.qq.com/web/search/books?keyword={keyword}", searchkeyName: ["keyword"], matchUrl: /weread\.qq\.com.*?keyword=/g, mark: "WeRead", svgCode: `` }, { name: "天眼查", searchUrl: "https://www.tianyancha.com/search?key={keyword}", searchkeyName: ["key"], matchUrl: /tianyancha\.com.*?key=/g, mark: "Tianyancha", svgCode: `` }, { name: "Ecosia", searchUrl: "https://www.ecosia.org/search?q={keyword}", searchkeyName: ["q"], matchUrl: "ecosia\\.org.*?search\\?q=", mark: "Ecosia", svgCode: ` ` }, ]; // ===== 常量定义区 ===== const CLASS_NAMES = Object.freeze({ ENGINE_CONTAINER: 'engine-container', ENGINE_DISPLAY: 'engine-display', ENGINE_BUTTON: 'engine-button', HAMBURGER_MENU: 'punkjet-hamburger-menu', SEARCH_OVERLAY: 'punkjet-search-overlay', MANAGEMENT_PANEL: 'engine-management-panel', ENGINE_CARD: 'engine-card', DRAGGING: 'dragging', DRAG_OVER: 'drag-over' }); const STORAGE_KEYS = Object.freeze({ USER_SEARCH_ENGINES: 'userSearchEngines', PUNK_SETUP_SEARCH: 'punk_setup_search', LAST_SUCCESSFUL_KEYWORDS: 'last_successful_keywords', CURRENT_INPUT: 'currentInput', ENGINE_BAR_OFFSET: 'engineBarOffset' }); const DEFAULT_CONFIG = { PUNK_DEFAULT_MARK: 'Bing-Google-Baidu-MetaSo-YandexSearch-Bilibili-ApkPure-Quark-Zhihu', SEARCH_PARAMS: ['q', 'query', 'search', 'keyword', 'keywords', 'wd', 'key'], MONITORED_INPUT_SELECTOR: 'input[type="text"], input[type="search"], textarea, input#kw', CHECK_SCOPE_INTERVAL: 1000, SHOW_SEARCH_BOX_DELAY: 10000, SCROLL_TIMEOUT_DURATION: 150, BAIDU_INPUT_DELAY: 500, DRAG_SORT_DELAY: 500, ENGINE_BAR_OFFSET_DEFAULT: 0 }; // ===== 可访问性模块 ===== const accessibility = { initKeyboardNavigation() { document.addEventListener('keydown', (e) => { if (e.altKey && e.key === 's') { e.preventDefault(); searchOverlay.showSearchOverlay(); } if (e.key === 'Escape') { if (appState.searchOverlayVisible) searchOverlay.hideSearchOverlay(); if (appState.hamburgerMenuOpen) hamburgerMenu.hideHamburgerMenu(); const panel = document.getElementById(CLASS_NAMES.MANAGEMENT_PANEL); if (panel && panel.style.display === 'block') managementPanel.closeManagementPanel(); } if (e.altKey && e.key === 'm') { e.preventDefault(); hamburgerMenu.toggleHamburgerMenu(); } if (e.altKey && e.key === 'e') { e.preventDefault(); managementPanel.showManagementPanel(); } }); }, enhanceAriaLabels() { const buttons = document.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`); buttons.forEach(button => { const engineName = button.getAttribute('title'); button.setAttribute('aria-label', `使用${engineName}搜索`); button.setAttribute('role', 'button'); button.setAttribute('tabindex', '0'); }); const hamburgerButton = document.querySelector('.engine-hamburger-button'); if (hamburgerButton) { hamburgerButton.setAttribute('aria-label', '打开菜单'); hamburgerButton.setAttribute('aria-expanded', 'false'); hamburgerButton.setAttribute('aria-haspopup', 'true'); } const overlay = document.getElementById(CLASS_NAMES.SEARCH_OVERLAY); if (overlay) { const searchInput = overlay.querySelector('input'); if (searchInput) searchInput.setAttribute('aria-label', '搜索关键词或网址'); } }, updateHamburgerAriaState() { const hamburgerButton = document.querySelector('.engine-hamburger-button'); if (hamburgerButton) { hamburgerButton.setAttribute('aria-expanded', appState.hamburgerMenuOpen.toString()); } }, trapFocus(element) { const focusableElements = element.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); if (focusableElements.length === 0) return; const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; const handleKeyDown = (e) => { if (e.key !== 'Tab') return; if (e.shiftKey) { if (document.activeElement === firstElement) { lastElement.focus(); e.preventDefault(); } } else { if (document.activeElement === lastElement) { firstElement.focus(); e.preventDefault(); } } }; element.addEventListener('keydown', handleKeyDown); if (!element._focusTrapHandler) element._focusTrapHandler = handleKeyDown; setTimeout(() => firstElement.focus(), 100); }, removeFocusTrap(element) { if (element._focusTrapHandler) { element.removeEventListener('keydown', element._focusTrapHandler); delete element._focusTrapHandler; } }, init() { this.initKeyboardNavigation(); setTimeout(() => this.enhanceAriaLabels(), 1000); const observer = new MutationObserver(() => this.enhanceAriaLabels()); observer.observe(document.body, { childList: true, subtree: true }); } }; // ===== 防抖工具模块 ===== const debounceUtils = { timers: new Map(), debounce(key, fn, delay = 300, immediate = false) { if (this.timers.has(key)) clearTimeout(this.timers.get(key)); if (immediate && !this.timers.has(key)) { fn(); this.timers.set(key, setTimeout(() => this.timers.delete(key), delay)); } else { const timer = setTimeout(() => { fn(); this.timers.delete(key); }, delay); this.timers.set(key, timer); } }, throttle(key, fn, limit = 300) { if (!this.timers.has(key)) { fn(); this.timers.set(key, setTimeout(() => this.timers.delete(key), limit)); } }, cancel(key) { if (this.timers.has(key)) { clearTimeout(this.timers.get(key)); this.timers.delete(key); } }, clearAll() { this.timers.forEach((timer) => clearTimeout(timer)); this.timers.clear(); } }; // ===== 工具函数库 ===== const utils = { clearAllTimeouts() { if (appState.scrollTimeout) clearTimeout(appState.scrollTimeout); if (appState.hideTimeout) clearTimeout(appState.hideTimeout); debounceUtils.clearAll(); }, isEngineContainerExists() { return document.querySelector(`.${CLASS_NAMES.ENGINE_CONTAINER}`) !== null; }, isValidScope() { return appState.searchUrlMap.some(item => window.location.href.match(item.matchUrl) !== null); }, recordEngineUsage(mark) { if (hamburgerMenu.sortMode !== 'smart') return; const usageCounts = GM_getValue('engine_usage_counts', {}); usageCounts[mark] = (usageCounts[mark] || 0) + 1; GM_setValue('engine_usage_counts', usageCounts); }, isValidUrl(string) { try { const url = new URL(string); return url.protocol === 'http:' || url.protocol === 'https:'; } catch (_) { return false; } }, getKeywords() { try { const url = new URL(window.location.href); const searchParams = url.searchParams; let keywords = ''; for (const param of DEFAULT_CONFIG.SEARCH_PARAMS) { if (searchParams.has(param)) { keywords = searchParams.get(param).trim(); if (keywords) break; } } if (!keywords) { for (const urlItem of appState.searchUrlMap) { if (window.location.href.match(urlItem.matchUrl) !== null) { for (const keyItem of urlItem.searchkeyName) { if (searchParams.has(keyItem)) { keywords = searchParams.get(keyItem).trim(); if (keywords) break; } } if (keywords) break; } } } if (keywords) { localStorage.setItem(STORAGE_KEYS.LAST_SUCCESSFUL_KEYWORDS, keywords); sessionStorage.setItem(STORAGE_KEYS.LAST_SUCCESSFUL_KEYWORDS, keywords); } else { keywords = sessionStorage.getItem(STORAGE_KEYS.LAST_SUCCESSFUL_KEYWORDS) || localStorage.getItem(STORAGE_KEYS.LAST_SUCCESSFUL_KEYWORDS) || ''; } return keywords; } catch (error) { console.error("获取关键词失败:", error.message, "当前URL:", window.location.href); return ""; } }, getSearchKeywords() { let keywords = ""; if (appState.searchOverlayVisible) { const searchInput = document.getElementById("overlay-search-input"); if (searchInput && searchInput.value.trim()) return searchInput.value.trim(); } const baiduInput = document.querySelector('input#kw, input[name="wd"], input[name="word"]'); if (baiduInput && baiduInput.value.trim()) return baiduInput.value.trim(); const allInputs = document.querySelectorAll(DEFAULT_CONFIG.MONITORED_INPUT_SELECTOR); for (const input of allInputs) { const inputVal = input.value.trim(); if (inputVal) { keywords = inputVal; break; } } if (!keywords) keywords = this.getKeywords().trim(); if (!keywords) keywords = sessionStorage.getItem(STORAGE_KEYS.CURRENT_INPUT) || ""; return keywords; }, markUnsavedChanges() { appState.hasUnsavedChanges = true; const indicator = document.getElementById("unsaved-indicator"); const saveBtn = document.getElementById("panel-save-btn"); if (indicator) indicator.style.display = "block"; if (saveBtn) { saveBtn.style.opacity = "1"; saveBtn.style.pointerEvents = "auto"; saveBtn.style.background = "#e67e22"; saveBtn.innerHTML = this.createInlineSVG('save') + ' 保存更改'; const handleHover = function(isEnter) { this.style.transform = isEnter ? "translateY(-2px)" : "translateY(0)"; this.style.boxShadow = isEnter ? "0 4px 8px rgba(0,0,0,0.2)" : "none"; }; saveBtn.removeEventListener("mouseenter", () => {}); saveBtn.removeEventListener("mouseleave", () => {}); saveBtn.addEventListener("mouseenter", () => handleHover.call(saveBtn, true)); saveBtn.addEventListener("mouseleave", () => handleHover.call(saveBtn, false)); } }, clearUnsavedChanges() { appState.hasUnsavedChanges = false; const indicator = document.getElementById("unsaved-indicator"); const saveBtn = document.getElementById("panel-save-btn"); if (indicator) indicator.style.display = "none"; if (saveBtn) { saveBtn.style.opacity = "0.7"; saveBtn.style.pointerEvents = "none"; saveBtn.style.background = "#95a5a6"; saveBtn.innerHTML = this.createInlineSVG('save') + ' 保存设置'; setTimeout(() => { if (!appState.hasUnsavedChanges) { saveBtn.innerHTML = this.createInlineSVG('check') + ' 已保存'; saveBtn.style.background = "#27ae60"; setTimeout(() => { if (!appState.hasUnsavedChanges) { saveBtn.innerHTML = this.createInlineSVG('save') + ' 保存设置'; saveBtn.style.background = "#95a5a6"; } }, 2000); } }, 100); } }, updateSelectedCount() { const checkboxes = document.querySelectorAll(`#engine-management-list input[type="checkbox"]:checked`); const countElement = document.getElementById("selected-count"); if (countElement) { countElement.innerHTML = this.createInlineSVG('check-circle') + ` 已选择 ${checkboxes.length} 个引擎`; } }, saveButtonOrder() { const container = document.querySelector(`.${CLASS_NAMES.ENGINE_DISPLAY}`); if (!container) return; const buttons = container.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`); const newOrder = Array.from(buttons) .map(btn => btn.getAttribute('data-mark')) .filter(mark => mark !== null) .join('-'); GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, newOrder); }, createInlineSVG(iconName, color = 'currentColor') { const icons = { search: ``, cog: ``, sort: ``, sog: ``, save: ``, check: ``, 'check-circle': ``, times: ``, plus: ``, globe: ``, undo: ``, eye: ``, trash: ``, list: ``, magic: ``, palette: ``, circle: ``, 'paper-plane': ``, 'info-circle': `` }; return icons[iconName] || icons['circle']; }, getEngineBarOffset() { return GM_getValue(STORAGE_KEYS.ENGINE_BAR_OFFSET, DEFAULT_CONFIG.ENGINE_BAR_OFFSET_DEFAULT); }, setEngineBarOffset(value) { GM_setValue(STORAGE_KEYS.ENGINE_BAR_OFFSET, parseInt(value)); } }; // ===== DOM操作模块 ===== const domHandler = { injectStyle() { if (document.querySelector(`style#${CLASS_NAMES.ENGINE_CONTAINER}-style`)) return; const cssNode = document.createElement("style"); cssNode.id = `${CLASS_NAMES.ENGINE_CONTAINER}-style`; cssNode.textContent = ` .${CLASS_NAMES.ENGINE_CONTAINER} { display: flex; position: fixed; bottom: 0px; left: 2%; width: 96%; height: 36px; overflow: hidden; justify-content: center; align-items: center; z-index: 1000; background-color: rgba(255, 255, 255, 0); margin-top: 1px; transition: all 0.3s ease; transform: translateY(0); opacity: 1; overflow-y: hidden; overflow-x: visible; } .${CLASS_NAMES.ENGINE_CONTAINER}.hidden { transform: translateY(100%); opacity: 0; } .${CLASS_NAMES.ENGINE_DISPLAY} { display: flex; overflow-x: auto; overflow-y: hidden; white-space: nowrap; height: 100%; gap: 0px; flex-grow: 1; scrollbar-width: none; -ms-overflow-style: none; } .${CLASS_NAMES.ENGINE_DISPLAY}::-webkit-scrollbar { display: none; } .${CLASS_NAMES.ENGINE_BUTTON} { width: 55.5px; height: 32px; padding: 0; border: 1px solid #f0f0f0; border-radius: 8px; background-color: rgba(255, 255, 255, 1); color: transparent; font-size: 14px; cursor: pointer; margin: 2px; background-size: contain; background-repeat: no-repeat; background-position: center; backdrop-filter: blur(5px); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(255, 255, 255, 0.5), 6px 6px 10px rgba(0, 0, 0, 0.1) inset, -6px -6px 10px rgba(255, 255, 255, 0) inset; transition: all 0.3s ease; flex-shrink: 0; overflow: hidden; } .${CLASS_NAMES.ENGINE_BUTTON}:focus { border: 2px dashed #2196F3; background-color: #f0f8ff; } .${CLASS_NAMES.ENGINE_BUTTON}.selected { border: 2px dashed #2196F3; background-color: #f0f8ff; } .${CLASS_NAMES.ENGINE_BUTTON}.${CLASS_NAMES.DRAGGING} { opacity: 0.5; transform: rotate(5deg); } .${CLASS_NAMES.ENGINE_BUTTON}.${CLASS_NAMES.DRAG_OVER} { border: 2px dashed #2196F3; background-color: #f0f8ff; } .${CLASS_NAMES.ENGINE_CARD} { transition: all 0.3s ease; } #${CLASS_NAMES.MANAGEMENT_PANEL} { animation: slideIn 0.3s ease; } #${CLASS_NAMES.HAMBURGER_MENU} { animation: slideInLeft 0.3s ease; } #${CLASS_NAMES.SEARCH_OVERLAY} { animation: fadeIn 0.3s ease; } @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `; document.head.appendChild(cssNode); }, monitorInputFields() { const setupInputMonitoring = (input) => { if (input.dataset.monitored) return; input.dataset.monitored = true; const updateCurrentInput = (event) => { debounceUtils.debounce('input_monitor', () => { appState.currentInput = event.target.value.trim(); sessionStorage.setItem(STORAGE_KEYS.CURRENT_INPUT, appState.currentInput); }, 500); }; input.addEventListener('input', updateCurrentInput); input.addEventListener('change', updateCurrentInput); }; document.querySelectorAll(DEFAULT_CONFIG.MONITORED_INPUT_SELECTOR).forEach(setupInputMonitoring); const observer = new MutationObserver(() => { document.querySelectorAll(`${DEFAULT_CONFIG.MONITORED_INPUT_SELECTOR}:not([data-monitored])`).forEach(setupInputMonitoring); }); observer.observe(document.body, { childList: true, subtree: true }); }, updateSearchBoxPosition() { const punkJetBox = document.getElementById("punkjet-search-box"); if (!punkJetBox) return; const offsetValue = utils.getEngineBarOffset(); const shouldOffset = document.activeElement && ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) && !appState.isInteractingWithEngineBar; punkJetBox.style.bottom = shouldOffset ? `${offsetValue}px` : '0px'; punkJetBox.style.left = '2%'; punkJetBox.style.width = '96%'; punkJetBox.style.transform = appState.punkJetBoxVisible ? "translateY(0)" : "translateY(100%)"; punkJetBox.style.opacity = appState.punkJetBoxVisible ? "1" : "0"; }, createEngineButton(item) { const button = document.createElement('button'); button.className = CLASS_NAMES.ENGINE_BUTTON; button.style.backgroundImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(item.svgCode)}')`; button.setAttribute("url", item.searchUrl); button.setAttribute("title", item.name); button.setAttribute("data-mark", item.mark); button.innerHTML = ''; const handleMouseEnter = () => { button.style.backgroundColor = 'rgba(241, 241, 241, 1)'; button.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; }; const handleMouseLeave = () => { button.style.backgroundColor = 'rgba(240, 240, 244, 1)'; button.style.boxShadow = '1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(255, 255, 255, 0.5), 6px 6px 10px rgba(0, 0, 0, 0.1) inset, -6px -6px 10px rgba(255, 255, 255, 0) inset'; }; button.addEventListener('mouseover', handleMouseEnter); button.addEventListener('mouseout', handleMouseLeave); button.addEventListener('touchstart', (e) => { appState.isInteractingWithEngineBar = true; e.stopPropagation(); }, { passive: true }); button.addEventListener('touchend', (e) => { setTimeout(() => appState.isInteractingWithEngineBar = false, 150); e.stopPropagation(); }, { passive: true }); button.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); const url = button.getAttribute("url"); const keywords = utils.getSearchKeywords(); const mark = button.getAttribute('data-mark'); utils.recordEngineUsage(mark); if (url && keywords) { const finalUrl = url.replace('{keyword}', encodeURIComponent(keywords)); window.open(finalUrl, '_blank'); if (appState.searchOverlayVisible) searchOverlay.hideSearchOverlay(); } else { searchOverlay.showSearchOverlay(); } }); return button; }, createHamburgerButton() { const hamburgerButton = document.createElement('button'); hamburgerButton.className = "engine-hamburger-button"; hamburgerButton.innerHTML = utils.createInlineSVG('paper-plane'); hamburgerButton.title = "菜单 (Alt+M)"; hamburgerButton.style.cssText = ` width: 32px; height: 32px; border: 1px solid #f0f0f0; border-radius: 7px; background-color: rgba(255, 255, 255, 1); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(255, 255, 255, 0.5), 6px 6px 10px rgba(0, 0, 0, 0.1) inset, -6px -6px 10px rgba(255, 255, 255, 0) inset; cursor: pointer; margin: 3px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #999999; transition: all 0.3s ease; padding: 0; outline: none; `; hamburgerButton.addEventListener('mouseenter', () => { hamburgerButton.style.backgroundColor = 'rgba(241, 241, 241, 1)'; hamburgerButton.style.transform = 'translateY(-2px)'; hamburgerButton.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; }); hamburgerButton.addEventListener('mouseleave', () => { hamburgerButton.style.backgroundColor = 'white'; hamburgerButton.style.transform = 'translateY(0)'; hamburgerButton.style.boxShadow = '1px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(255, 255, 255, 0.5), 6px 6px 10px rgba(0, 0, 0, 0.1) inset, -6px -6px 10px rgba(255, 255, 255, 0) inset'; }); hamburgerButton.addEventListener('mousedown', (e) => e.preventDefault()); hamburgerButton.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); hamburgerButton.blur(); appState.hamburgerMenuOpen ? hamburgerMenu.hideHamburgerMenu() : hamburgerMenu.showHamburgerMenu(); }); return hamburgerButton; }, addSearchBox() { try { if (utils.isEngineContainerExists()) return; const punkJetBox = document.createElement("div"); punkJetBox.id = "punkjet-search-box"; punkJetBox.className = CLASS_NAMES.ENGINE_CONTAINER; punkJetBox.style.cssText = ` display: flex; z-index: 9999; position: fixed; transition: all 0.3s ease; `; this.updateSearchBoxPosition(); const ulList = document.createElement('div'); ulList.className = CLASS_NAMES.ENGINE_DISPLAY; ulList.style.cssText = ` overflow-x: auto; overflow-y: hidden; display: flex; flex-grow: 1; `; const hamburgerButton = this.createHamburgerButton(); punkJetBox.appendChild(hamburgerButton); const fragment = document.createDocumentFragment(); const showList = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK).split('-'); showList.forEach(showMark => { const item = appState.searchUrlMap.find(engine => engine.mark === showMark); if (item) fragment.appendChild(this.createEngineButton(item)); }); ulList.appendChild(fragment); punkJetBox.appendChild(ulList); document.body.appendChild(punkJetBox); appState.containerAdded = true; this.initScrollListener(); window.addEventListener('resize', () => this.updateSearchBoxPosition()); document.addEventListener('focusin', () => this.updateSearchBoxPosition()); document.addEventListener('focusout', () => this.updateSearchBoxPosition()); document.addEventListener('click', (e) => { if (!e.target.closest(`#${CLASS_NAMES.HAMBURGER_MENU}`) && !e.target.closest('.engine-hamburger-button')) { hamburgerMenu.hideHamburgerMenu(); } }); setTimeout(() => this.enableDragAndSort(), DEFAULT_CONFIG.DRAG_SORT_DELAY); } catch (error) { console.error("添加搜索框失败:", error.message); } }, enableDragAndSort() { const container = document.querySelector(`.${CLASS_NAMES.ENGINE_DISPLAY}`); if (!container) return; const buttons = container.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`); buttons.forEach(button => { button.draggable = true; button.addEventListener('dragstart', (e) => { button.classList.add(CLASS_NAMES.DRAGGING); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', button.getAttribute('url')); }); button.addEventListener('dragend', () => { button.classList.remove(CLASS_NAMES.DRAGGING); utils.saveButtonOrder(); }); button.addEventListener('dragover', (e) => e.preventDefault()); button.addEventListener('dragenter', (e) => { e.preventDefault(); button.classList.add(CLASS_NAMES.DRAG_OVER); }); button.addEventListener('dragleave', () => { button.classList.remove(CLASS_NAMES.DRAG_OVER); }); button.addEventListener('drop', (e) => { e.preventDefault(); button.classList.remove(CLASS_NAMES.DRAG_OVER); const draggingButton = document.querySelector(`.${CLASS_NAMES.DRAGGING}`); if (draggingButton && draggingButton !== button) { const buttonsArray = Array.from(container.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`)); const draggedIndex = buttonsArray.indexOf(draggingButton); const targetIndex = buttonsArray.indexOf(button); if (draggedIndex < targetIndex) { container.insertBefore(draggingButton, button.nextSibling); } else { container.insertBefore(draggingButton, button); } utils.markUnsavedChanges(); } }); }); }, initScrollListener() { const passiveOptions = { passive: true }; const handleScroll = () => { const st = window.pageYOffset || document.documentElement.scrollTop; const isInteractingWithSearchBar = document.querySelector(`.${CLASS_NAMES.ENGINE_CONTAINER}:hover`) !== null; if (isInteractingWithSearchBar) return; utils.clearAllTimeouts(); appState.isScrolling = true; debounceUtils.debounce('scroll_hide', () => { if (st > appState.lastScrollTop && st > 50) { this.hideSearchBox(); } else { this.showSearchBoxImmediately(); } appState.lastScrollTop = st <= 0 ? 0 : st; }, 50); appState.scrollTimeout = setTimeout(() => { appState.isScrolling = false; this.showSearchBoxDelayed(); }, DEFAULT_CONFIG.SCROLL_TIMEOUT_DURATION); }; const handleTouchStart = (e) => { const isTouchingEngineBar = e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`) !== null; if (isTouchingEngineBar) { appState.isInteractingWithEngineBar = true; if (e.target.closest(`.${CLASS_NAMES.ENGINE_BUTTON}`)) { e.preventDefault(); } } else { appState.isInteractingWithEngineBar = false; } appState.touchStartY = e.touches[0].clientY; }; const handleTouchMove = (e) => { if (appState.isInteractingWithEngineBar) return; if (appState.touchStartY === null) return; if (e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`)) return; const touchY = e.touches[0].clientY; const diff = appState.touchStartY - touchY; debounceUtils.throttle('touch_move', () => { if (Math.abs(diff) > 10) { diff > 0 ? this.hideSearchBox() : this.showSearchBoxImmediately(); } }, 100); }; const handleTouchEnd = (e) => { if (appState.isInteractingWithEngineBar) { setTimeout(() => { appState.isInteractingWithEngineBar = false; }, 100); } appState.touchStartY = null; this.showSearchBoxDelayed(); }; const handleWheel = (e) => { if (e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`)) return; setTimeout(() => { const st = window.pageYOffset || document.documentElement.scrollTop; if (st > appState.lastScrollTop && st > 50) { this.hideSearchBox(); } else { this.showSearchBoxImmediately(); } appState.lastScrollTop = st <= 0 ? 0 : st; this.showSearchBoxDelayed(); }, 10); }; window.addEventListener('scroll', handleScroll, passiveOptions); window.addEventListener('wheel', handleWheel, passiveOptions); window.addEventListener('touchstart', handleTouchStart, passiveOptions); window.addEventListener('touchmove', handleTouchMove, passiveOptions); window.addEventListener('touchend', handleTouchEnd, passiveOptions); this.initEngineBarTouchHandling(); document.addEventListener('click', (e) => { if (e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`)) return; if (!e.target.closest(`#${CLASS_NAMES.MANAGEMENT_PANEL}`) && !e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`)) { this.showSearchBoxImmediately(); } }); document.addEventListener('focusin', (e) => { if (e.target.matches('input, textarea')) { this.showSearchBoxImmediately(); } }); document.addEventListener('mouseenter', (e) => { if (e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`) || e.target.closest(`.${CLASS_NAMES.ENGINE_BUTTON}`)) { this.showSearchBoxImmediately(); } }, true); const stopPropagationHandler = (e) => { if (e.target.closest(`.${CLASS_NAMES.ENGINE_CONTAINER}`)) { e.stopPropagation(); } }; document.addEventListener('wheel', stopPropagationHandler, passiveOptions); document.addEventListener('touchmove', stopPropagationHandler, passiveOptions); }, initEngineBarTouchHandling() { const engineContainer = document.querySelector(`.${CLASS_NAMES.ENGINE_CONTAINER}`); if (!engineContainer) return; const preventPropagation = (e) => { e.stopPropagation(); }; const touchEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel']; touchEvents.forEach(eventType => { engineContainer.addEventListener(eventType, preventPropagation, { passive: true }); const buttons = engineContainer.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`); buttons.forEach(button => { button.addEventListener(eventType, preventPropagation, { passive: true }); }); }); engineContainer.addEventListener('touchstart', (e) => { if (e.target.closest(`.${CLASS_NAMES.ENGINE_BUTTON}`)) { appState.isInteractingWithEngineBar = true; } }, { passive: true }); engineContainer.addEventListener('touchend', () => { setTimeout(() => { appState.isInteractingWithEngineBar = false; }, 150); }, { passive: true }); }, showSearchBoxImmediately() { utils.clearAllTimeouts(); if (!appState.punkJetBoxVisible) { appState.punkJetBoxVisible = true; this.updateSearchBoxPosition(); } }, showSearchBoxDelayed() { utils.clearAllTimeouts(); appState.hideTimeout = setTimeout(() => { this.showSearchBoxImmediately(); }, DEFAULT_CONFIG.SHOW_SEARCH_BOX_DELAY); }, hideSearchBox() { if (appState.punkJetBoxVisible) { appState.punkJetBoxVisible = false; this.updateSearchBoxPosition(); } }, hideHamburgerMenu() { hamburgerMenu.hideHamburgerMenu(); }, showHamburgerMenu() { hamburgerMenu.showHamburgerMenu(); }, toggleHamburgerMenu() { hamburgerMenu.toggleHamburgerMenu(); } }; // ===== 搜索遮罩层模块 ===== const searchOverlay = { createSearchOverlay() { let overlay = document.getElementById(CLASS_NAMES.SEARCH_OVERLAY); if (overlay) return overlay; overlay = document.createElement("div"); overlay.id = CLASS_NAMES.SEARCH_OVERLAY; overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); z-index: 9998; display: none; flex-direction: column; backdrop-filter: blur(10px); overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; `; const scrollContainer = document.createElement("div"); scrollContainer.style.cssText = ` width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 10px 0; box-sizing: border-box; `; const searchContainer = document.createElement("div"); searchContainer.style.cssText = ` width: 95%; max-width: 900px; min-height: min-content; background: linear-gradient(145deg, #f8f9fa, #ffffff); border-radius: 20px; padding: 25px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.05); position: relative; border: 1px solid rgba(255, 255, 255, 0.5); margin: 10px auto; box-sizing: border-box; `; const updateSearchContainerStyle = () => { const isMobile = window.innerWidth <= 768; if (isMobile) { searchContainer.style.width = '92%'; searchContainer.style.padding = '20px 15px'; searchContainer.style.borderRadius = '16px'; searchContainer.style.margin = '5px auto'; } else { searchContainer.style.width = '95%'; searchContainer.style.padding = '25px 20px'; searchContainer.style.borderRadius = '20px'; searchContainer.style.margin = '10px auto'; } }; updateSearchContainerStyle(); window.addEventListener('resize', updateSearchContainerStyle); const closeBtn = document.createElement("button"); closeBtn.innerHTML = utils.createInlineSVG('times'); closeBtn.setAttribute('aria-label', '关闭搜索'); closeBtn.style.cssText = ` position: absolute; top: 16px; right: 16px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: none; font-size: 18px; color: #64748b; cursor: pointer; padding: 3px; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.8); z-index: 1; backdrop-filter: blur(10px); `; closeBtn.addEventListener('mouseenter', () => { closeBtn.style.background = 'linear-gradient(135deg, #ff4757 0%, #ff3742 100%)'; closeBtn.style.color = 'white'; closeBtn.style.transform = 'scale(1.1) rotate(90deg)'; closeBtn.style.boxShadow = '0 8px 25px rgba(255, 71, 87, 0.4)'; }); closeBtn.addEventListener('mouseleave', () => { closeBtn.style.background = 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)'; closeBtn.style.color = '#64748b'; closeBtn.style.transform = 'scale(1) rotate(0deg)'; closeBtn.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05)'; }); closeBtn.addEventListener('click', () => this.hideSearchOverlay()); const title = document.createElement("h2"); title.innerHTML = utils.createInlineSVG('search') + ' 快捷搜索 (Alt+S)'; title.style.cssText = ` margin: 0 0 20px 0; color: #2c3e50; text-align: center; font-size: clamp(18px, 4vw, 24px); text-shadow: 1px 1px 2px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; word-break: break-word; `; const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "输入关键词或网址..."; searchInput.id = "overlay-search-input"; searchInput.setAttribute('autocomplete', 'off'); searchInput.setAttribute('autocorrect', 'off'); searchInput.setAttribute('autocapitalize', 'off'); searchInput.setAttribute('spellcheck', 'false'); searchInput.style.cssText = ` width: 100%; padding: 20px 24px; box-sizing: border-box; background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%); border-radius: 16px; font-size: 18px; color: #1e293b; outline: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.04), inset -3px -3px 6px rgba(255, 255, 255, 0.8), 0 8px 30px rgba(0, 0, 0, 0.08); border: 2px solid transparent; margin-bottom: 28px; -webkit-appearance: none; font-weight: 500; line-height: 1.5; min-height: 64px; `; if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { searchInput.style.fontSize = '16px'; searchInput.style.padding = '20px 22px'; searchInput.style.minHeight = '50px'; } searchInput.addEventListener('focus', () => { searchInput.style.boxShadow = 'inset 3px 3px 6px rgba(0, 0, 0, 0.06), inset -3px -3px 6px rgba(255, 255, 255, 0.9), 0 12px 40px rgba(99, 102, 241, 0.15)'; searchInput.style.borderColor = 'transparent'; searchInput.style.background = 'linear-gradient(135deg, #ffffff 0%, #fefefe 100%)'; searchInput.style.transform = 'translateY(-2px)'; }); searchInput.addEventListener('blur', () => { searchInput.style.boxShadow = 'inset 3px 3px 6px rgba(0, 0, 0, 0.04), inset -3px -3px 6px rgba(255, 255, 255, 0.8), 0 8px 30px rgba(0, 0, 0, 0.08)'; searchInput.style.borderColor = 'transparent'; searchInput.style.transform = 'translateY(0)'; }); const navigationSection = document.createElement("div"); navigationSection.style.cssText = `margin-top: 10px;`; const navTitle = document.createElement("h3"); navTitle.innerHTML = utils.createInlineSVG('globe') + ' 常用网站导航'; navTitle.style.cssText = ` color: #2c3e50; margin-bottom: 15px; font-size: clamp(16px, 3.5vw, 18px); display: flex; align-items: center; justify-content: center; gap: 8px; border-bottom: 2px solid #3498db; padding-bottom: 8px; text-align: center; flex-wrap: wrap; `; navigationSection.appendChild(navTitle); const categoriesContainer = document.createElement("div"); categoriesContainer.style.cssText = ` display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 10px; `; const updateGridLayout = () => { const width = window.innerWidth; if (width <= 480) { categoriesContainer.style.gridTemplateColumns = '1fr'; categoriesContainer.style.gap = '12px'; } else if (width <= 768) { categoriesContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(250px, 1fr))'; categoriesContainer.style.gap = '14px'; } else { categoriesContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(280px, 1fr))'; categoriesContainer.style.gap = '16px'; } }; updateGridLayout(); window.addEventListener('resize', updateGridLayout); const websiteCategories = [ { title: "🔧 逆向论坛区", sites: [ { name: "MT论坛", url: "https://bbs.binmt.cc" }, { name: "吾爱破解", url: "https://www.52pojie.cn" }, { name: "看雪论坛", url: "https://bbs.pediy.com" }, { name: "飘云阁", url: "https://www.chinapyg.com" }, { name: "卡饭论坛", url: "https://www.kafan.cn" }, { name: "绿盟科技社区", url: "https://www.nsfocus.net" }, { name: "乌云漏洞平台", url: "https://wooyun.x10sec.org" }, { name: "渗透测试论坛", url: "https://www.hetianlab.com" }, { name: "XDA Developers", url: "https://forum.xda-developers.com" }, { name: "Reddit ReverseEngineering", url: "https://www.reddit.com/r/ReverseEngineering" }, { name: "CrackWatch", url: "https://www.reddit.com/r/CrackWatch" } ] }, { title: "💎 软件资源区", sites: [ { name: "GETMODS", url: "https://getmodsapk.com/" }, { name: "APKdone", url: "https://apkdone.com/" }, { name: "LITEAPKS", url: "https://liteapks.com/" }, { name: "APKMODY", url: "https://apkmody.com/" }, { name: "423Down", url: "https://www.423down.com" }, { name: "果核剥壳", url: "https://www.ghxi.com" }, { name: "大眼仔旭", url: "https://www.dayanzai.me" }, { name: "ZD423", url: "https://www.zdfans.com" }, { name: "软件缘", url: "https://www.appcgn.com" }, { name: "小众软件", url: "https://www.appinn.com" }, { name: "Rutor", url: "http://rutor.info" }, { name: "RuTracker", url: "https://rutracker.org" } ] }, { title: "🤖 AI工具", sites: [ { name: "ChatGPT", url: "https://chat.openai.com" }, { name: "deepseek", url: "https://www.deepseek.com/" }, { name: "Claude", url: "https://claude.ai" }, { name: "文心一言", url: "https://yiyan.baidu.com" }, { name: "豆包", url: "https://www.doubao.com/chat/" }, { name: "讯飞星火", url: "https://xinghuo.xfyun.cn" }, { name: "智谱清言", url: "https://chatglm.cn" }, { name: "Midjourney", url: "https://www.midjourney.com" }, { name: "Stable Diffusion", url: "https://stability.ai" }, { name: "Notion AI", url: "https://www.notion.so" } ] }, { title: "🎬 影视区", sites: [ { name: "网飞猫", url: "https://www.ncat21.com/" }, { name: "毒舌电影", url: "https://www.ncat21.com/" }, { name: "诺影导航", url: "https://nuoin.com/" }, { name: "哔哩哔哩", url: "https://www.bilibili.com" }, { name: "YouTube", url: "https://www.youtube.com" }, { name: "Netflix", url: "https://www.netflix.com" }, { name: "低端影视", url: "https://ddys.tv" }, { name: "NT动漫", url: "https://ntdm8.com/" }, { name: "AGE动漫", url: "https://m.agedm.io/#/" }, { name: "樱花动漫", url: "https://www.yhdm.io" }, { name: "樱花动漫2", url: "https://www.295yhw.com/" }, { name: "腾讯视频", url: "https://v.qq.com" }, { name: "爱奇艺", url: "https://www.iqiyi.com" }, { name: "芒果TV", url: "https://www.mgtv.com" }, { name: "1905电影网", url: "https://www.1905.com" } ] }, { title: "🛠️ 工具区", sites: [ { name: "ProcessOn", url: "https://www.processon.com" }, { name: "SmallPDF", url: "https://smallpdf.com" }, { name: "iLovePDF", url: "https://www.ilovepdf.com" }, { name: "TinyPNG", url: "https://tinypng.com" }, { name: "RemoveBG", url: "https://www.remove.bg" }, { name: "Canva", url: "https://www.canva.com" }, { name: "草料二维码", url: "https://cli.im" }, { name: "石墨文档", url: "https://shimo.im" }, { name: "腾讯文档", url: "https://docs.qq.com" }, { name: "讯飞听见", url: "https://www.iflyrec.com" }, { name: "格式工厂在线版", url: "https://www.pcgeshi.com" }, { name: "Figma", url: "https://www.figma.com" }, { name: "Excalidraw", url: "https://excalidraw.com" }, { name: "Photopea", url: "https://www.photopea.com" } ] }, { title: "📚 学习资源", sites: [ { name: "知乎", url: "https://www.zhihu.com" }, { name: "豆瓣", url: "https://www.douban.com" }, { name: "慕课网", url: "https://www.imooc.com" }, { name: "B站学习区", url: "https://www.bilibili.com" }, { name: "Coursera", url: "https://www.coursera.org" }, { name: "网易云课堂", url: "https://study.163.com" }, { name: "腾讯课堂", url: "https://ke.qq.com" }, { name: "可汗学院", url: "https://www.khanacademy.org" }, { name: "中国大学MOOC", url: "https://www.icourse163.org" }, { name: "知乎大学", url: "https://www.zhihu.com/university" }, { name: "豆包文库", url: "https://www.docin.com" }, { name: "Library Genesis", url: "http://libgen.is" }, { name: "Z-Library", url: "https://z-lib.is" }, { name: "Sci-Hub", url: "https://sci-hub.se" } ] }, { title: "🛒 生活购物", sites: [ { name: "淘宝", url: "https://www.taobao.com" }, { name: "京东", url: "https://www.jd.com" }, { name: "拼多多", url: "https://www.pinduoduo.com" }, { name: "美团", url: "https://www.meituan.com" }, { name: "饿了么", url: "https://www.ele.me" }, { name: "苏宁易购", url: "https://www.suning.com" }, { name: "唯品会", url: "https://www.vip.com" }, { name: "闲鱼", url: "https://2.taobao.com" }, { name: "盒马鲜生", url: "https://www.hemaxiansheng.com" }, { name: "每日优鲜", url: "https://www.missfresh.cn" }, { name: "亚马逊", url: "https://www.amazon.cn" }, { name: "当当网", url: "https://www.dangdang.com" }, { name: "考拉海购", url: "https://www.kaola.com" } ] }, { title: "📰 新闻资讯", sites: [ { name: "微博", url: "https://weibo.com" }, { name: "今日头条", url: "https://www.toutiao.com" }, { name: "澎湃新闻", url: "https://www.thepaper.cn" }, { name: "虎嗅", url: "https://www.huxiu.com" }, { name: "36氪", url: "https://www.36kr.com" }, { name: "人民日报网", url: "https://www.people.com.cn" }, { name: "新华网", url: "https://www.xinhuanet.com" }, { name: "央视新闻", url: "https://news.cctv.com" }, { name: "财新网", url: "https://www.caixin.com" }, { name: "第一财经", url: "https://www.yicai.com" }, { name: "界面新闻", url: "https://www.jiemian.com" }, { name: "华尔街见闻", url: "https://wallstreetcn.com" }, { name: "雪球", url: "https://xueqiu.com" } ] }, { title: "🎵 音乐娱乐", sites: [ { name: "网易云音乐", url: "https://music.163.com" }, { name: "QQ音乐", url: "https://y.qq.com" }, { name: "酷狗音乐", url: "https://www.kugou.com" }, { name: "Spotify", url: "https://open.spotify.com" }, { name: "喜马拉雅", url: "https://www.ximalaya.com" }, { name: "酷我音乐", url: "https://www.kuwo.cn" }, { name: "咪咕音乐", url: "https://music.migu.cn" }, { name: "荔枝FM", url: "https://www.lizhi.fm" }, { name: "蜻蜓FM", url: "https://www.qingting.fm" }, { name: "网易云音乐播客", url: "https://music.163.com/podcast" }, { name: "Bandcamp（独立音乐）", url: "https://bandcamp.com" }, { name: "SoundCloud", url: "https://soundcloud.com" }, { name: "Audius", url: "https://audius.co" } ] }, { title: "💻 技术社区", sites: [ { name: "V2EX", url: "https://www.v2ex.com" }, { name: "掘金", url: "https://juejin.cn" }, { name: "SegmentFault", url: "https://segmentfault.com" }, { name: "CSDN", url: "https://www.csdn.net" }, { name: "开源中国", url: "https://www.oschina.net" }, { name: "GitHub", url: "https://github.com" }, { name: "GitLab", url: "https://about.gitlab.com" }, { name: "Stack Overflow", url: "https://stackoverflow.com" }, { name: "华为开发者联盟", url: "https://developer.huawei.com" }, { name: "小米开发者平台", url: "https://dev.mi.com" }, { name: "阿里开发者社区", url: "https://developer.aliyun.com" }, { name: "腾讯云开发者社区", url: "https://cloud.tencent.com/developer" }, { name: "字节跳动技术团队", url: "https://techblog.bytedance.com" } ] }, { title: "🎮 游戏区", sites: [ { name: "Steam", url: "https://store.steampowered.com" }, { name: "Epic Games", url: "https://www.epicgames.com" }, { name: "GOG", url: "https://www.gog.com" }, { name: "3DMGAME", url: "https://www.3dmgame.com" }, { name: "游民星空", url: "https://www.gamersky.com" }, { name: "游侠网", url: "https://www.ali213.net" }, { name: "NGA玩家社区", url: "https://bbs.nga.cn" }, { name: "TapTap", url: "https://www.taptap.cn" }, { name: "好游快爆", url: "https://www.3839.com" }, { name: "itch.io", url: "https://itch.io" }, { name: "GameJolt", url: "https://gamejolt.com" } ] }, { title: "🔐 网络安全", sites: [ { name: "FreeBuf", url: "https://www.freebuf.com" }, { name: "安全客", url: "https://www.anquanke.com" }, { name: "SecWiki", url: "https://www.sec-wiki.com" }, { name: "HackerOne", url: "https://www.hackerone.com" }, { name: "Bugcrowd", url: "https://www.bugcrowd.com" }, { name: "Exploit Database", url: "https://www.exploit-db.com" }, { name: "Metasploit", url: "https://www.metasploit.com" }, { name: "Kali Linux", url: "https://www.kali.org" }, { name: "OWASP", url: "https://owasp.org" }, { name: "SANS Institute", url: "https://www.sans.org" } ] }, { title: "📱 应用下载", sites: [ { name: "Google Play", url: "https://play.google.com" }, { name: "APKPure", url: "https://apkpure.com" }, { name: "APKMirror", url: "https://www.apkmirror.com" }, { name: "F-Droid", url: "https://f-droid.org" }, { name: "Aptoide", url: "https://www.aptoide.com" }, { name: "豌豆荚", url: "https://www.wandoujia.com" }, { name: "应用宝", url: "https://sj.qq.com" }, { name: "小米应用商店", url: "https://app.mi.com" }, { name: "华为应用市场", url: "https://appgallery.huawei.com" }, { name: "酷安", url: "https://www.coolapk.com" } ] }, { title: "🌐 开发者工具", sites: [ { name: "CodePen", url: "https://codepen.io" }, { name: "JSFiddle", url: "https://jsfiddle.net" }, { name: "Replit", url: "https://replit.com" }, { name: "Glitch", url: "https://glitch.com" }, { name: "CodeSandbox", url: "https://codesandbox.io" }, { name: "Postman", url: "https://www.postman.com" }, { name: "Swagger", url: "https://swagger.io" }, { name: "JSON Formatter", url: "https://jsonformatter.org" }, { name: "RegExr", url: "https://regexr.com" }, { name: "DevDocs", url: "https://devdocs.io" } ] }, { title: "🎨 设计资源", sites: [ { name: "Dribbble", url: "https://dribbble.com" }, { name: "Behance", url: "https://www.behance.net" }, { name: "UI中国", url: "https://www.ui.cn" }, { name: "站酷", url: "https://www.zcool.com.cn" }, { name: "花瓣网", url: "https://huaban.com" }, { name: "Pinterest", url: "https://www.pinterest.com" }, { name: "Unsplash", url: "https://unsplash.com" }, { name: "Pexels", url: "https://www.pexels.com" }, { name: "Iconfont", url: "https://www.iconfont.cn" }, { name: "Flaticon", url: "https://www.flaticon.com" } ] }, { title: "📊 数据资源", sites: [ { name: "Kaggle", url: "https://www.kaggle.com" }, { name: "天池大数据", url: "https://tianchi.aliyun.com" }, { name: "和鲸社区", url: "https://www.kesci.com" }, { name: "Data.gov", url: "https://www.data.gov" }, { name: "Google Dataset", url: "https://datasetsearch.research.google.com" }, { name: "UCI数据集", url: "https://archive.ics.uci.edu" }, { name: "国家统计局", url: "https://www.stats.gov.cn" }, { name: "世界银行数据", url: "https://data.worldbank.org" }, { name: "GitHub数据集", url: "https://github.com/awesomedata/awesome-public-datasets" } ] } ]; websiteCategories.forEach(category => { const categoryElement = document.createElement("div"); categoryElement.style.cssText = ` background: rgba(255, 255, 255, 0.9); border-radius: 12px; padding: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.06); transition: transform 0.2s ease; break-inside: avoid; `; categoryElement.addEventListener('mouseenter', () => { categoryElement.style.transform = 'translateY(-2px)'; categoryElement.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.12)'; }); categoryElement.addEventListener('mouseleave', () => { categoryElement.style.transform = 'translateY(0)'; categoryElement.style.boxShadow = '0 2px 12px rgba(0, 0, 0, 0.08)'; }); const categoryTitle = document.createElement("h4"); categoryTitle.textContent = category.title; categoryTitle.style.cssText = ` margin: 0 0 12px 0; color: #2c3e50; font-size: 14px; font-weight: 600; border-bottom: 1px solid #ecf0f1; padding-bottom: 8px; word-break: break-word; `; const sitesContainer = document.createElement("div"); sitesContainer.style.cssText = ` display: flex; flex-wrap: wrap; gap: 6px; `; category.sites.forEach(site => { const siteLink = document.createElement("a"); siteLink.textContent = site.name; siteLink.href = site.url; siteLink.target = "_blank"; siteLink.rel = "noopener noreferrer"; siteLink.style.cssText = ` display: inline-block; padding: 6px 10px; background: linear-gradient(145deg, #f8f9fa, #ffffff); border: 1px solid #e9ecef; border-radius: 6px; text-decoration: none; color: #495057; font-size: 12px; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; flex-shrink: 0; `; siteLink.addEventListener('mouseenter', () => { siteLink.style.background = 'linear-gradient(145deg, #3498db, #2980b9)'; siteLink.style.color = 'white'; siteLink.style.transform = 'translateY(-1px)'; siteLink.style.boxShadow = '0 3px 8px rgba(0, 0, 0, 0.15)'; siteLink.style.borderColor = '#2980b9'; }); siteLink.addEventListener('mouseleave', () => { siteLink.style.background = 'linear-gradient(145deg, #f8f9fa, #ffffff)'; siteLink.style.color = '#495057'; siteLink.style.transform = 'translateY(0)'; siteLink.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.08)'; siteLink.style.borderColor = '#e9ecef'; }); siteLink.addEventListener('touchstart', () => { siteLink.style.background = 'linear-gradient(145deg, #3498db, #2980b9)'; siteLink.style.color = 'white'; }, { passive: true }); sitesContainer.appendChild(siteLink); }); categoryElement.appendChild(categoryTitle); categoryElement.appendChild(sitesContainer); categoriesContainer.appendChild(categoryElement); }); navigationSection.appendChild(categoriesContainer); searchContainer.appendChild(closeBtn); searchContainer.appendChild(title); searchContainer.appendChild(searchInput); searchContainer.appendChild(navigationSection); scrollContainer.appendChild(searchContainer); overlay.appendChild(scrollContainer); searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { this.performOverlaySearch(); } }); overlay.addEventListener('click', (e) => { if (e.target === overlay) { this.hideSearchOverlay(); } }); searchContainer.addEventListener('click', (e) => { e.stopPropagation(); }); document.body.appendChild(overlay); return overlay; }, showSearchOverlay() { const overlay = this.createSearchOverlay(); const searchInput = document.getElementById("overlay-search-input"); overlay.style.display = 'flex'; appState.searchOverlayVisible = true; accessibility.trapFocus(overlay); setTimeout(() => { searchInput.focus(); searchInput.select(); }, 100); domHandler.hideHamburgerMenu(); document.body.style.overflow = 'hidden'; }, hideSearchOverlay() { const overlay = document.getElementById(CLASS_NAMES.SEARCH_OVERLAY); if (overlay) { overlay.style.display = 'none'; appState.searchOverlayVisible = false; accessibility.removeFocusTrap(overlay); document.body.style.overflow = ''; } }, performOverlaySearch() { const searchInput = document.getElementById("overlay-search-input"); const query = searchInput.value.trim(); if (!query) { searchInput.focus(); return; } if (utils.isValidUrl(query)) { window.open(query, '_blank'); this.hideSearchOverlay(); return; } const showList = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK).split('-'); if (showList.length > 0) { const firstEngine = appState.searchUrlMap.find(item => item.mark === showList[0]); if (firstEngine) { const searchUrl = firstEngine.searchUrl.replace('{keyword}', encodeURIComponent(query)); window.open(searchUrl, '_blank'); this.hideSearchOverlay(); } } } }; // ===== 汉堡菜单模块 ===== const hamburgerMenu = { sortMode: GM_getValue('engine_sort_mode', 'default'), createHamburgerMenu() { let menu = document.getElementById(CLASS_NAMES.HAMBURGER_MENU); if (menu) return menu; menu = document.createElement("div"); menu.id = CLASS_NAMES.HAMBURGER_MENU; menu.style.cssText = ` position: fixed; bottom: 50px; left: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 15px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15); backdrop-filter: blur(5px); z-index: 10001; display: none; flex-direction: column; padding: 10px; gap: 5px; min-width: 180px; border: 1px solid rgba(255, 255, 255, 0.2); `; const menuItems = [ { icon: 'search', text: '快捷搜索 (Alt+S)', action: () => searchOverlay.showSearchOverlay() }, { icon: 'cog', text: '引擎管理 (Alt+E)', action: () => managementPanel.showManagementPanel() }, { icon: 'sort', text: '引擎排序设置', action: (e) => this.showSortContextMenu(e) } ]; menuItems.forEach(item => { const menuItem = document.createElement("button"); menuItem.innerHTML = utils.createInlineSVG(item.icon) + ` ${item.text}`; menuItem.style.cssText = ` display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: #2c3e50; transition: all 0.3s ease; text-align: left; outline: none; `; menuItem.addEventListener('mouseenter', () => { menuItem.style.background = 'rgba(52, 152, 219, 0.1)'; }); menuItem.addEventListener('mouseleave', () => { menuItem.style.background = 'none'; }); menuItem.addEventListener('mousedown', (e) => { e.preventDefault(); }); menuItem.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); menuItem.blur(); item.action(e); if (item.icon !== 'sort') { this.hideHamburgerMenu(); } }); menu.appendChild(menuItem); }); const setOffsetButton = document.createElement('button'); setOffsetButton.innerHTML = utils.createInlineSVG('sog') + ' 设置底部偏移'; setOffsetButton.style.cssText = ` display: flex; align-items: center; gap: 10px; padding: 12px 15px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: #2c3e50; transition: all 0.3s ease; text-align: left; margin-top: 5px; outline: none; `; setOffsetButton.addEventListener('mouseenter', () => { setOffsetButton.style.background = 'rgba(52, 152, 219, 0.1)'; }); setOffsetButton.addEventListener('mouseleave', () => { setOffsetButton.style.background = 'none'; }); setOffsetButton.addEventListener('mousedown', (e) => { e.preventDefault(); }); setOffsetButton.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); setOffsetButton.blur(); const currentValue = utils.getEngineBarOffset(); const userValue = prompt(`请输入搜索栏在输入法弹出时的底部偏移（单位px）：`, currentValue); if (userValue !== null && !isNaN(userValue)) { utils.setEngineBarOffset(userValue); alert(`偏移值已设置为 ${userValue}px`); domHandler.updateSearchBoxPosition(); } this.hideHamburgerMenu(); }); menu.appendChild(setOffsetButton); document.body.appendChild(menu); return menu; }, showSortContextMenu(event) { this.removeSortContextMenu(); const contextMenu = document.createElement('div'); contextMenu.id = 'sort-context-menu'; contextMenu.style.cssText = ` position: absolute; top: 0; left: 160px; background: white; border-radius: 8px; box-shadow: 0 3px 15px rgba(0,0,0,0.2); padding: 5px 0; min-width: 150px; z-index: 10002; border: 1px solid #eee; `; const sortOptions = [ { text: '默认模式', mode: 'default', description: '保持拖拽排序' }, { text: '智能排序', mode: 'smart', description: '按使用频率自动排列' }, { text: '关闭', mode: 'close', description: '' } ]; sortOptions.forEach(option => { const optionItem = document.createElement('button'); optionItem.style.cssText = ` width: 100%; text-align: left; padding: 8px 15px; border: none; background: none; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; `; if (option.mode !== 'close') { const checkIcon = document.createElement('span'); checkIcon.innerHTML = this.sortMode === option.mode ? utils.createInlineSVG('check', '#27ae60') : ''; optionItem.appendChild(checkIcon); const textContainer = document.createElement('div'); textContainer.style.cssText = `display: flex; flex-direction: column;`; const mainText = document.createElement('span'); mainText.textContent = option.text; mainText.style.fontWeight = '500'; const descText = document.createElement('span'); descText.textContent = option.description; descText.style.fontSize = '11px'; descText.style.color = '#7f8c8d'; textContainer.appendChild(mainText); textContainer.appendChild(descText); optionItem.appendChild(textContainer); } else { optionItem.textContent = option.text; optionItem.style.justifyContent = 'center'; optionItem.style.color = '#e74c3c'; optionItem.style.marginTop = '5px'; optionItem.style.borderTop = '1px solid #eee'; } optionItem.addEventListener('click', () => { if (option.mode === 'close') { this.removeSortContextMenu(); return; } this.sortMode = option.mode; GM_setValue('engine_sort_mode', option.mode); this.applyEngineSort(); this.removeSortContextMenu(); this.showHamburgerMenu(); }); optionItem.addEventListener('mouseenter', () => { optionItem.style.background = 'rgba(52, 152, 219, 0.1)'; }); optionItem.addEventListener('mouseleave', () => { optionItem.style.background = 'none'; }); contextMenu.appendChild(optionItem); }); const hamburgerMenuEl = document.getElementById(CLASS_NAMES.HAMBURGER_MENU); hamburgerMenuEl.appendChild(contextMenu); document.addEventListener('click', (e) => this.handleClickOutsideContextMenu(e)); }, removeSortContextMenu() { const contextMenu = document.getElementById('sort-context-menu'); if (contextMenu) contextMenu.remove(); document.removeEventListener('click', (e) => this.handleClickOutsideContextMenu(e)); }, handleClickOutsideContextMenu(e) { const contextMenu = document.getElementById('sort-context-menu'); const hamburgerMenuEl = document.getElementById(CLASS_NAMES.HAMBURGER_MENU); const sortMenuItem = hamburgerMenuEl?.querySelector('button:has(svg[aria-label="sort"])'); if (contextMenu && !contextMenu.contains(e.target) && e.target !== sortMenuItem) { this.removeSortContextMenu(); } }, applyEngineSort() { const engineDisplay = document.querySelector(`.${CLASS_NAMES.ENGINE_DISPLAY}`); if (!engineDisplay) return; const buttons = Array.from(engineDisplay.querySelectorAll(`.${CLASS_NAMES.ENGINE_BUTTON}`)); if (buttons.length === 0) return; engineDisplay.innerHTML = ''; if (this.sortMode === 'default') { const originalOrder = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK).split('-'); const sortedButtons = originalOrder.map(mark => buttons.find(btn => btn.getAttribute('data-mark') === mark) ).filter(btn => btn); sortedButtons.forEach(btn => engineDisplay.appendChild(btn)); domHandler.enableDragAndSort(); } else if (this.sortMode === 'smart') { const usageCounts = GM_getValue('engine_usage_counts', {}); const sortedButtons = [...buttons].sort((a, b) => { const aMark = a.getAttribute('data-mark'); const bMark = b.getAttribute('data-mark'); const aCount = usageCounts[aMark] || 0; const bCount = usageCounts[bMark] || 0; return bCount - aCount; }); sortedButtons.forEach(btn => engineDisplay.appendChild(btn)); buttons.forEach(btn => { btn.draggable = false; btn.style.cursor = 'default'; }); } }, showHamburgerMenu() { const menu = this.createHamburgerMenu(); menu.style.display = 'flex'; appState.hamburgerMenuOpen = true; accessibility.updateHamburgerAriaState(); accessibility.trapFocus(menu); }, hideHamburgerMenu() { const menu = document.getElementById(CLASS_NAMES.HAMBURGER_MENU); if (menu) { menu.style.display = 'none'; appState.hamburgerMenuOpen = false; accessibility.updateHamburgerAriaState(); accessibility.removeFocusTrap(menu); this.removeSortContextMenu(); } }, toggleHamburgerMenu() { appState.hamburgerMenuOpen ? this.hideHamburgerMenu() : this.showHamburgerMenu(); } }; // ===== 管理面板模块 ===== const managementPanel = { createActionButton(html, color, title) { const button = document.createElement("button"); button.innerHTML = html; button.title = title; button.style.cssText = ` padding: 10px 15px; background-color: ${color}; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; min-width: 120px; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; justify-content: center; `; button.addEventListener("mouseenter", () => { button.style.transform = "translateY(-2px)"; button.style.boxShadow = "0 4px 8px rgba(0,0,0,0.2)"; }); button.addEventListener("mouseleave", () => { button.style.transform = "translateY(0)"; button.style.boxShadow = "none"; }); return button; }, extractSearchEngineFromPage() { const searchInfo = { name: "", searchUrl: "", searchkeyName: [], matchUrl: "", mark: "", found: false }; try { const formResult = this.extractFromSearchForms(); if (formResult.found) return { ...searchInfo, ...formResult }; const inputResult = this.extractFromSearchInputs(); if (inputResult.found) return { ...searchInfo, ...inputResult }; const metaResult = this.extractFromMetaTags(); if (metaResult.found) return { ...searchInfo, ...metaResult }; const urlResult = this.extractFromURLParameters(); if (urlResult.found) return { ...searchInfo, ...urlResult }; const commonResult = this.extractFromCommonPatterns(); if (commonResult.found) return { ...searchInfo, ...commonResult }; } catch (error) { console.warn('搜索引擎信息提取失败:', error); } return searchInfo; }, extractFromSearchForms() { const searchForms = document.querySelectorAll('form'); const result = { found: false }; for (const form of searchForms) { const action = form.getAttribute('action') || ''; const method = (form.getAttribute('method') || 'get').toLowerCase(); const isSearchForm = this.isSearchForm(form, action); if (!isSearchForm) continue; const baseUrl = action.startsWith('http') ? action : new URL(action, window.location.origin).href; const keyParams = this.extractKeyParamsFromForm(form); if (keyParams.length === 0) continue; const searchUrl = this.buildSearchUrl(baseUrl, method, keyParams); const domain = new URL(baseUrl).hostname; const engineInfo = this.generateEngineInfo(domain, keyParams, searchUrl); return { ...engineInfo, found: true }; } return result; }, extractFromSearchInputs() { const searchInputSelectors = [ 'input[type="search"]', 'input[name*="search"]', 'input[name*="query"]', 'input[name*="q"]', 'input[name*="keyword"]', 'input[name*="key"]', 'input[name*="wd"]', 'input[name*="kw"]', 'input[placeholder*="搜索"]', 'input[placeholder*="search"]', 'input[placeholder*="查询"]', 'input[aria-label*="搜索"]', 'input[aria-label*="search"]' ]; const searchInputs = document.querySelectorAll(searchInputSelectors.join(',')); const result = { found: false }; if (searchInputs.length > 0) { const input = searchInputs[0]; const name = input.getAttribute('name') || 'q'; const domain = window.location.hostname; let searchUrl = ''; const form = input.form; if (form && form.action) { const baseUrl = form.action.startsWith('http') ? form.action : new URL(form.action, window.location.origin).href; const method = (form.getAttribute('method') || 'get').toLowerCase(); searchUrl = this.buildSearchUrl(baseUrl, method, [name]); } else { searchUrl = `${window.location.origin}/search?${name}={keyword}`; } const engineInfo = this.generateEngineInfo(domain, [name], searchUrl); return { ...engineInfo, found: true }; } return result; }, extractFromMetaTags() { const result = { found: false }; const ogSiteName = document.querySelector('meta[property="og:site_name"]'); const applicationName = document.querySelector('meta[name="application-name"]'); if (ogSiteName || applicationName) { const siteName = (ogSiteName?.getAttribute('content') || applicationName?.getAttribute('content') || '').toLowerCase(); const knownEngines = ['google', 'bing', 'baidu', 'duckduckgo', 'yahoo', 'yandex']; const isKnownEngine = knownEngines.some(engine => siteName.includes(engine)); if (isKnownEngine) { const domain = window.location.hostname; const keyParams = this.guessKeyParameters(); const searchUrl = `${window.location.origin}/search?${keyParams[0]}={keyword}`; const engineInfo = this.generateEngineInfo(domain, keyParams, searchUrl); return { ...engineInfo, found: true }; } } return result; }, extractFromURLParameters() { const result = { found: false }; const urlParams = new URLSearchParams(window.location.search); const searchParams = [ 'q', 'query', 'search', 'keyword', 'keywords', 'searchword', 'searchquery', 'searchterm', 'searchtext', 'searchkey', 'key', 'wd', 'kw', 'p', 's', 'string', 'phrase', 'terms', 'ask' ]; for (const param of searchParams) { if (urlParams.has(param)) { const domain = window.location.hostname; const searchUrl = `${window.location.origin}${window.location.pathname}?${param}={keyword}`; const engineInfo = this.generateEngineInfo(domain, [param], searchUrl); return { ...engineInfo, found: true }; } } return result; }, extractFromCommonPatterns() { const result = { found: false }; const domain = window.location.hostname; const knownPatterns = { 'google': { key: 'q', path: '/search' }, 'bing': { key: 'q', path: '/search' }, 'baidu': { key: 'wd', path: '/s' }, 'duckduckgo': { key: 'q', path: '/' }, 'yahoo': { key: 'p', path: '/search' }, 'yandex': { key: 'text', path: '/search' }, 'github': { key: 'q', path: '/search' } }; for (const [engine, pattern] of Object.entries(knownPatterns)) { if (domain.includes(engine)) { const searchUrl = `${window.location.origin}${pattern.path}?${pattern.key}={keyword}`; const engineInfo = this.generateEngineInfo(domain, [pattern.key], searchUrl); return { ...engineInfo, found: true }; } } return result; }, isSearchForm(form, action) { const formHtml = form.outerHTML.toLowerCase(); const actionLower = action.toLowerCase(); const searchIndicators = ['search', 'query', 'find', 'seek', 'lookup', 'q=']; if (searchIndicators.some(indicator => actionLower.includes(indicator) || formHtml.includes(indicator))) { return true; } const inputs = form.querySelectorAll('input[type="text"], input[type="search"]'); for (const input of inputs) { const name = (input.getAttribute('name') || '').toLowerCase(); const placeholder = (input.getAttribute('placeholder') || '').toLowerCase(); if (searchIndicators.some(indicator => name.includes(indicator) || placeholder.includes(indicator))) { return true; } } return false; }, extractKeyParamsFromForm(form) { const keyParams = []; const inputs = form.querySelectorAll('input[name]'); const searchParamPatterns = [ /^q$/, /^query/, /^search/, /^keyword/, /^key/, /^wd$/, /^kw$/, /^string/, /^phrase/, /^terms/, /^ask/, /^find/, /^seek/ ]; for (const input of inputs) { const name = input.getAttribute('name'); if (!name) continue; const isSearchParam = searchParamPatterns.some(pattern => pattern.test(name)); if (isSearchParam) keyParams.push(name); } if (keyParams.length === 0 && inputs.length > 0) { const firstName = inputs[0].getAttribute('name'); if (firstName) keyParams.push(firstName); } return keyParams; }, buildSearchUrl(baseUrl, method, keyParams) { if (method === 'post') { return `${baseUrl}?${keyParams[0]}={keyword}`; } else { const separator = baseUrl.includes('?') ? '&' : '?'; return `${baseUrl}${separator}${keyParams[0]}={keyword}`; } }, generateEngineInfo(domain, keyParams, searchUrl) { const cleanDomain = domain.replace('www.', ''); const name = cleanDomain.split('.')[0].charAt(0).toUpperCase() + cleanDomain.split('.')[0].slice(1); const mark = cleanDomain.replace(/\./g, '_'); return { name: name, searchUrl: searchUrl, searchkeyName: keyParams, matchUrl: `.*${cleanDomain}.*`, mark: mark }; }, guessKeyParameters() { const commonParams = ['q', 'query', 'search', 'keyword', 'key', 'wd', 'kw']; return commonParams.slice(0, 1); }, extractFromCurrentPage() { const searchInfo = this.extractSearchEngineFromPage(); if (!searchInfo.found) { alert("无法自动识别当前页面的搜索引擎，请手动添加。"); return; } this.showAddForm(true); document.getElementById("engine-name").value = searchInfo.name; document.getElementById("engine-mark").value = searchInfo.mark; document.getElementById("engine-url").value = searchInfo.searchUrl; document.getElementById("engine-keys").value = searchInfo.searchkeyName.join(","); const favicon = document.querySelector('link[rel*="icon"]'); if (favicon) { const iconUrl = favicon.href; if (!iconUrl.startsWith('data:')) { document.getElementById("icon-type").value = "image"; document.getElementById("icon-input").value = iconUrl; this.previewIcon(); } } alert(`✅ 已自动识别 ${searchInfo.name} 搜索引擎！请检查并保存。`); }, showAddForm(show) { const formSection = document.getElementById("add-engine-form"); const engineList = document.getElementById("engine-management-list"); const listTitle = formSection?.previousElementSibling; if (!formSection || !engineList || !listTitle) return; if (show) { formSection.style.display = "block"; engineList.style.display = "none"; listTitle.style.display = "none"; document.getElementById("engine-name").value = ""; document.getElementById("engine-mark").value = ""; document.getElementById("engine-url").value = ""; document.getElementById("engine-keys").value = ""; document.getElementById("icon-input").value = ""; document.getElementById("icon-preview").innerHTML = ""; } else { formSection.style.display = "none"; engineList.style.display = "grid"; listTitle.style.display = "block"; } }, previewIcon() { const type = document.getElementById("icon-type").value; const value = document.getElementById("icon-input").value.trim(); const preview = document.getElementById("icon-preview"); preview.innerHTML = ""; preview.style.backgroundImage = "none"; preview.style.backgroundColor = "#ecf0f1"; if (!value) return; try { switch (type) { case "svg": const parser = new DOMParser(); const svgDoc = parser.parseFromString(value, "image/svg+xml"); if (svgDoc.querySelector("parsererror")) throw new Error("无效的SVG代码"); preview.innerHTML = value; break; case "image": preview.style.backgroundImage = `url(${value})`; preview.style.backgroundSize = "contain"; preview.style.backgroundRepeat = "no-repeat"; preview.style.backgroundPosition = "center"; break; case "text": const displayText = value.length > 4 ? value.substring(0, 4) : value; preview.textContent = displayText; preview.style.fontSize = value.length > 4 ? "14px" : "18px"; preview.style.color = "#2c3e50"; preview.style.fontWeight = "bold"; break; case "emoji": preview.textContent = value; preview.style.fontSize = "24px"; break; } } catch (e) { alert(`图标预览失败: ${e.message}`); } }, saveNewEngine() { const name = document.getElementById("engine-name").value.trim(); const mark = document.getElementById("engine-mark").value.trim(); const url = document.getElementById("engine-url").value.trim(); const keys = document.getElementById("engine-keys").value.split(',').map(k => k.trim()); const iconType = document.getElementById("icon-type").value; const iconValue = document.getElementById("icon-input").value.trim(); if (!name || !mark || !url || keys.length === 0) { alert("请填写所有必填字段"); return; } if (appState.searchUrlMap.some(engine => engine.mark === mark)) { alert("标识已存在，请使用其他标识"); return; } const newEngine = { name, searchUrl: url, searchkeyName: keys, matchUrl: new RegExp(`.*${new URL(url).hostname}.*`), mark, svgCode: "", custom: true }; if (iconValue) { switch (iconType) { case "svg": newEngine.svgCode = iconValue; break; case "image": newEngine.svgCode = ``; break; case "text": newEngine.svgCode = ``; break; case "emoji": newEngine.svgCode = ``; break; } } appState.userSearchEngines.push(newEngine); GM_setValue(STORAGE_KEYS.USER_SEARCH_ENGINES, appState.userSearchEngines); appState.searchUrlMap = [...defaultSearchEngines, ...appState.userSearchEngines]; const currentSetup = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK); GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, `${currentSetup}-${mark}`); utils.markUnsavedChanges(); alert("✅ 搜索引擎添加成功!"); this.showAddForm(false); this.refreshEngineList(); }, resetToDefault() { if (confirm("⚠️ 确定要恢复默认设置吗？这将删除所有自定义搜索引擎。")) { appState.userSearchEngines = []; GM_setValue(STORAGE_KEYS.USER_SEARCH_ENGINES, []); GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK); appState.searchUrlMap = [...defaultSearchEngines]; utils.markUnsavedChanges(); alert("✅ 已恢复默认设置"); this.refreshEngineList(); } }, refreshEngineList() { const engineList = document.getElementById("engine-management-list"); const activeMarks = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK).split("-"); if (!engineList) return; engineList.innerHTML = ""; appState.searchUrlMap.forEach((engine) => { const engineCard = document.createElement("div"); engineCard.className = CLASS_NAMES.ENGINE_CARD; engineCard.style.cssText = ` display: flex; align-items: center; padding: 15px; background: white; border: 2px solid ${activeMarks.includes(engine.mark) ? '#27ae60' : '#ecf0f1'}; border-radius: 10px; transition: all 0.3s ease; cursor: grab; min-height: 60px; box-sizing: border-box; `; engineCard.addEventListener("mouseenter", () => { engineCard.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)"; engineCard.style.transform = "translateY(-2px)"; }); engineCard.addEventListener("mouseleave", () => { engineCard.style.boxShadow = "none"; engineCard.style.transform = "translateY(0)"; }); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.dataset.mark = engine.mark; checkbox.checked = activeMarks.includes(engine.mark); checkbox.style.cssText = `margin-right: 15px; transform: scale(1.2);`; checkbox.addEventListener("change", () => { utils.updateSelectedCount(); utils.markUnsavedChanges(); }); const iconPreview = document.createElement("div"); iconPreview.style.cssText = ` width: 40px; height: 25px; background-image: url('data:image/svg+xml;utf8,${encodeURIComponent(engine.svgCode)}'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 15px; border: 1px solid #eee; border-radius: 5px; flex-shrink: 0; `; const infoContainer = document.createElement("div"); infoContainer.style.cssText = `flex-grow: 1; min-width: 0;`; const name = document.createElement("div"); name.textContent = engine.name; name.style.cssText = ` font-weight: bold; color: #2c3e50; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `; const url = document.createElement("div"); url.textContent = engine.searchUrl; url.style.cssText = ` font-size: 0.8em; color: #7f8c8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; `; infoContainer.appendChild(name); infoContainer.appendChild(url); const actions = document.createElement("div"); actions.style.cssText = `display: flex; gap: 5px; flex-shrink: 0;`; if (engine.custom) { const deleteBtn = document.createElement("button"); deleteBtn.innerHTML = utils.createInlineSVG('trash', 'white'); deleteBtn.title = "删除"; deleteBtn.style.cssText = ` padding: 8px 12px; border: none; background: #e74c3c; color: white; border-radius: 5px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; `; actions.appendChild(deleteBtn); deleteBtn.addEventListener("click", (e) => { e.stopPropagation(); if (confirm(`确定要删除 ${engine.name} 吗?`)) { appState.userSearchEngines = appState.userSearchEngines.filter(e => e.mark !== engine.mark); GM_setValue(STORAGE_KEYS.USER_SEARCH_ENGINES, appState.userSearchEngines); const currentSetup = GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK); const newSetup = currentSetup.split("-").filter(m => m !== engine.mark).join("-"); GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, newSetup); appState.searchUrlMap = [...defaultSearchEngines, ...appState.userSearchEngines]; utils.markUnsavedChanges(); this.refreshEngineList(); } }); } engineCard.appendChild(checkbox); engineCard.appendChild(iconPreview); engineCard.appendChild(infoContainer); engineCard.appendChild(actions); engineList.appendChild(engineCard); }); utils.updateSelectedCount(); }, saveEngineSettings() { const checkboxes = document.querySelectorAll('#engine-management-list input[type="checkbox"]'); const activeMarks = []; checkboxes.forEach(checkbox => { if (checkbox.checked) activeMarks.push(checkbox.dataset.mark); }); if (activeMarks.length === 0) { alert("⚠️ 请至少选择一个搜索引擎"); return; } GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, activeMarks.join("-")); utils.clearUnsavedChanges(); setTimeout(() => { this.closeManagementPanel(); appInitializer.reloadScript(); }, 1000); }, closeManagementPanel() { const panel = document.getElementById(CLASS_NAMES.MANAGEMENT_PANEL); if (!panel) return; if (appState.hasUnsavedChanges && !confirm("⚠️ 您有未保存的更改，确定要关闭吗？")) return; panel.style.display = "none"; appState.hasUnsavedChanges = false; accessibility.removeFocusTrap(panel); }, createManagementPanel() { let panel = document.getElementById(CLASS_NAMES.MANAGEMENT_PANEL); if (panel) return panel; panel = document.createElement("div"); panel.id = CLASS_NAMES.MANAGEMENT_PANEL; panel.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; height: 90vh; max-height: 90vh; background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 0; z-index: 10000; display: none; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; box-sizing: border-box; `; const header = document.createElement("div"); header.style.cssText = ` height: 15vh; min-height: 80px; max-height: 120px; background-color: #2c3e50; color: white; padding: 20px; border-radius: 15px 15px 0 0; position: relative; box-sizing: border-box; flex-shrink: 0; `; const title = document.createElement("h2"); title.innerHTML = utils.createInlineSVG('cog', 'white') + ' 搜索引擎管理中心'; title.style.cssText = ` margin: 0; font-size: 1.5em; font-weight: 300; display: flex; align-items: center; gap: 10px; `; const subtitle = document.createElement("p"); subtitle.textContent = "管理您的搜索快捷方式"; subtitle.style.cssText = `margin: 5px 0 0 0; opacity: 0.8; font-size: 0.9em;`; const unsavedIndicator = document.createElement("div"); unsavedIndicator.id = "unsaved-indicator"; unsavedIndicator.innerHTML = utils.createInlineSVG('circle', '#e74c3c') + ' 有未保存的更改'; unsavedIndicator.style.cssText = ` position: absolute; top: 15px; right: 20px; color: #e74c3c; font-size: 0.8em; display: none; align-items: center; gap: 5px; `; header.appendChild(title); header.appendChild(subtitle); header.appendChild(unsavedIndicator); panel.appendChild(header); const content = document.createElement("div"); content.style.cssText = ` height: 65vh; min-height: 300px; position: relative; overflow: hidden; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; `; const quickActions = document.createElement("div"); quickActions.style.cssText = ` padding: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; background-color: #ffffff; border-bottom: 1px solid #ecf0f1; box-sizing: border-box; flex-shrink: 0; `; const leftActionGroup = document.createElement("div"); leftActionGroup.style.cssText = `display: flex; gap: 10px; flex-wrap: wrap;`; const extractBtn = this.createActionButton(utils.createInlineSVG('globe') + ' 自动添加', "#3498db", "自动识别当前页面的搜索引擎"); const addBtn = this.createActionButton(utils.createInlineSVG('plus') + ' 手动添加', "#27ae60", "手动添加新的搜索引擎"); leftActionGroup.appendChild(extractBtn); leftActionGroup.appendChild(addBtn); const rightActionGroup = document.createElement("div"); rightActionGroup.style.cssText = `display: flex; gap: 10px; flex-wrap: wrap;`; const saveBtn = document.createElement("button"); saveBtn.id = "panel-save-btn"; saveBtn.innerHTML = utils.createInlineSVG('save') + ' 保存设置'; saveBtn.title = "保存当前设置"; saveBtn.style.cssText = ` padding: 10px 20px; background: #95a5a6; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; opacity: 0.7; pointer-events: none; min-width: 120px; justify-content: center; `; const resetBtn = this.createActionButton(utils.createInlineSVG('undo') + ' 恢复默认', "#e74c3c", "恢复默认搜索引擎设置"); rightActionGroup.appendChild(saveBtn); rightActionGroup.appendChild(resetBtn); quickActions.appendChild(leftActionGroup); quickActions.appendChild(rightActionGroup); content.appendChild(quickActions); const listSection = document.createElement("div"); listSection.style.cssText = ` flex: 1; overflow: hidden; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; overflow: auto; `; const listTitle = document.createElement("h3"); listTitle.innerHTML = utils.createInlineSVG('list') + ' 已配置的搜索引擎'; listTitle.style.cssText = ` color: #2c3e50; margin: 15px 0; font-weight: 500; flex-shrink: 0; display: flex; align-items: center; gap: 10px; `; const engineList = document.createElement("div"); engineList.id = "engine-management-list"; engineList.style.cssText = ` flex: 1; overflow-y: auto; overflow-x: hidden; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding-bottom: 10px; box-sizing: border-box; `; listSection.appendChild(listTitle); listSection.appendChild(engineList); const formSection = document.createElement("div"); formSection.id = "add-engine-form"; formSection.style.cssText = ` display: none; background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 10px 0; box-sizing: border-box; flex-shrink: 0; `; const formTitle = document.createElement("h3"); formTitle.innerHTML = utils.createInlineSVG('magic') + ' 添加新搜索引擎'; formTitle.style.cssText = ` color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; `; formSection.appendChild(formTitle); const form = document.createElement("div"); form.style.cssText = `display: grid; gap: 15px; grid-template-columns: 1fr 1fr;`; const fields = [ { label: "引擎名称", placeholder: "例如: Google", type: "text", id: "engine-name", required: true }, { label: "唯一标识", placeholder: "例如: google", type: "text", id: "engine-mark", required: true }, { label: "搜索URL", placeholder: "使用 {keyword} 作为占位符", type: "text", id: "engine-url", required: true, fullWidth: true }, { label: "关键词参数", placeholder: "例如: q,query,search", type: "text", id: "engine-keys", required: true, fullWidth: true } ]; fields.forEach(field => { const container = document.createElement("div"); if (field.fullWidth) container.style.gridColumn = "1 / -1"; const label = document.createElement("label"); label.textContent = field.label; label.style.cssText = `display: block; margin-bottom: 5px; font-weight: 500; color: #34495e;`; const input = document.createElement("input"); input.type = field.type; input.placeholder = field.placeholder; input.id = field.id; input.required = field.required; input.style.cssText = `width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;`; container.appendChild(label); container.appendChild(input); form.appendChild(container); }); const iconContainer = document.createElement("div"); iconContainer.style.gridColumn = "1 / -1"; const iconTitle = document.createElement("h4"); iconTitle.innerHTML = utils.createInlineSVG('palette') + ' 图标设置'; iconTitle.style.cssText = `margin-bottom: 10px; color: #34495e; display: flex; align-items: center; gap: 10px;`; iconContainer.appendChild(iconTitle); const iconGrid = document.createElement("div"); iconGrid.style.cssText = `display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; align-items: end;`; const typeGroup = document.createElement("div"); const typeLabel = document.createElement("label"); typeLabel.textContent = "图标类型"; typeLabel.style.cssText = `display: block; margin-bottom: 5px; font-weight: 500;`; typeGroup.appendChild(typeLabel); const iconTypeSelect = document.createElement("select"); iconTypeSelect.id = "icon-type"; iconTypeSelect.style.cssText = `width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;`; ["svg", "image", "text", "emoji"].forEach(type => { const option = document.createElement("option"); option.value = type; option.textContent = type.charAt(0).toUpperCase() + type.slice(1); iconTypeSelect.appendChild(option); }); typeGroup.appendChild(iconTypeSelect); const inputGroup = document.createElement("div"); const inputLabel = document.createElement("label"); inputLabel.textContent = "图标内容"; inputLabel.style.cssText = `display: block; margin-bottom: 5px; font-weight: 500;`; inputGroup.appendChild(inputLabel); const iconInput = document.createElement("input"); iconInput.type = "text"; iconInput.id = "icon-input"; iconInput.placeholder = "SVG代码、图片URL、文字或表情符号"; iconInput.style.cssText = `width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;`; inputGroup.appendChild(iconInput); const previewGroup = document.createElement("div"); const previewButton = document.createElement("button"); previewButton.innerHTML = utils.createInlineSVG('eye') + ' 预览图标'; previewButton.style.cssText = ` width: 100%; padding: 10px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; `; previewButton.id = "preview-icon"; previewGroup.appendChild(previewButton); // 组装图标设置网格 iconGrid.appendChild(typeGroup); iconGrid.appendChild(inputGroup); iconGrid.appendChild(previewGroup); iconContainer.appendChild(iconGrid); // 图标预览区域 const previewContainer = document.createElement("div"); previewContainer.style.gridColumn = "1 / -1"; previewContainer.style.cssText = ` margin-top: 15px; text-align: center; `; const previewLabel = document.createElement("label"); previewLabel.textContent = "图标预览 (推荐比例 8:5)"; previewLabel.style.cssText = ` display: block; margin-bottom: 10px; font-weight: 500; `; const iconPreview = document.createElement("div"); iconPreview.id = "icon-preview"; iconPreview.style.cssText = ` width: 88px; height: 55px; border: 2px dashed #bdc3c7; border-radius: 8px; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #ecf0f1; `; previewContainer.appendChild(previewLabel); previewContainer.appendChild(iconPreview); iconContainer.appendChild(previewContainer); form.appendChild(iconContainer); // 表单操作按钮 const formActions = document.createElement("div"); formActions.style.cssText = ` grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 20px; `; const saveFormBtn = this.createActionButton(utils.createInlineSVG('save') + ' 保存引擎', "#27ae60", ""); const cancelFormBtn = this.createActionButton(utils.createInlineSVG('times') + ' 取消', "#95a5a6", ""); formActions.appendChild(saveFormBtn); formActions.appendChild(cancelFormBtn); formSection.appendChild(form); formSection.appendChild(formActions); listSection.appendChild(formSection); content.appendChild(listSection); panel.appendChild(content); // 4. 面板底部 const footer = document.createElement("div"); footer.style.cssText = ` height: 20vh; min-height: 60px; max-height: 90px; background-color: #ecf0f1; padding: 15px 20px; border-top: 1px solid #bdc3c7; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; flex-shrink: 0; border-radius: 0 0 15px 15px; `; const selectedCount = document.createElement("span"); selectedCount.id = "selected-count"; selectedCount.innerHTML = utils.createInlineSVG('check-circle') + ' 已选择 0 个引擎'; selectedCount.style.cssText = ` color: #7f8c8d; font-size: 0.9em; display: flex; align-items: center; gap: 5px; `; const footerActions = document.createElement("div"); footerActions.style.cssText = ` display: flex; gap: 10px; `; const closeBtn = this.createActionButton(utils.createInlineSVG('times') + ' 关闭', "#95a5a6", ""); footerActions.appendChild(closeBtn); footer.appendChild(selectedCount); footer.appendChild(footerActions); panel.appendChild(footer); // 5. 绑定事件 extractBtn.addEventListener("click", () => this.extractFromCurrentPage()); addBtn.addEventListener("click", () => this.showAddForm(true)); resetBtn.addEventListener("click", () => this.resetToDefault()); previewButton.addEventListener("click", () => this.previewIcon()); saveFormBtn.addEventListener("click", () => this.saveNewEngine()); cancelFormBtn.addEventListener("click", () => this.showAddForm(false)); saveBtn.addEventListener("click", () => this.saveEngineSettings()); closeBtn.addEventListener("click", () => this.closeManagementPanel()); // 点击面板背景关闭 panel.addEventListener("click", (e) => { if (e.target === panel) { this.closeManagementPanel(); } }); document.body.appendChild(panel); return panel; }, /** * 显示管理面板 */ showManagementPanel() { const panel = this.createManagementPanel(); // 重置未保存状态 appState.hasUnsavedChanges = false; utils.clearUnsavedChanges(); // 刷新引擎列表 this.refreshEngineList(); // 显示面板 panel.style.display = "block"; // 应用焦点陷阱 accessibility.trapFocus(panel); // 隐藏汉堡菜单 hamburgerMenu.hideHamburgerMenu(); }, /** * 创建管理面板DOM结构（核心配置界面） */ createManagementPanel() { let panel = document.getElementById(CLASS_NAMES.MANAGEMENT_PANEL); if (panel) return panel; // 1. 面板主容器 panel = document.createElement("div"); panel.id = CLASS_NAMES.MANAGEMENT_PANEL; panel.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; height: 90vh; max-height: 90vh; background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 0; z-index: 10000; display: none; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; box-sizing: border-box; `; // 2. 面板头部 const header = document.createElement("div"); header.style.cssText = ` height: 15vh; min-height: 80px; max-height: 120px; background-color: #2c3e50; color: white; padding: 20px; border-radius: 15px 15px 0 0; position: relative; box-sizing: border-box; flex-shrink: 0; `; const title = document.createElement("h2"); title.innerHTML = utils.createInlineSVG('cog', 'white') + ' 搜索引擎管理中心'; title.style.cssText = ` margin: 0; font-size: 1.5em; font-weight: 300; display: flex; align-items: center; gap: 10px; `; const subtitle = document.createElement("p"); subtitle.textContent = "管理您的搜索快捷方式"; subtitle.style.cssText = ` margin: 5px 0 0 0; opacity: 0.8; font-size: 0.9em; `; // 未保存更改指示器 const unsavedIndicator = document.createElement("div"); unsavedIndicator.id = "unsaved-indicator"; unsavedIndicator.innerHTML = utils.createInlineSVG('circle', '#e74c3c') + ' 有未保存的更改'; unsavedIndicator.style.cssText = ` position: absolute; top: 15px; right: 20px; color: #e74c3c; font-size: 0.8em; display: none; align-items: center; gap: 5px; `; header.appendChild(title); header.appendChild(subtitle); header.appendChild(unsavedIndicator); panel.appendChild(header); // 3. 面板内容区 const content = document.createElement("div"); content.style.cssText = ` height: 65vh; min-height: 300px; position: relative; overflow: hidden; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; `; // 3.1 快捷操作栏 const quickActions = document.createElement("div"); quickActions.style.cssText = ` padding: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; background-color: #ffffff; border-bottom: 1px solid #ecf0f1; box-sizing: border-box; flex-shrink: 0; `; // 左侧操作组 const leftActionGroup = document.createElement("div"); leftActionGroup.style.cssText = ` display: flex; gap: 10px; flex-wrap: wrap; `; const extractBtn = this.createActionButton(utils.createInlineSVG('globe') + ' 自动添加', "#3498db", "自动识别当前页面的搜索引擎"); const addBtn = this.createActionButton(utils.createInlineSVG('plus') + ' 手动添加', "#27ae60", "手动添加新的搜索引擎"); leftActionGroup.appendChild(extractBtn); leftActionGroup.appendChild(addBtn); // 右侧操作组 const rightActionGroup = document.createElement("div"); rightActionGroup.style.cssText = ` display: flex; gap: 10px; flex-wrap: wrap; `; const saveBtn = document.createElement("button"); saveBtn.id = "panel-save-btn"; saveBtn.innerHTML = utils.createInlineSVG('save') + ' 保存设置'; saveBtn.title = "保存当前设置"; saveBtn.style.cssText = ` padding: 10px 20px; background: #95a5a6; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; opacity: 0.7; pointer-events: none; min-width: 120px; justify-content: center; `; const resetBtn = this.createActionButton(utils.createInlineSVG('undo') + ' 恢复默认', "#e74c3c", "恢复默认搜索引擎设置"); rightActionGroup.appendChild(saveBtn); rightActionGroup.appendChild(resetBtn); quickActions.appendChild(leftActionGroup); quickActions.appendChild(rightActionGroup); content.appendChild(quickActions); // 3.2 引擎列表区 const listSection = document.createElement("div"); listSection.style.cssText = ` flex: 1; overflow: hidden; padding: 0 20px; box-sizing: border-box; display: flex; flex-direction: column; overflow: auto; `; const listTitle = document.createElement("h3"); listTitle.innerHTML = utils.createInlineSVG('list') + ' 已配置的搜索引擎'; listTitle.style.cssText = ` color: #2c3e50; margin: 15px 0; font-weight: 500; flex-shrink: 0; display: flex; align-items: center; gap: 10px; `; const engineList = document.createElement("div"); engineList.id = "engine-management-list"; engineList.style.cssText = ` flex: 1; overflow-y: auto; overflow-x: hidden; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding-bottom: 10px; box-sizing: border-box; `; listSection.appendChild(listTitle); listSection.appendChild(engineList); // 3.3 添加引擎表单 const formSection = document.createElement("div"); formSection.id = "add-engine-form"; formSection.style.cssText = ` display: none; background-color: #f8f9fa; padding: 20px; border-radius: 10px; margin: 10px 0; box-sizing: border-box; flex-shrink: 0; `; const formTitle = document.createElement("h3"); formTitle.innerHTML = utils.createInlineSVG('magic') + ' 添加新搜索引擎'; formTitle.style.cssText = ` color: #2c3e50; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; `; formSection.appendChild(formTitle); // 表单字段容器 const form = document.createElement("div"); form.style.cssText = ` display: grid; gap: 15px; grid-template-columns: 1fr 1fr; `; // 表单字段配置 const fields = [{ label: "引擎名称", placeholder: "例如: Google", type: "text", id: "engine-name", required: true }, { label: "唯一标识", placeholder: "例如: google", type: "text", id: "engine-mark", required: true }, { label: "搜索URL", placeholder: "使用 {keyword} 作为占位符", type: "text", id: "engine-url", required: true, fullWidth: true }, { label: "关键词参数", placeholder: "例如: q,query,search", type: "text", id: "engine-keys", required: true, fullWidth: true } ]; // 创建表单字段 fields.forEach(field => { const container = document.createElement("div"); if (field.fullWidth) { container.style.gridColumn = "1 / -1"; } const label = document.createElement("label"); label.textContent = field.label; label.style.cssText = ` display: block; margin-bottom: 5px; font-weight: 500; color: #34495e; `; const input = document.createElement("input"); input.type = field.type; input.placeholder = field.placeholder; input.id = field.id; input.required = field.required; input.style.cssText = ` width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; `; container.appendChild(label); container.appendChild(input); form.appendChild(container); }); // 图标设置区域 const iconContainer = document.createElement("div"); iconContainer.style.gridColumn = "1 / -1"; const iconTitle = document.createElement("h4"); iconTitle.innerHTML = utils.createInlineSVG('palette') + ' 图标设置'; iconTitle.style.cssText = ` margin-bottom: 10px; color: #34495e; display: flex; align-items: center; gap: 10px; `; iconContainer.appendChild(iconTitle); // 图标设置网格 const iconGrid = document.createElement("div"); iconGrid.style.cssText = ` display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; align-items: end; `; // 图标类型选择 const typeGroup = document.createElement("div"); const typeLabel = document.createElement("label"); typeLabel.textContent = "图标类型"; typeLabel.style.cssText = ` display: block; margin-bottom: 5px; font-weight: 500; `; typeGroup.appendChild(typeLabel); const iconTypeSelect = document.createElement("select"); iconTypeSelect.id = "icon-type"; iconTypeSelect.style.cssText = ` width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; `; ["svg", "image", "text", "emoji"].forEach(type => { const option = document.createElement("option"); option.value = type; option.textContent = type.charAt(0).toUpperCase() + type.slice(1); iconTypeSelect.appendChild(option); }); typeGroup.appendChild(iconTypeSelect); // 图标内容输入 const inputGroup = document.createElement("div"); const inputLabel = document.createElement("label"); inputLabel.textContent = "图标内容"; inputLabel.style.cssText = ` display: block; margin-bottom: 5px; font-weight: 500; `; inputGroup.appendChild(inputLabel); const iconInput = document.createElement("input"); iconInput.type = "text"; iconInput.id = "icon-input"; iconInput.placeholder = "SVG代码、图片URL、文字或表情符号"; iconInput.style.cssText = ` width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; `; inputGroup.appendChild(iconInput); // 预览按钮 const previewGroup = document.createElement("div"); const previewButton = document.createElement("button"); previewButton.innerHTML = utils.createInlineSVG('eye') + ' 预览图标'; previewButton.style.cssText = ` width: 100%; padding: 10px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; `; previewButton.id = "preview-icon"; previewGroup.appendChild(previewButton); // 组装图标设置网格 iconGrid.appendChild(typeGroup); iconGrid.appendChild(inputGroup); iconGrid.appendChild(previewGroup); iconContainer.appendChild(iconGrid); // 图标预览区域 const previewContainer = document.createElement("div"); previewContainer.style.gridColumn = "1 / -1"; previewContainer.style.cssText = ` margin-top: 15px; text-align: center; `; const previewLabel = document.createElement("label"); previewLabel.textContent = "图标预览 (推荐比例 8:5)"; previewLabel.style.cssText = ` display: block; margin-bottom: 10px; font-weight: 500; `; const iconPreview = document.createElement("div"); iconPreview.id = "icon-preview"; iconPreview.style.cssText = ` width: 88px; height: 55px; border: 2px dashed #bdc3c7; border-radius: 8px; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #ecf0f1; `; previewContainer.appendChild(previewLabel); previewContainer.appendChild(iconPreview); iconContainer.appendChild(previewContainer); form.appendChild(iconContainer); // 表单操作按钮 const formActions = document.createElement("div"); formActions.style.cssText = ` grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 20px; `; const saveFormBtn = this.createActionButton(utils.createInlineSVG('save') + ' 保存引擎', "#27ae60", ""); const cancelFormBtn = this.createActionButton(utils.createInlineSVG('times') + ' 取消', "#95a5a6", ""); formActions.appendChild(saveFormBtn); formActions.appendChild(cancelFormBtn); formSection.appendChild(form); formSection.appendChild(formActions); listSection.appendChild(formSection); content.appendChild(listSection); panel.appendChild(content); // 4. 面板底部 const footer = document.createElement("div"); footer.style.cssText = ` height: 20vh; min-height: 60px; max-height: 90px; background-color: #ecf0f1; padding: 15px 20px; border-top: 1px solid #bdc3c7; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; flex-shrink: 0; border-radius: 0 0 15px 15px; `; const selectedCount = document.createElement("span"); selectedCount.id = "selected-count"; selectedCount.innerHTML = utils.createInlineSVG('check-circle') + ' 已选择 0 个引擎'; selectedCount.style.cssText = ` color: #7f8c8d; font-size: 0.9em; display: flex; align-items: center; gap: 5px; `; const footerActions = document.createElement("div"); footerActions.style.cssText = ` display: flex; gap: 10px; `; const closeBtn = this.createActionButton(utils.createInlineSVG('times') + ' 关闭', "#95a5a6", ""); footerActions.appendChild(closeBtn); footer.appendChild(selectedCount); footer.appendChild(footerActions); panel.appendChild(footer); // 5. 绑定事件 extractBtn.addEventListener("click", () => this.extractFromCurrentPage()); addBtn.addEventListener("click", () => this.showAddForm(true)); resetBtn.addEventListener("click", () => this.resetToDefault()); previewButton.addEventListener("click", () => this.previewIcon()); saveFormBtn.addEventListener("click", () => this.saveNewEngine()); cancelFormBtn.addEventListener("click", () => this.showAddForm(false)); saveBtn.addEventListener("click", () => this.saveEngineSettings()); closeBtn.addEventListener("click", () => this.closeManagementPanel()); // 点击面板背景关闭 panel.addEventListener("click", (e) => { if (e.target === panel) { this.closeManagementPanel(); } }); document.body.appendChild(panel); return panel; }, /** * 显示管理面板 */ showManagementPanel() { const panel = this.createManagementPanel(); // 重置未保存状态 appState.hasUnsavedChanges = false; utils.clearUnsavedChanges(); // 刷新引擎列表 this.refreshEngineList(); // 显示面板 panel.style.display = "block"; // 应用焦点陷阱 accessibility.trapFocus(panel); // 隐藏汉堡菜单 hamburgerMenu.hideHamburgerMenu(); } }; // ===== 应用初始化模块 ===== /** * 应用初始化模块 - 封装初始化、脚本重载、页面事件监听等入口逻辑 */ const appInitializer = { /** * 重新加载脚本（清理DOM、重置状态、重新初始化） */ reloadScript() { // 1. 清理所有创建的DOM元素 [ "#punkjet-search-box", `#${CLASS_NAMES.HAMBURGER_MENU}`, `#${CLASS_NAMES.SEARCH_OVERLAY}`, `#${CLASS_NAMES.MANAGEMENT_PANEL}` ].forEach(selector => { const element = document.querySelector(selector); if (element) { // 移除焦点陷阱 accessibility.removeFocusTrap(element); element.remove(); } }); // 2. 清除所有定时器和防抖器 utils.clearAllTimeouts(); debounceUtils.clearAll(); // 3. 移除全局事件监听器 const events = ['scroll', 'wheel', 'touchstart', 'touchmove', 'touchend']; events.forEach(event => { window.removeEventListener(event, () => {}); }); // 4. 重置应用状态 appState.scriptLoaded = false; appState.containerAdded = false; appState.hamburgerMenuOpen = false; appState.searchOverlayVisible = false; // 5. 重新初始化 this.init(); }, /** * 百度搜索特殊处理（延迟同步输入框内容） */ handleBaiduSpecialCase() { if (window.location.hostname.includes('baidu')) { setTimeout(() => { const baiduInput = document.querySelector('input#kw'); if (baiduInput && baiduInput.value) { appState.currentInput = baiduInput.value.trim(); sessionStorage.setItem(STORAGE_KEYS.CURRENT_INPUT, appState.currentInput); } }, DEFAULT_CONFIG.BAIDU_INPUT_DELAY); } }, /** * 初始化应用 */ init() { try { // 前置校验 if (appState.containerAdded || appState.scriptLoaded) { return; } // 初始化搜索引擎功能 if (utils.isValidScope()) { // 1. 初始化默认存储配置 if (!GM_getValue(STORAGE_KEYS.PUNK_SETUP_SEARCH)) { GM_setValue(STORAGE_KEYS.PUNK_SETUP_SEARCH, DEFAULT_CONFIG.PUNK_DEFAULT_MARK); } // 2. 从sessionStorage恢复当前输入内容 appState.currentInput = sessionStorage.getItem(STORAGE_KEYS.CURRENT_INPUT) || ''; // 3. 执行初始化流程 domHandler.monitorInputFields(); domHandler.addSearchBox(); domHandler.injectStyle(); accessibility.init(); this.handleBaiduSpecialCase(); // 4. 更新初始化状态 appState.scriptLoaded = true; // 应用引擎排序 setTimeout(() => { hamburgerMenu.applyEngineSort(); }, 500); } // 初始化 GitHub 增强功能 githubEnhancer.init(); } catch (error) { console.error("应用初始化失败:", error.message); } }, /** * 初始化页面事件监听（ visibilitychange、pageshow 等） */ initPageEventListeners() { // 1. 页面可见性变化时重新检查初始化 document.addEventListener("visibilitychange", () => { if (document.visibilityState === 'visible' && !appState.containerAdded) { this.init(); } }); // 2. 页面从缓存恢复时重新检查初始化 document.addEventListener("pageshow", (event) => { if (event.persisted && !appState.containerAdded) { this.init(); } }); // 3. DOM加载完成后初始化 document.addEventListener("DOMContentLoaded", () => { if (utils.isValidScope()) { this.init(); } }); // 4. 定期检查作用域（确保页面动态变化后仍能正常初始化） setInterval(() => { if (utils.isValidScope() && !appState.containerAdded) { this.init(); } else if (!utils.isValidScope() && appState.containerAdded) { this.reloadScript(); } }, DEFAULT_CONFIG.CHECK_SCOPE_INTERVAL); } }; // ===== 应用启动入口 ===== // 初始化应用状态 const appState = { userSearchEngines: GM_getValue(STORAGE_KEYS.USER_SEARCH_ENGINES, []), searchUrlMap: [...defaultSearchEngines, ...GM_getValue(STORAGE_KEYS.USER_SEARCH_ENGINES, [])], lastScrollTop: 0, punkJetBoxVisible: true, currentInput: sessionStorage.getItem(STORAGE_KEYS.CURRENT_INPUT) || '', scriptLoaded: false, containerAdded: false, hasUnsavedChanges: false, scrollTimeout: null, isScrolling: false, hideTimeout: null, touchStartY: null, hamburgerMenuOpen: false, searchOverlayVisible: false, isInteractingWithEngineBar: false }; // 启动应用 appInitializer.initPageEventListeners();