browser-use

ブラウザー操作スキル

概要

このスキルでは、Playwright を使用してウェブサイトを閲覧し、ウェブページを操作できます。

クイックスタート - スクリプトを使用する

重要： すべての uv run コマンドは、プロジェクトのルートではなく、scripts フォルダーから実行してください。

cd .claude/skills/browser-use/scripts

# === MANUAL BROWSING (opens browser for user interaction) ===
# Open browser for manual use (waits for user to close)
uv run browser.py open https://example.com --wait 60
uv run browser.py open https://example.com --account myaccount --wait 120

# === AUTOMATION (headless, returns content) ===
# Navigate to a URL and get content
uv run browser.py auto https://example.com
uv run browser.py auto https://example.com --account myaccount

# Take a screenshot
uv run browser.py screenshot https://example.com -o screenshot.png

# Extract text from a page
uv run browser.py text https://example.com --selector "h1"

# Get all links from a page
uv run browser.py links https://example.com

# Save page as PDF
uv run browser.py pdf https://example.com -o page.pdf

# Download a file by clicking a download link
uv run browser.py download https://example.com/downloads "a.download-btn" -o ~/Downloads

# Upload file(s) to a page
uv run browser.py upload https://example.com/upload "input[type=file]" myfile.pdf
uv run browser.py upload https://example.com/upload "input[type=file]" file1.txt file2.txt --submit "button[type=submit]"

# Upload via file chooser dialog (for dynamic inputs)
uv run browser.py upload-chooser https://example.com/upload "button.upload-trigger" myfile.pdf

# Click an element
uv run browser.py click https://example.com "button.submit"

# Fill an input field and press Enter
uv run browser.py fill https://google.com "input[name=q]" "search term" --press Enter

# Extract attribute from elements
uv run browser.py extract https://example.com "img" --attr src --all

画像のダウンロードコマンド

パフォーマンスを最適化して、ウェブサイトから画像をダウンロードします。

cd .claude/skills/browser-use/scripts

# Download images directly from src attribute
uv run browser.py download-images https://example.com "img.gallery" -n 10 -o ./images

# Download from Google Images (19x faster with regex extraction)
uv run browser.py download-from-gallery \
  "https://www.google.com/search?q=keyword&tbm=isch&tbs=isz:l" \
  "div[data-id] img" \
  "img[jsname='kn3ccd']" \
  -n 100 \
  -o ~/Downloads \
  -a myaccount

# Search Google Images with size filter
uv run browser.py google-image "landscape wallpaper" -n 50 -o ~/Downloads -s Large

# Download 4K images (3840px+ minimum)
uv run browser.py google-image "wallpaper" -n 20 -o ~/Downloads -s 4k

# Download FullHD images (1920px+ minimum)
uv run browser.py google-image "wallpaper" -n 50 -o ~/Downloads -s fullhd

Google 画像検索のサイズフィルター

CLI のサイズオプション（最小寸法でフィルタリング）：

• -s 4k - 最小 3840px（4K 解像度）
• -s fullhd - 最小 1920px（フル HD）
• -s Large - 最小 1000px
• -s Medium - 最小 400px
• -s Icon - 最小サイズの指定なし

Google URL パラメーター（内部で使用）：

• tbs=isz:l - 大きい画像
• tbs=isz:m - 中くらいの画像
• tbs=isz:i - アイコンサイズ

YouTube コマンド

長さと日付で絞り込んで、YouTube 動画を検索してダウンロードします。

cd .claude/skills/browser-use/scripts

# Search YouTube and get video URLs (returns JSON)
uv run browser.py youtube-search "python tutorial" -n 10
uv run browser.py youtube-search "lofi music" -n 5 -o results.json -s screenshot.png

# Search with duration filter (4-20 minutes)
uv run browser.py youtube-search "lofi music" -n 5 -min 4 -max 20

# Search videos from the last week
uv run browser.py youtube-search "news" -n 10 -t week

# Search with custom date range (YYYYMMDD format)
uv run browser.py youtube-search "tutorial" -n 10 -df 20240101 -dt 20241231

# Download a single video by URL
uv run browser.py youtube-download "https://www.youtube.com/watch?v=dQw4w9WgXcQ" -o ~/Downloads

# Download with quality options
uv run browser.py youtube-download "https://youtube.com/watch?v=..." -q 720p -o ~/Downloads
uv run browser.py youtube-download "https://youtube.com/watch?v=..." -q 1080p -o ~/Downloads

# Download audio only (mp3)
uv run browser.py youtube-download "https://youtube.com/watch?v=..." -a -o ./music

# Search and download in one command
uv run browser.py youtube-download "lofi hip hop" --search -o ~/Downloads
uv run browser.py youtube-download "python tutorial" --search -n 3 -o ~/Downloads

