AI 生成: 一个简单的浏览器扩展/网页工具，用于在浏览器中快速调用百度搜索选中的文本或输入的查询词。

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

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%;
+  }
+}

index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>百度搜索 - 快速搜索工具</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <h1 class="logo">
+        <span class="logo-baidu">百度</span>
+        <span class="logo-search">搜索</span>
+      </h1>
+      <p class="subtitle">快速调用百度搜索引擎</p>
+    </header>
+
+    <main class="search-box">
+      <div class="input-wrapper">
+        <input
+          type="text"
+          id="searchInput"
+          class="search-input"
+          placeholder="请输入搜索关键词..."
+          autocomplete="off"
+          autofocus
+        >
+        <button id="searchBtn" class="search-btn" type="button">
+          百度一下
+        </button>
+      </div>
+
+      <div class="hot-words">
+        <span class="hot-label">热门搜索：</span>
+        <button class="hot-tag" data-word="天气">天气</button>
+        <button class="hot-tag" data-word="新闻">新闻</button>
+        <button class="hot-tag" data-word="翻译">翻译</button>
+        <button class="hot-tag" data-word="地图">地图</button>
+        <button class="hot-tag" data-word="视频">视频</button>
+      </div>
+    </main>
+
+    <footer class="footer">
+      <p>提示：选中网页文本后点击扩展图标，可快速搜索</p>
+    </footer>
+  </div>
+
+  <script src="js/main.js"></script>
+</body>
+</html>

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();
+  }
+})();