Browser MCP

🚀 ブラウザ MCP

このプロジェクトは、ブラウザ拡張機能とMCPサーバーを提供し、現在使用中のブラウザとのインタラクションを可能にします。

🚀 クイックスタート

💻 使用例

基本的な使用法

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@djyde/mcp-browser@latest"
      ]
    }
  }
}

✨ 主な機能

ツール一覧

すべての利用可能なツールは server/src/tools.ts に記載されています。

get_current_page_markdown

現在のブラウザページのMarkdownコンテンツを取得します。

例：

このページを要約してください。

append_style

現在のブラウザページにCSSスタイルを追加します。

例：

このページをダークモードに設定してください。

history_search

ブラウザの履歴を検索します。

例：

閲覧履歴から「github」を検索してください。

📚 ドキュメント

将来の予定

• [ ] 拡張機能をアプリストアに公開する。
• [ ] ドキュメントを作成する。
• [ ] さらに多くのツールを追加する。

📦 インストール

ビルド

pnpm i

拡張機能

cd extension

# Chromeブラウザ用のビルド
npm run build

# Edgeブラウザ用のビルド
npm run build:edge

# Firefoxブラウザ用のビルド
npm run build:firefox

ビルドが完了すると、拡張機能ファイルは extension/.output ディレクトリに保存されます。

サーバー側

cd server

# 開発モードで起動
npm run dev

# サーバーをビルド
npm run build

server/dist/cli.js はMCPサーバーのエントリーファイルです。

貢献ガイド

新しいツールの追加

1. tools.ts ファイルの tools 配列にツールモードを追加します。
2. extension/calls.ts で拡張可能な呼び出し処理関数を実装します。
3. server/src/tools.ts でツール用のプロセッサーを追加します。call 関数を使用して拡張側の処理プログラムを呼び出します。

📄 ライセンス

AGPL-3.0 またはそれ以上のバージョン