# Search and download with duration filter (4-20 min videos only)
uv run browser.py youtube-download "lofi music" --search -n 5 -min 4 -max 20 -o ~/Downloads

# Search and download videos from a date range
uv run browser.py youtube-download "tutorial" --search -n 5 -df 20240101 -dt 20241231 -o ~/Downloads

YouTube の長さフィルター

• -min N - 最短の長さ（分）
• -max N - 最長の長さ（分）
• フィルターには速度向上のため YouTube URL パラメーターを使用し、Python 側の検証をバックアップとして適用します。

YouTube の日付フィルター

• -t, --upload-date - アップロード日で絞り込みます：hour、today、week、month、year
• -df, --date-from - カスタム日付範囲の開始日（YYYYMMDD 形式、例：20240101）
• -dt, --date-to - カスタム日付範囲の終了日（YYYYMMDD 形式、例：20241231）

YouTube の画質オプション

• best - 利用可能な最高画質（デフォルト）
• 1080p - 1080p 以下
• 720p - 720p 以下
• 480p - 480p 以下
• 360p - 360p 以下
• audio - 音声のみ、最高音質

YouTube 検索結果の出力形式

[
  {
    "url": "https://www.youtube.com/watch?v=...",
    "title": "Video Title",
    "channel": "Channel Name",
    "duration": "10:30",
    "views": "1.2M views",
    "date": "2024-12-01"
  }
]

TikTok コマンド

重要： TikTok はヘッドレスブラウザーをブロックします。検索操作には --no-headless を使用してください。

cd .claude/skills/browser-use/scripts

# Login and save session for authenticated operations
uv run browser.py tiktok-login -a mytiktok
uv run browser.py tiktok-login -a mytiktok -w 180  # Extended wait for 2FA

# Search videos (--no-headless required for TikTok)
uv run browser.py tiktok-search "keyword" -n 10 --no-headless
uv run browser.py tiktok-search "#dance" -n 5 --no-headless  # By hashtag
uv run browser.py tiktok-search "cooking" -n 10 -a mytiktok --no-headless  # With account

# Download single video
uv run browser.py tiktok-download "https://tiktok.com/@user/video/123" -o ~/Downloads

# Search and download
uv run browser.py tiktok-download "funny cats" --search -n 5 -o ~/Downloads --no-headless
uv run browser.py tiktok-download "#cooking" --search -n 10 -o ~/Downloads -p 3 --no-headless

TikTok 検索結果の出力形式

[
  {
    "url": "https://www.tiktok.com/@user/video/123456789",
    "title": "Video description...",
    "author": "username",
    "views": "1.2M",
    "likes": "50K",
    "date": "2d ago"
  }
]

認証

Chrome のステルスモードを使用して自動化の検出を回避し、ブラウザーコマンド間でログインセッションを保存して再利用します（Google などで動作します）。

# Run from scripts folder
cd .claude/skills/browser-use/scripts

# Step 1: Create a login session (opens Chrome for manual login)
# Browser will open maximized - login manually then CLOSE THE BROWSER when done
uv run browser.py create-login https://gemini.google.com/app --account myaccount

# Options:
#   --wait, -w    Seconds to wait for login (default: 120)
#   --channel, -c Browser: chrome, msedge, chromium (default: chrome)

# Step 2: List saved accounts
uv run browser.py accounts

# Step 3: Use saved account with commands
# Manual browsing (opens browser for user interaction)
uv run browser.py open https://gemini.google.com/app --account myaccount

# Automation (headless, returns content)
uv run browser.py auto https://gemini.google.com/app --account myaccount
uv run browser.py screenshot https://gemini.google.com/app -o gemini.png --account myaccount

保存場所

認証情報はユーザーのホームディレクトリ ~/.auth/ に保存されます：

~/.auth/
├── account-name.json          # Storage state (cookies, localStorage)
└── profiles/
    └── account-name/          # Persistent browser profile

この場所はすべてのプロジェクトで共有され、git にコミットされません。

ベストプラクティス

• 自動化タスクでは headless=True を使用します
• デバッグ時や画面での確認が必要な場合は headless=False を使用します
• 使用後は必ずブラウザーを閉じます
• 可能な場合は、汎用的なセレクターよりも具体的なセレクター（id、data-testid）を使用します
• 動的コンテンツには適切な待機処理を追加します
• try/except ブロックでタイムアウトを適切に処理します

一般的なセレクター

• ID：#element-id
• クラス：.class-name
• テキスト：text=Button Text
• ロール：role=button[name="Submit"]
• CSS：div.container > p.content
• XPath：xpath=//div[@class='item']