# tinker-bookmark

**Repository Path**: kristar/tinker-bookmark

## Basic Information

- **Project Name**: tinker-bookmark
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-07
- **Last Updated**: 2026-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📑 tinker-bookmark

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

## 功能特性

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

## 安装

### 前提条件

- 已安装 [Tinker](https://github.com/niceduck/tinker)
- 已安装 [Chrome](https://www.google.com/chrome/)（需启用书签同步）

### 从本地安装

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

### 开发模式

```bash
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