大家好！我是程序员海军， 全栈开发 | 独立开发 | AI爱好者。今天给大家带来我基于最近很火的 字节神器Trae 实践， 使用它 + Google 来我快速开发了一款书签插件，使用效果不错，其实我去年也开发了一款，使用人还挺多的。下面来聊一聊主要实现和有哪些特性。
去年开发的
一个简洁高效的 Chrome 扩展程序，帮助你快速检索和访问书签。通过优雅的界面设计和智能的搜索功能，让书签管理变得更加轻松。
功能特点
🚀 快速搜索：实时过滤和匹配书签 🎯 快捷键支持：使用 Ctrl + B快速唤起搜索界面🎨 优雅界面：现代化 UI 设计，流畅的动画效果 🔍 智能匹配：支持模糊搜索，快速定位目标书签 🖼️ 网站图标：自动获取并显示网站 favicon
技术栈
前端框架：Vue 3 + Vite
使用 Vue 3 的 Composition API 构建响应式界面 Vite 提供快速的开发体验和优化的构建流程 Chrome Extension API
使用 chrome.bookmarks.getTree()API 获取书签数据采用 Manifest V3 规范开发 现代化 UI 设计
使用 CSS3 实现流畅动画效果 响应式布局，优雅的视觉体验
实现原理
书签数据获取
// 使用 Chrome Bookmarks API 获取书签树
const bookmarkTree = await chrome.bookmarks.getTree()
// 递归遍历书签树，提取所需数据
const traverseBookmarks = (nodes) => {
for (const node of nodes) {
if (node.url) {
// 收集书签信息
bookmarks.push({
id: node.id,
title: node.title,
url: node.url
})
}
// 继续遍历子节点
if (node.children) {
traverseBookmarks(node.children)
}
}
}
网站图标获取
使用 Google 的 favicon 服务获取网站图标：
// 从 URL 中提取域名并获取对应的 favicon
icon: `https://www.google.com/s2/favicons?domain=${new URL(node.url).hostname}&sz=32`
安装和使用
克隆项目到本地：
git clone [项目地址]
cd quick-bookmarks-retrieval安装依赖：
npm install开发模式：
npm run dev构建扩展：
npm run build在 Chrome 中加载扩展：
打开 Chrome 扩展管理页面 ( chrome://extensions/)开启「开发者模式」 点击「加载已解压的扩展程序」 选择项目的 dist目录
使用方法
安装扩展后，点击工具栏中的扩展图标即可打开搜索界面 使用快捷键 Ctrl + B快速唤起搜索界面在搜索框中输入关键词，即可实时过滤匹配的书签 点击书签项即可在新标签页中打开对应网站
如想使用插件，在后台回复"书签插件" 即可下载使用。
拖到浏览器扩展即可。Free Use
