🛠️ Gemini Browser
Google Geminiにブラウザ経由で質??
📺 まず動画で見る(YouTube)
▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Query Google Gemini via browser automation using OpenClaw's Browser Relay. Use when you need to ask Gemini questions and get AI responses. Requires OpenClaw with Browser Relay Chrome extension configured.
🇯🇵 日本人クリエイター向け解説
Google Geminiにブラウザ経由で質??
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o gemini-browser.zip https://jpskill.com/download/4852.zip && unzip -o gemini-browser.zip && rm gemini-browser.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/4852.zip -OutFile "$d\gemini-browser.zip"; Expand-Archive "$d\gemini-browser.zip" -DestinationPath $d -Force; ri "$d\gemini-browser.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
gemini-browser.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
gemini-browserフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-18
- 同梱ファイル
- 2
💬 こう話しかけるだけ — サンプルプロンプト
- › Gemini Browser を使って、最小構成のサンプルコードを示して
- › Gemini Browser の主な使い方と注意点を教えて
- › Gemini Browser を既存プロジェクトに組み込む方法を教えて
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[スキル名] Gemini Browser
OpenClaw Browser Relayを介してGoogle Gemini (gemini.google.com) にクエリを送信し、応答を抽出します。
⚠️ セキュリティに関する注意: このスキルは、CDP (Chrome DevTools Protocol) を介して、ログイン済みのGoogleセッションを持つ実際のChromeブラウザで動作します。エージェントは、アタッチされたタブに表示されるすべてのものにアクセスできます。エージェントに制御させることを明示的に意図したタブのみをアタッチしてください。セキュリティに関する考慮事項を参照してください。
前提条件
- OpenClawがインストールされ、実行されていること(このスキルはOpenClawの
browserコマンドを使用します) - OpenClaw Browser Relay Chrome拡張機能がインストールされ、設定されていること
- 拡張機能はデフォルトでループバック
127.0.0.1:18792にバインドされます - 拡張機能のオプションでゲートウェイ認証トークンを設定する必要があります
- 拡張機能はデフォルトでループバック
- Chrome内でGoogleアカウントにログインしていること(Geminiは認証が必要です)
- 既存のChromeを介してリレーするために
profile=chromeを使用してください(分離されたprofile=openclaw-managedではありません)
クイックスタート
# 1. ChromeでGeminiを開く
open -a "Google Chrome" "https://gemini.google.com"
# 2. GeminiタブでBrowser Relay拡張機能アイコンを手動でクリックしてアタッチする
# (アタッチされるとバッジに「ON」と表示されます)
# 3. リレーが接続されていることを確認する
browser action=status profile=chrome
# cdpReady: true と表示されるはずです
# 4. タブを一覧表示する
browser action=tabs profile=chrome
# GeminiタブのtargetIdをメモしてください
入力方法
Geminiは標準の<textarea>ではなく、Quillリッチテキストエディタ (contenteditable div) を使用します。JavaScriptを介してテキストを挿入する必要があります。
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const editor = document.querySelector('div.ql-editor[contenteditable=\"true\"]'); if (!editor) return 'editor not found'; editor.focus(); editor.innerHTML = '<p>YOUR_QUERY_HERE</p>'; editor.dispatchEvent(new Event('input', { bubbles: true })); return 'ok'; })()"
}
次に送信します。
browser action=act profile=chrome targetId=<id> request={"kind":"press","key":"Enter"}
完全なワークフロー
1. 準備
ChromeでGeminiを開き、Browser Relay拡張機能をタブに手動でアタッチします。
open -a "Google Chrome" "https://gemini.google.com"
# その後、GeminiタブのBrowser Relay拡張機能アイコンをクリックします
2. タブIDの取得
browser action=tabs profile=chrome
Geminiタブのエントリを見つけ、そのtargetIdをメモします。
3. クエリの入力
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const editor = document.querySelector('div.ql-editor[contenteditable=\"true\"]'); if (!editor) return 'editor not found'; editor.focus(); editor.innerHTML = '<p>What is quantum computing?</p>'; editor.dispatchEvent(new Event('input', { bubbles: true })); return 'ok'; })()"
}
4. 送信
browser action=act profile=chrome targetId=<id> request={"kind":"press","key":"Enter"}
5. 応答を待つ
Geminiは10~60秒かかる場合があります。停止ボタンが消えたかどうかを確認して、完了をポーリングします。
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const stop = document.querySelector('button[aria-label*=\"Stop\"]'); return stop ? 'generating' : 'done'; })()"
}
6. 応答の抽出
オプションA — クリップボード(推奨、Markdown形式を保持します):
# スナップショットを撮り、コピーボタンを見つける
browser action=snapshot profile=chrome targetId=<id>
# スナップショットのrefを使ってコピーボタンをクリックする
browser action=act profile=chrome targetId=<id> request={"kind":"click","ref":"<copy_button_ref>"}
# クリップボードから読み取る
pbpaste
オプションB — DOM抽出(フォールバック):
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const msgs = document.querySelectorAll('.model-response-text'); if (msgs.length === 0) return 'no response found'; return msgs[msgs.length - 1].innerText; })()"
}
新しいチャット
関連性のないクエリの場合は、コンテキストの汚染を避けるために新しいチャットを開始してください。
browser action=navigate profile=chrome targetId=<id> targetUrl="https://gemini.google.com"
応答完了のシグナル
応答は以下のときに完了します。
- 停止ボタンが消える
- 応答の下にコピーボタンが表示される
- 提案されたフォローアップチップが表示される
セキュリティに関する考慮事項
⚠️ 重要: このスキルを使用する前に、これらのリスクを理解してください。
- セッションアクセス:
profile=chromeは、ログイン済みのすべてのセッションを持つ実際のChromeを使用します。エージェントは、アタッチされたタブ内のすべて(Googleアカウントのコンテキストを含む)を表示し、操作できます。 - JavaScript評価:
evaluateアクションは、ページコンテキストで任意のJavaScriptを実行します。このスキルは、入力フィールドのDOM操作に限定していますが、メカニズム自体は強力です。 - 手動アタッチが必要: Browser Relay拡張機能は、アタッチするためにあなたによって手動でクリックされる必要があります。エージェントは任意のタブに自動アタッチできません。特定のGeminiタブのみをアタッチしてください。
- ループバックのみ: リレーは
127.0.0.1にバインドされ、認証トークンを必要とするため、リモートアクセスを防ぎます。 - 推奨: 露出を制限するために、AI自動化専用の別のChromeプロファイルを使用し、主要ではないGoogleアカウントでログインしてください。
トラブルシューティング
| 問題 | 解決策 |
|---|---|
cdpReady: false |
GeminiタブのBrowser Relay拡張機能アイコンをクリックして再アタッチしてください |
| タブが見つからない | browser action=tabs profile=chromeを実行してタブリストを更新してください |
| エディタが見つからない | ページが完全にロードされていない可能性があります。待ってから再試行してください。GeminiがDOMを変更した可能性があります。div.ql-editorを確認してください |
| コピーボタンが見つからない | 応答がまだ生成中の可能性があります。まず停止ボタンのステータスをポーリングしてください |
| ログインウォール | ChromeがGoogleアカウントにログインしていることを確認してください |
| コンテキストオーバーフロー | 新しいチャットのためにgemini.google.comに移動してください |
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Gemini Browser Skill
Query Google Gemini (gemini.google.com) via OpenClaw Browser Relay and extract responses.
⚠️ Security Notice: This skill operates on your real Chrome browser with your logged-in Google session via CDP (Chrome DevTools Protocol). The agent will have access to anything visible in the attached tab. Only attach tabs you explicitly intend for the agent to control. See Security Considerations.
Prerequisites
- OpenClaw installed and running (this skill uses OpenClaw's
browsercommand) - OpenClaw Browser Relay Chrome extension installed and configured
- Extension binds to loopback
127.0.0.1:18792by default - Gateway auth token must be configured in extension options
- Extension binds to loopback
- Google account logged in within Chrome (Gemini requires authentication)
- Use
profile=chrometo relay through your existing Chrome (not the isolatedprofile=openclaw-managed)
Quick Start
# 1. Open Gemini in Chrome
open -a "Google Chrome" "https://gemini.google.com"
# 2. Manually click the Browser Relay extension icon on the Gemini tab to attach
# (the badge will show "ON" when attached)
# 3. Verify relay is connected
browser action=status profile=chrome
# Should show cdpReady: true
# 4. List tabs
browser action=tabs profile=chrome
# Note the targetId for the Gemini tab
Input Method
Gemini uses a Quill rich-text editor (contenteditable div), not a standard <textarea>. You must inject text via JavaScript:
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const editor = document.querySelector('div.ql-editor[contenteditable=\"true\"]'); if (!editor) return 'editor not found'; editor.focus(); editor.innerHTML = '<p>YOUR_QUERY_HERE</p>'; editor.dispatchEvent(new Event('input', { bubbles: true })); return 'ok'; })()"
}
Then submit:
browser action=act profile=chrome targetId=<id> request={"kind":"press","key":"Enter"}
Complete Workflow
1. Prepare
Open Gemini in Chrome and manually attach the Browser Relay extension to the tab.
open -a "Google Chrome" "https://gemini.google.com"
# Then click the Browser Relay extension icon on the Gemini tab
2. Get Tab ID
browser action=tabs profile=chrome
Find the Gemini tab entry and note its targetId.
3. Input Query
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const editor = document.querySelector('div.ql-editor[contenteditable=\"true\"]'); if (!editor) return 'editor not found'; editor.focus(); editor.innerHTML = '<p>What is quantum computing?</p>'; editor.dispatchEvent(new Event('input', { bubbles: true })); return 'ok'; })()"
}
4. Submit
browser action=act profile=chrome targetId=<id> request={"kind":"press","key":"Enter"}
5. Wait for Response
Gemini may take 10–60 seconds. Poll for completion by checking if the stop button has disappeared:
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const stop = document.querySelector('button[aria-label*=\"Stop\"]'); return stop ? 'generating' : 'done'; })()"
}
6. Extract Response
Option A — Clipboard (recommended, preserves Markdown formatting):
# Take a snapshot and find the Copy button
browser action=snapshot profile=chrome targetId=<id>
# Click the Copy button by its ref from the snapshot
browser action=act profile=chrome targetId=<id> request={"kind":"click","ref":"<copy_button_ref>"}
# Read from clipboard
pbpaste
Option B — DOM extraction (fallback):
browser action=act profile=chrome targetId=<id> request={
"kind": "evaluate",
"fn": "(() => { const msgs = document.querySelectorAll('.model-response-text'); if (msgs.length === 0) return 'no response found'; return msgs[msgs.length - 1].innerText; })()"
}
New Chat
For unrelated queries, start a fresh chat to avoid context pollution:
browser action=navigate profile=chrome targetId=<id> targetUrl="https://gemini.google.com"
Response Completion Signals
The response is complete when:
- The stop button disappears
- A copy button appears below the response
- Suggested follow-up chips appear
Security Considerations
⚠️ Important: Understand these risks before using this skill.
- Session access:
profile=chromeuses your real Chrome with all logged-in sessions. The agent can see and interact with anything in the attached tab, including your Google account context. - JavaScript evaluation: The
evaluateaction runs arbitrary JavaScript in the page context. This skill limits it to DOM manipulation for the input field, but the mechanism itself is powerful. - Manual attachment required: The Browser Relay extension must be manually clicked by you to attach — the agent cannot auto-attach to arbitrary tabs. Only attach the specific Gemini tab.
- Loopback only: The relay binds to
127.0.0.1and requires an auth token, preventing remote access. - Recommendation: Use a separate Chrome profile dedicated to AI automation, logged into a non-primary Google account, to limit exposure.
Troubleshooting
| Problem | Solution |
|---|---|
cdpReady: false |
Click the Browser Relay extension icon on the Gemini tab to re-attach |
| Tab not found | Run browser action=tabs profile=chrome to refresh tab list |
| Editor not found | Page may not be fully loaded; wait and retry. Gemini may have changed DOM — check for div.ql-editor |
| Copy button not found | Response may still be generating; poll stop button status first |
| Login wall | Ensure Chrome is logged into a Google account |
| Context overflow | Navigate to gemini.google.com for a fresh chat |
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (6,108 bytes)
- 📎 README.md (2,919 bytes)