mcpField
B
browser

browser

github.com/stellarlinkco開発2.8k199 回インストール27 週間前に更新
リポジトリ

browser について

MCP サーバーの設定を必要とせず、軽量な Chrome DevTools Protocol ヘルパーでブラウザーを自動化するスキルです。Chrome の起動、移動、JavaScript 実行、スクリーンショット、要素確認に対応し、処理はローカルで行います。

主な機能

  1. 01Chromeの起動と永続プロファイル選択
  2. 02現在または新しいタブへの移動
  3. 03JavaScript式の実行
  4. 04スクリーンショットの撮影
  5. 05要素の選択とメタデータ取得
  6. 06構造化JSONの返却

活用シーン

  1. 01ローカルChromeの操作自動化
  2. 02JavaScriptによるページ内容の確認
  3. 03エージェント向けスクリーンショット取得

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/stellarlinkco/myclaude --skill browser

インストール後、Claude Code で/browserを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

package-lock.json
package.json
scripts/
eval.cjs
nav.cjs
pick.cjs
screenshot.cjs
start.cjs

詳細

ブラウザー自動化

MCP サーバーをセットアップせずにブラウザーを自動化するための、Chrome DevTools Protocol（CDP）ヘルパーです。

セットアップ

初回使用前に依存関係をインストールします。

npm install --prefix ~/.claude/skills/browser/browser ws

スクリプト

すべてのスクリプトは localhost:9222 で Chrome に接続します。

start.js - Chrome を起動
scripts/start.js              # Fresh profile
scripts/start.js --profile    # Use persistent profile (keeps cookies/auth)
nav.js - ナビゲーション
scripts/nav.js https://example.com        # Navigate current tab
scripts/nav.js https://example.com --new  # Open in new tab
eval.js - JavaScript を実行
scripts/eval.js 'document.title'
scripts/eval.js '(() => { const x = 1; return x + 1; })()'

単一の式、または複数の文を実行する IIFE を使用します。

screenshot.js - スクリーンショットを撮影
scripts/screenshot.js

一時ディレクトリに保存された PNG の { path, filename } を返します。

pick.js - ビジュアル要素ピッカー
scripts/pick.js "Click the submit button"

要素のメタデータとして、タグ、ID、クラス、テキスト、href、セレクター、rect を返します。

ワークフロー

  1. Chrome を起動します。認証済みセッションには scripts/start.js --profile を使用します
  2. 移動します。scripts/nav.js <url>
  3. 調査します。scripts/eval.js 'document.querySelector(...)'
  4. キャプチャします。scripts/screenshot.js または scripts/pick.js
  5. 収集したデータを返します

主なポイント

  • すべての操作はローカルで実行され、認証情報がマシンの外に出ることはありません
  • Cookie と認証トークンを保持するには、--profile フラグを使用します
  • スクリプトはエージェントが利用できる構造化 JSON を返します

コメント

Markdown 対応