mcpField
B
browser

browser

github.com/julianromli開発213129 回インストール6 日前に更新
リポジトリ

browser について

browserは、CDPの基本ツールでウェブサイトを共同探索し、内容を取得するスキルです。Chromeの起動、ページ移動、JavaScript実行、スクリーンショット、要素の対話的な選択に対応します。

主な機能

  1. 01新規または複製プロファイルでChromeを起動
  2. 02現在または新しいタブでページ移動
  3. 03表示中のページでJavaScriptを実行
  4. 04表示領域のスクリーンショットを撮影
  5. 05ページ要素を対話的に選択

活用シーン

  1. 01Chromeでウェブサイトを調査
  2. 02JavaScriptでページ内容を確認
  3. 03ウェブページの表示領域を撮影
  4. 04調査中にDOM要素を選択

インストール

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

$npx skills add https://github.com/julianromli/ai-skills --skill browser

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

同梱ファイル

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

eval.js
nav.js
package-lock.json
package.json
pick.js
screenshot.js
start.js

詳細

ブラウザツール

共同でのサイト探索とスクレイピングに使える最小限の CDP ツールです。

重要：すべてのスクリプトは ~/.factory/skills/browser/ にあり、フルパスを指定して呼び出す必要があります。

Chrome を起動する

~/.factory/skills/browser/start.js              # Fresh profile
~/.factory/skills/browser/start.js --profile    # Copy your profile (cookies, logins)

リモートデバッグを有効にして、:9222 で Chrome を起動します。

移動する

~/.factory/skills/browser/nav.js https://example.com
~/.factory/skills/browser/nav.js https://example.com --new

現在のタブに移動するか、新しいタブを開きます。

JavaScript を評価する

~/.factory/skills/browser/eval.js 'document.title'
~/.factory/skills/browser/eval.js 'document.querySelectorAll("a").length'

アクティブなタブで JavaScript を実行します（非同期コンテキスト）。

重要：コードは単一の式にするか、複数の文には IIFE を使用してください。

  • 単一の式：'document.title'
  • 複数の文：'(() => { const x = 1; return x + 1; })()'
  • コード文字列内で改行しないでください。1 行に収めてください。

スクリーンショット

~/.factory/skills/browser/screenshot.js

現在のビューポートのスクリーンショットを撮影し、一時ファイルのパスを返します。

要素を選択する

~/.factory/skills/browser/pick.js "Click the submit button"

インタラクティブな要素選択ツールです。クリックして選択し、Cmd/Ctrl+クリックで複数選択し、Enter で完了します。

使用上の注意

  • ほかのツールを使用する前に、Chrome を起動してください。
  • --profile フラグを使うと、実際の Chrome プロファイルが同期されるため、どこでもログインした状態になります。
  • JavaScript の評価は、ページ内の非同期コンテキストで実行されます。
  • 要素選択ツールでは、クリックして DOM 要素を視覚的に選択できます。

コメント

Markdown 対応