[Bookmark Nav]将浏览器书签变为网址导航| Vibe Coding

moonhou 2026-06-08 10:59 1

Bookmark Nav


浏览器书签导航页扩展。它会覆盖浏览器新标签页,把 Chrome / Edge 书签转换成一个可搜索、可分组、可管理的网址导航页。


github


release


功能亮点



  • 新标签页导航:打开新标签页即可浏览所有浏览器书签。

  • 文件夹侧边栏:按浏览器书签文件夹展示,支持当前文件夹或包含子文件夹两种范围。

  • 书签卡片:favicon 、标题、域名和文件夹路径清晰展示,支持舒适/紧凑密度。

  • 书签管理:单个书签支持复制链接、编辑、移动、删除;多选后支持批量复制、批量移动和批量删除。

  • 搜索增强:按标题、域名、URL 、文件夹路径匹配,并按相关性排序。

  • 网页搜索:可在 Google 、Bing 、DuckDuckGo 、百度之间切换,书签无结果时可继续网页搜索。

  • 常用/最近:自动记录打开历史,生成常用书签和最近打开视图。

  • 设置页:配置搜索、展示和数据管理;支持导出/导入本地设置与历史记录。

  • 安全确认:删除、批量删除、移动、清空记录、恢复默认和清理本地数据均使用应用内确认弹窗。


搜索语法


搜索框支持普通关键词,也支持组合语法:


react docs              # 同时匹配 react 和 docs
react -redux # 匹配 react ,但排除 redux
site:github.com react # 只搜索 github.com 域名下的书签
@工作 react # 只搜索文件夹路径包含“工作”的书签

快捷键:



  • /:聚焦搜索框

  • Enter:打开选中的书签,或执行网页搜索

  • ↑ / ↓:在搜索结果中移动选中项

  • Ctrl K / Cmd K:切换书签搜索和网页搜索

  • Esc:关闭弹窗/设置面板,或清空并退出搜索框


安装使用


开发模式


项目要求 Node.js >=22.14.0,CI 会读取 .nvmrc 保持版本一致。


pnpm install
pnpm dev

pnpm dev 会以 Edge 开发模式启动 WXT 。启动后按终端提示安装或加载扩展。


手动加载生产构建


pnpm build

构建产物在 .output/chrome-mv3/。在 Chrome / Edge 扩展管理页打开“开发者模式”,选择“加载已解压的扩展”,然后选择该目录。


技术栈



  • WXT 0.20

  • React 19

  • Tailwind CSS v4

  • TypeScript

  • Vitest

  • Biome


权限说明


扩展只声明 bookmarks 权限,用于读取和管理浏览器书签。


当前设计不注入页面,不包含 content_scripts,也不需要网络权限。favicon 使用浏览器内部的 chrome://favicon/size/32@2x/{origin} 方案,并带本地缓存和兜底图标。


Firefox 构建当前未声明数据收集权限; WXT 的相关提醒已在配置中压制。后续如果正式上架 Firefox ,需要按 Mozilla 最新要求复核数据收集声明。


数据说明



  • 浏览器书签:来自 chrome.bookmarks,编辑、移动、删除会直接作用于浏览器书签。

  • 常用/最近记录:保存在扩展本地 localStorage,书签失效后会自动剔除。

  • 设置数据:保存在扩展本地 localStorage

  • 导出/导入:只包含设置和常用/最近记录,不包含浏览器书签树。

最新回复 (0)
    没有回复
* 帖子来源V2EX
返回