![[認証が必要なサイトも検索可能] ChromeのBookmark内容をインデックスして検索可能にするMCP Serverを作った](https://images.ctfassets.net/ct0aopd36mqt/4AJd3M26yescaNaY21CYmQ/9730e95c53a7b3049c6da6d4c0b1dec9/mcp.png)
[認証が必要なサイトも検索可能] ChromeのBookmark内容をインデックスして検索可能にするMCP Serverを作った
Introduction
ちょっと前までは、情報がほしければ↓のように探していました。
[以前の情報収集スタイル]
- Googleで検索して目的のサイトを探す
- ブックマークに保存
- 後で必要になったら、ブックマークから参照
いまは↓のように、LLMに聞いて回答をもらうのがメインになってます。
[現在の情報収集スタイル]
- ChatGPT/Claude/perplexityなどに質問・調査依頼
- 整理された回答を取得
- 追加の質問や内容をまとめてドキュメント化してもらったりする
(内容にもよりますが)自分で探す必要はほぼなくなりました。
また、MCPやRAGの仕組みを使えば独自ソースも参照可能です。
最近Notionを参照することが多いので、
claude codeでも参照したいと思っていたのですが、(mcp serverでは)
トークン設定が必要だったりと多少面倒でした。
「ブラウザでは見れるのに、もっと簡単にAIからNotionを参照できないか」
というきっかけで作ってみたのが、
今回紹介するMCP-Bookmarkです。(MCPサーバの学習も兼ねて)
これは自分のブックマーク内容をローカルのDBにエクスポートして
MCP serverで参照できるようにするツールです。
これを使えば以下のような自分のブックマークをAIに参照させることができます。
- GitHubのプライベートリポジトリ情報
- Notionの社内ドキュメント
- Google Docs内容
- 有料記事サイトのコンテンツ
- ログインが必要な社内Wiki
最初はブックマークのURLをMCP Serverでfetchして検索させようとしていたのですが、
通常のプログラムからのfetchだと認証が必要だったりリダイレクトされたりして内容が取得できませんでした。
しかし、Chrome Extensionを使うことで、ブラウザでログインして閲覧できるサイトなら、すべてインデックス可能になります。(リアルタイム性はないですが)
ブラウザで開ければインデックス可能なので、「Notionのあのページに書いてあった内容」とか「社内Wikiのあの手順書」などがAIから参照できるようになります。
MCP Server?
MCP Serverに関してはいっぱい解説記事があるのでそちらを参照してください。
ここではざっくりとだけ説明します。
MCP(Model Context Protocol)とは、Anthropicが開発した、
AIと外部データやツールと連携させるためのプロトコルです。
MCP Serverはこのプロトコルに準拠したサーバーアプリで、
AIに特定の機能やデータへのアクセスを提供します。
例えばローカルのファイルを検索したり、DBにアクセスしたりできます。
これらをAIに自然言語で依頼するとMCP経由で呼び出され、結果を取得できます。
MCP-Bookmark?
MCP-Bookmarkは、ChromeのブックマークをAIから検索可能にするMCP Serverです。
Chrome ExtensionをつかってローカルのDBにインデックスすることで、
ページの内容を全文検索できます。
※ 現在はMacでしか動きません
特徴
全文検索エンジン(Tantivy)
ブックマークのデータはRust製の全文検索エンジンであるTantivyにインデックスされます。
また、lindera-tantivyを使って形態素解析されたキーワードでドキュメント検索できるようにしています。
Chrome Extensionでインデックス
Chrome ExtensionでNative Messagingを使って、ブックマーク内容をTantivyにインデックスします。
この方法により、認証済みサイトからコンテンツを取得したりできます。
Rustで実装
MCP ServerやChrome Extensionからインデックスする際の
Native Messaging HostはすべてRustで実装しています。
MCP ServerはAnthropic公式のSDKであるmcp-server-rsを使ってます。
アーキテクチャ
Tantivyインデックスを作成するときは、
Chrome Extension がブックマークを取得してコンテンツをフェッチし、
Native Messaging経由でNative Hostに送信し、
Tantivy Index を作成/更新します。
MCP Severで検索するときは、
Claude Code → MCP Server → Tantivyインデックス(Read)
という流れになります。
【インデックス作成時】
┌──────────────────┐ ┌──────────────────┐
│ Chrome Extension │────▶│ Chrome Bookmarks │
│ (contents Fetch) │◀────│ │
└──────────────────┘ └──────────────────┘
│
│ Native Messaging
▼
┌──────────────────┐ ┌────────────────┐
│ Native Host │────▶│ Tantivy Index │
│(mcp-bookmark- │ │ (Create/ │
│ native) │ │ Update) │
└──────────────────┘ └────────────────┘
【検索時】
┌─────────────┐ ┌──────────────┐ ┌────────────────┐
│ Claude │────▶│ MCP Server │────▶│ Tantivy Index │
│ Code │◀────│(mcp-bookmark)│◀────│ (Full-text) │
└─────────────┘ └──────────────┘ └────────────────┘
Native Messagingについては以前の記事を参照。
利用可能な MCP ツール
- search_bookmarks_fulltext : 全文検索
- get_bookmark_content : 特定URLのコンテンツをすべて取得
- get_indexing_status : インデックス状況確認
search_bookmarks_fulltextでヒットするサイトを探し、
get_bookmark_contentで詳細なコンテンツ情報を取得します。
Environment
- MacBook Pro (14-inch, M3, 2023)
- OS : MacOS 14.5
- ブラウザ : Chrome, 139.0.7258.139(Official Build)(arm64)
- Claude Code SDK: v1.0.90
- Rust : 1.88
Setup
実際に MCP-Bookmark をセットアップして、Claude Code から使用してみます。
前提条件
現在Mac + Chromeでしか動きません。
あと、ビルドするにはRust実行環境が必要です。
動作確認用のClaude Codeもインストールしておいてください。
インストール
リポジトリをcloneしてビルド後、インストールスクリプトを実行します。
スクリプトの指示どおり進めます。
# clone
% git clone https://github.com/nakamura-shuta/mcp-bookmark.git
% cd mcp-bookmark
# build
% cargo build --release
% chmod +x ./install.sh
% ./install.sh
Chrome Extension の設定
- Chrome で
chrome://extensions/
を開く - 「デベロッパーモード」を有効化
- 「パッケージ化されていない拡張機能を読み込む」をクリック
bookmark-indexer-extension
フォルダを選択
インストールするとIDが表示されるので、コピーして
インストールスクリプトに貼り付けます。
ブックマークのインデックス作成
Bookmark Indexerを実行して以下の処理を実行。
- インデックスを作成したいブックマークフォルダを選択
- Index Nameを入力
- Index Selected Folderをクリック
ボタンを押すとブックマークがタブで開き、インデックスされます。
ブックマークのページは事前にログインしておいてください。
Claude Code の設定
インストールスクリプトを実行すると、環境にあった.mcp.json
が作成されます。
これを任意のリポジトリにコピーすれば使用できます。
↓のように自分で記述してもOK。
{
"mcpServers": {
"mcp-bookmark": {
"command": "/path/your/mcp-bookmark/target/release/mcp-bookmark",
"args": [],
"env": {
"RUST_LOG": "info",
"INDEX_NAME": "<作成したインデックス>"
}
}
}
}
INDEX_NAMEでは、ExtensionのExisting Indexesにある
インデックス名を設定すればよいです。
もしくはmcp-bookmarkバイナリを以下のように実行して
インデックス名を確認してください。
./target/release/mcp-bookmark --list-indexes
Available indexes:
==================
hoge_index_test) [235.1KB]
使ってみる
Claude Codeで実際に試してみましょう。
リポジトリにさきほどの.mcp.jsonをコピーしてClaude Codeを起動します。
/mcpで以下のようにmcp-bookmarkがconnectedになっていればOKです。
> /mcp
╭────────────────────────────────────────╮
│ Manage MCP servers │
│ │
│ 1. aws-documentation-mcp-server ✔ │
│ connected · Enter to view details │
│ ❯ 2. mcp-bookmark ✔ │
│ connected · Enter to view details │
│ 3. playwright ✔ │
│ connected · Enter to view details │
│ 4. serena ✔ │
│ connected · Enter to view details │
ではClaude Codeに聞いてみます。
ちなみに今回は弊社のNotionにある「出張時の宿泊や航空チケット」に関するページを
ブックマークしてインデックスしてみました。
Claude Codeを起動してmcp-bookmarkツールで聞いてみると、
ちゃんとNotionの内容から回答してます。
(回答は適当に加工済み)
> bookmarkで航空券の予約方法について調べて
⏺ mcp-bookmark - search_bookmarks_fulltext (MCP)(query: "航空券 予約 方法",
limit: 20)
⎿ {
"indexing_complete": true,
"indexing_status": "✅ Chrome Extension index loaded: 12 documents
rea
… +115 lines (ctrl+r to expand)
⏺ 航空券の予約方法に関する情報が見つかりました。最も関連性の高い結果から詳細
を取得します。
⏺ mcp-bookmark - get_bookmark_content (MCP)(url: "・・・")
⏺ ブックマークから航空券の予約方法について、以下の情報が見つかりました:
航空券予約の2つの方法
1. 出張者本人による予約
メリット
- 好きな時にすぐ予約できる
- キャンセル・変更を自身で行える
利用可能な航空会社
- HOGE航空会社
2. 専門部署による代理予約
メリット
- 予約作業が不要(依頼するだけ)
デメリット
- X時以降の連絡は翌営業日対応
- 前日X時以降の変更は間に合わない可能性
利用可能な航空会社
- HOGE航空会社
- FUGA航空会社
- その他
予約手順の要点
1. 事前承認が必須
- 部門長の承認を事前に取得
2. 航空会社の優先順位
- Xの路線がある場合:X優先
- Xの路線がない場合:Y優先
3. 欠航時の対応
- X:空港カウンターまたは予約センター(000-0000-0000)で振替
- Y/Z:空港カウンターまたは電話で振替依頼
4. 海外出張の場合
- パスポートのコピーが必要
> 具体的な予約方法について詳細に教えて
⏺ ブックマークから、より具体的な航空券予約方法の詳細を検索します。
⏺ mcp-bookmark - search_bookmarks_fulltext (MCP)(query: "予約 手順
操作 マニュアル", limit: 10)
⎿ {
"indexing_complete": true,
"indexing_status": "✅ Chrome Extension index loaded: 12 documents
rea
… +104 lines (ctrl+r to expand)
・・・・・
⏺ 先ほどのブックマークに記載されている具体的な予約方法の詳細をまとめます:
🛫 航空券の具体的な予約方法
📱 1. HOGE航空会社(自分で予約)
<省略>
・
・
・
---
🏨 宿泊施設の予約方法
<省略>
・
・
・
Summary
今回はChrome ExtensionとMCP Serverを組み合わせて
ブックマークのインデックス検索を行うツールを作成してみました。
(実装は全部Claude Code)
コード的にはまだまだ修正すべき部分がありますので、
実際に使いつつ改善していきたいところです。