AI 生成: 一个简单的浏览器扩展/网页工具，用于在浏览器中快速调用百度搜索选中的文本或输入的查询词。
This commit is contained in:
admin
@@ -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
|
||||
+178
@@ -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%;
|
||||
}
|
||||
}
|
||||
+51
@@ -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>
|
||||
+74
@@ -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();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user