📑 tinker-bookmark

Tinker 插件，用于快速搜索和打开 Chrome 浏览器书签。

功能特性

• 🔍 多关键词搜索 — 空格分隔的关键词，每个词独立进行模糊匹配，全部匹配才显示结果
• 🎯 相关性排序 — 标题精确匹配 > 前缀匹配 > 包含匹配 > URL 路径匹配
• ⌨️ 键盘导航 — ↑ / ↓ 选择结果，Enter 打开书签，Backspace 清空搜索
• 🌐 系统浏览器打开 — 使用系统默认浏览器打开链接，不在 Tinker 内嵌窗口中
• 🌙 主题同步 — 自动跟随 Tinker 亮色/暗色主题
• 🌍 中英文界面 — 支持 en-US 和 zh-CN
• 📊 结果限制 — 最多显示前 10 条最相关结果，自动滚动跟随高亮项

安装

前提条件

• 已安装 Tinker
• 已安装 Chrome（需启用书签同步）

从本地安装

git clone https://gitee.com/kristar/tinker-bookmark.git
cd tinker-bookmark
npm install
npm run build
npm i -g

开发模式

npm run dev

在 Tinker 中刷新插件即可看到实时更新。

构建产物

dist/
├── renderer/
│   ├── index.html
│   └── assets/
│       ├── app-*.js
│       └── app-*.css
└── preload/
    └── index.mjs

项目结构

src/
├── common/types.ts              # 书签类型定义
├── preload/index.ts             # Electron preload 层
├── renderer/
│   ├── main.tsx                 # React 入口
│   ├── App.tsx                  # 根组件
│   ├── store.ts                 # MobX 状态管理
│   ├── theme.ts                 # 主题同步
│   ├── components/
│   │   ├── BookmarkSearchBar.tsx   # 搜索框
│   │   ├── BookmarkItem.tsx        # 单条书签（含高亮渲染）
│   │   ├── BookmarkList.tsx        # 书签列表
│   │   ├── LoadingView.tsx         # 加载状态
│   │   ├── ErrorView.tsx           # 错误状态
│   │   └── EmptyView.tsx           # 空状态
│   └── i18n/
│       ├── index.ts
│       └── locales/
│           ├── en-US.json
│           └── zh-CN.json
└── global.d.ts                  # 全局类型声明

技术栈

| 类别 | 技术 | |------|------| | 框架 | React 19 + TypeScript | | 状态管理 | MobX 6 | | 构建 | Vite 5 | | 样式 | TailwindCSS 4 + Sass | | 国际化 | i18next | | 运行时 | Electron (Tinker 插件) |

工作原理

Chrome Bookmarks JSON
         ↓
  preload/index.ts (Electron 主进程)
         ↓
  bookmark.read() → 解析书签数据
         ↓
  store.ts (MobX Store) → 搜索、过滤、排序
         ↓
  React 组件 → 渲染搜索结果
         ↓
  bookmark.openExternal() → 系统浏览器打开

License

MIT