ブックマーク同期拡張機能

Tool
ブックマーク同期拡張機能

ブックマーク同期拡張機能

Chrome/Edge向けのクロスブラウザ書き込み対応ブックマーク同期ブラウザ拡張。ローカルのブックマークを直接Chrome Extension APIで操作し、WebDAV（Nextcloud、坚果云など）をバックエンドにしてクラウドへバックアップ／同期を行います。増分復元と全量上書きの復元モード、バックアップファイル管理、ポップアップによる簡易操作と詳細なOptions画面を備え、React + TypeScript / Vite / CRXJS を用いたモダンな開発体験を提供します。（約300字）

https://github.com/caigq99/bookmark-sync-extension

概要

このリポジトリは「bookmark-sync-extension」と名付けられた、WebDAVをバックエンドに使ったクロスブラウザ対応のブックマーク同期ブラウザ拡張です。Chrome拡張APIを直接利用してローカルのブックマークを読み書きし、Nextcloudや坚果云などのWebDAV対応クラウドに対してバックアップや同期を行います。ChromeとEdge間での同期を意識した自動マッピング、増分復元・全量復元モード、バックアップファイルの一覧・復元・削除などの機能を持ち、React 19 + TypeScript、Vite、CRXJS、Tailwind CSS を採用したモダンな構成になっています。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 12
  • フォーク数: 0
  • ウォッチャー数: 12
  • コミット数: 2
  • ファイル数: 14
  • メインの言語: TypeScript

主な特徴

  • WebDAV（Nextcloud、坚果云 等）を用いたクラウドバックエンドによるブックマーク同期とバックアップ
  • Chrome Extension APIを直接利用し、ブラウザのブックマークを安全かつ高速に読み書き
  • Chrome ↔ Edge 間のクロスブラウザ同期、ブックマークバー名の自動マッピング対応
  • 増分復元と全量上書きの復元モード、バックアップファイルの管理（一覧・復元・削除）、ポップアップと詳細設定画面

技術的なポイント

この拡張はモダンなフロントエンド/拡張開発ツールチェーンを採用している点が特徴です。UIは React 19 と TypeScript で構築され、状態管理に軽量な Zustand を使用することでシンプルかつ反応性の高い画面設計を実現しています。ビルドと開発には Vite と CRXJS を組み合わせ、拡張機能特有の manifest やバンドルを効率よく生成できるようになっています。スタイリングは Tailwind CSS 4 を利用しており、ユーティリティベースで迅速にUIを組み立てられます。

同期処理の肝は WebDAV クライアント（webdav npmパッケージ）を用いた信頼性の高いファイル操作です。ブックマークのローカル表現を JSON に変換して WebDAV 上に保存し、クラウド側に蓄積されたバックアップファイルを一覧・ダウンロード・復元できます。復元は「増分復元」と「全量復元」を選べ、増分復元では差分のみを適用して既存ブックマークを保護し、全量復元では指定時点のスナップショットで一括上書きします。クロスブラウザ同期では、ブラウザごとに異なるブックマークツリー名（例: 「Bookmarks Bar」「お気に入り」など）を自動でマッピングする仕組みを備え、ユーザー操作を少なくする配慮があります。

開発環境については Node.js 22.16.0+ と npm 10+ を想定しており、Vite のホットリロードを使った開発サイクルが可能です。拡張機能向けの権限管理、エラーや例外時のリカバリ（ネットワーク不通時のリトライやUIでの状態表示）、およびバックアップファイルのバージョン管理設計など、実運用に耐えるための実装が意図されています。CRXJS によるビルドで Chrome/Edge 向けの出力調整がしやすく、将来的なパッケージ配布や他ブラウザ対応も視野に入れた構成です。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .github: dir
  • .gitignore: file
  • .nvmrc: file
  • .vscode: dir
  • README.md: file

…他 9 ファイル

（ソースコードは TypeScript ベースで、React コンポーネント群（Popup, Options 等）・background スクリプト・WebDAV 通信モジュール・状態管理（Zustand）・ビルド設定（Vite + CRXJS）といった役割に分かれている想定です。開発用コマンドは npm install、npm run dev などで動作します。）

まとめ

WebDAVを使った自己ホスト／サードパーティクラウド対応の実用的なブックマーク同期拡張。モダン技術を用いた設計で拡張性が高い。

リポジトリ情報：

READMEの抜粋：

书签同步浏览器插件

一个支持 WebDAV 云端同步的跨浏览器书签同步插件，适用于 Chrome 和 Edge。

功能特性

  • 使用 Chrome Extension API 直接访问书签
  • 支持 WebDAV 云端同步 (Nextcloud、坚果云等)
  • 跨浏览器同步 (Chrome ↔ Edge)，自动映射不同浏览器的书签栏名称
  • 支持增量恢复和全量覆盖两种恢复模式
  • 备份文件管理（查看、恢复指定版本、删除）
  • Popup 快速操作界面
  • Options 详细设置页面

技术栈

  • 前端: React 19 + TypeScript
  • 构建: Vite + CRXJS
  • 样式: Tailwind CSS 4
  • WebDAV: webdav npm 包
  • 状态管理: Zustand

开发

环境要求

  • Node.js 22.16.0+
  • npm 10+

安装依赖

npm install

开发模式

npm run de...