mcpField
B
browser-mcp

browser-mcp

ローカル
github.com/djydeブラウザ自動化8382 週間前に更新
リポジトリ

browser-mcp について

browser-mcp は、ブラウザー拡張機能と MCP サーバーを組み合わせたプロジェクトで、MCP クライアントから利用中のブラウザーを操作できるようにします。LLM に Web ページの内容を読ませたり、表示を変更させたりしたい利用者に向いています。ライセンスは AGPL-3.0-or-later です。

主な機能

  1. 01現在のページの内容を Markdown で取得
  2. 02現在のページへの CSS スタイルの追加
  3. 03ブラウザーの閲覧履歴の検索

活用シーン

  1. 01開いているページの要約を LLM に依頼する
  2. 02現在のページをダークモードに切り替える
  3. 03キーワードで過去に閲覧したページを探す

MCP 対応

本プロジェクトは、ページ読み取り、スタイル追加、履歴検索をツールとして MCP クライアントに提供する MCP サーバーを含みます。npx で起動するサーバー設定を通じてクライアントに接続し、ブラウザー拡張機能と連携して動作します。

#browser-mcp#browser-extension#mcp-server

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "browser": {
      "command": "npx",
      "args": [
        "-y",
        "@djyde/mcp-browser"
      ]
    }
  }
}
起動コマンドnpx -y @djyde/mcp-browser

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@djyde/mcp-browser

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

browser-mcp

使用中のブラウザーを操作できるブラウザー拡張機能と MCP サーバーです。

mcp

jkXeswNy@2x

使用方法

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

ツール

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

get_current_page_markdown

現在ブラウザーで表示しているページの Markdown を取得します。

例：

Summarize the current page.
append_style

現在ブラウザーで表示しているページに CSS スタイルを追加します。

例：

Change the current page to dark mode.
history_search

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

例：

Search the browser history for "github".

ロードマップ

  • 拡張機能ストアに拡張機能を公開します。
  • ドキュメントを作成します。
  • ツールを追加します。

ビルド

pnpm i
拡張機能
cd extension

# chrome
npm run build

# edge
npm run build:edge

# firefox
npm run build:firefox

ビルド後、拡張機能は extension/.output ディレクトリに配置されます。

サーバー

cd server

# dev
npm run dev

# build
npm run build

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

コントリビューション

新しいツールを追加する
  1. server/src/tools.ts の tools 配列にツールのスキーマを追加します。
  2. extension/calls.ts に拡張機能から呼び出し可能なハンドラーを追加します。
  3. server/src/tools.ts にツールハンドラーを追加します。call 関数を使用して拡張機能のハンドラーを呼び出します。

ライセンス

AGPL-3.0-or-later

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。