commit 54783623d34afbdfca2c7839039ced130c841e70 Author: admin Date: Thu Oct 1 20:15:27 2026 +0800 AI 生成: 一个简单的浏览器扩展/网页工具,用于在浏览器中快速调用百度搜索选中的文本或输入的查询词。 diff --git a/README.md b/README.md new file mode 100644 index 0000000..7736f47 --- /dev/null +++ b/README.md @@ -0,0 +1,57 @@ +# Browser Baidu Search + +一个简洁实用的浏览器工具,用于快速调用百度搜索。 + +## 功能特性 + +- 🔍 快速搜索:输入关键词后点击按钮或按回车即可跳转到百度搜索结果页 +- 📝 选中文本搜索:在页面上选中文本后,点击扩展图标即可自动填入搜索框 +- 🎨 简洁界面:现代化 UI 设计,支持深色模式 +- ⚡ 零依赖:纯 HTML/CSS/JS 实现,无需构建工具 + +## 项目结构 + +``` +browser-baidu-search/ +├── index.html # 主页面 +├── css/ +│ └── style.css # 样式文件 +├── js/ +│ └── main.js # 核心逻辑 +└── README.md # 说明文档 +``` + +## 使用方法 + +### 方式一:直接打开网页 + +1. 下载本项目到本地 +2. 双击 `index.html` 在浏览器中打开 +3. 在输入框中输入关键词,点击「百度一下」按钮或按回车键 +4. 浏览器将跳转到百度搜索结果页 + +### 方式二:作为浏览器扩展(Chrome/Edge) + +1. 打开浏览器扩展管理页面(chrome://extensions/) +2. 开启「开发者模式」 +3. 点击「加载已解压的扩展程序」,选择本项目目录 +4. 在任意网页选中文本,点击扩展图标即可快速搜索 + +## 技术说明 + +- 使用 `window.open()` 打开百度搜索页面 +- 使用 URL 编码 `encodeURIComponent()` 处理中文关键词 +- 支持键盘快捷键(Enter 键) +- 响应式布局,适配移动端 + +## 自定义 + +如需修改搜索引擎,编辑 `js/main.js` 中的 `SEARCH_URL` 常量: + +```javascript +const SEARCH_URL = 'https://www.baidu.com/s?wd='; +``` + +## License + +MIT diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d99e726 --- /dev/null +++ b/css/style.css @@ -0,0 +1,178 @@ +/* 全局重置 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary: #4e6ef2; + --primary-hover: #3b5bdb; + --bg: #ffffff; + --text: #1f1f1f; + --text-secondary: #666; + --border: #e0e0e0; + --shadow: rgba(0, 0, 0, 0.08); +} + +@media (prefers-color-scheme: dark) { + :root { + --bg: #1a1a1a; + --text: #f0f0f0; + --text-secondary: #aaa; + --border: #333; + --shadow: rgba(0, 0, 0, 0.4); + } +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", + "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + transition: background 0.3s ease, color 0.3s ease; +} + +.container { + width: 100%; + max-width: 640px; + text-align: center; +} + +/* 头部 */ +.header { + margin-bottom: 40px; +} + +.logo { + font-size: 48px; + font-weight: 700; + letter-spacing: 2px; + margin-bottom: 12px; +} + +.logo-baidu { + color: var(--primary); +} + +.logo-search { + color: var(--text); +} + +.subtitle { + color: var(--text-secondary); + font-size: 14px; +} + +/* 搜索框 */ +.search-box { + margin-bottom: 30px; +} + +.input-wrapper { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +.search-input { + flex: 1; + padding: 14px 20px; + font-size: 16px; + border: 2px solid var(--border); + border-radius: 12px; + background: var(--bg); + color: var(--text); + outline: none; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.search-input:focus { + border-color: var(--primary); + box-shadow: 0 0 0 4px rgba(78, 110, 242, 0.15); +} + +.search-input::placeholder { + color: var(--text-secondary); +} + +.search-btn { + padding: 14px 28px; + font-size: 16px; + font-weight: 600; + color: #fff; + background: var(--primary); + border: none; + border-radius: 12px; + cursor: pointer; + transition: background 0.2s ease, transform 0.1s ease; + white-space: nowrap; +} + +.search-btn:hover { + background: var(--primary-hover); +} + +.search-btn:active { + transform: scale(0.97); +} + +/* 热门搜索 */ +.hot-words { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 8px; + font-size: 13px; +} + +.hot-label { + color: var(--text-secondary); +} + +.hot-tag { + padding: 6px 14px; + background: transparent; + color: var(--text-secondary); + border: 1px solid var(--border); + border-radius: 20px; + cursor: pointer; + font-size: 13px; + transition: all 0.2s ease; +} + +.hot-tag:hover { + color: var(--primary); + border-color: var(--primary); + background: rgba(78, 110, 242, 0.06); +} + +/* 底部 */ +.footer { + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid var(--border); + color: var(--text-secondary); + font-size: 12px; +} + +/* 响应式 */ +@media (max-width: 480px) { + .logo { + font-size: 36px; + } + + .input-wrapper { + flex-direction: column; + } + + .search-btn { + width: 100%; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..6c1d52e --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + 百度搜索 - 快速搜索工具 + + + +
+
+

+ 百度 + 搜索 +

+

快速调用百度搜索引擎

+
+ +
+
+ + +
+ +
+ 热门搜索: + + + + + +
+
+ +
+

提示:选中网页文本后点击扩展图标,可快速搜索

+
+
+ + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..256e8ce --- /dev/null +++ b/js/main.js @@ -0,0 +1,74 @@ +// ============================================ +// 百度搜索工具 - 核心逻辑 +// ============================================ + +// 百度搜索 URL 前缀 +const SEARCH_URL = 'https://www.baidu.com/s?wd='; + +// DOM 元素 +const searchInput = document.getElementById('searchInput'); +const searchBtn = document.getElementById('searchBtn'); +const hotTags = document.querySelectorAll('.hot-tag'); + +/** + * 执行搜索:打开百度搜索结果页 + * @param {string} keyword - 搜索关键词 + */ +function doSearch(keyword) { + const trimmed = (keyword || '').trim(); + if (!trimmed) { + alert('请输入搜索关键词'); + searchInput.focus(); + return; + } + + // 使用 encodeURIComponent 编码中文和特殊字符 + const url = SEARCH_URL + encodeURIComponent(trimmed); + + // 在新标签页打开搜索结果 + window.open(url, '_blank', 'noopener,noreferrer'); +} + +/** + * 从当前输入框获取关键词并搜索 + */ +function searchFromInput() { + doSearch(searchInput.value); +} + +// ============================================ +// 事件绑定 +// ============================================ + +// 点击搜索按钮 +searchBtn.addEventListener('click', searchFromInput); + +// 输入框按回车键 +searchInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + searchFromInput(); + } +}); + +// 热门搜索标签点击 +hotTags.forEach((tag) => { + tag.addEventListener('click', () => { + const word = tag.dataset.word; + searchInput.value = word; + doSearch(word); + }); +}); + +// ============================================ +// 支持从 URL 参数获取查询词(如 ?q=关键词) +// 用于浏览器扩展或外部调用 +// ============================================ +(function initFromQuery() { + const params = new URLSearchParams(window.location.search); + const q = params.get('q'); + if (q) { + searchInput.value = q; + // 自动聚焦但不自动搜索,交给用户确认 + searchInput.focus(); + } +})();