/ Annuaire / Playground / browser-act skills
● Communauté browser-act ⚡ Instantané

browser-act skills

par browser-act · browser-act/skills

Naviguez, scrapez et extrayez des données structurées depuis des sites complexes — plus rapide et moins coûteux que piloter un navigateur headless complet.

browser-act est un skill Claude pour l'automatisation web qui privilégie l'extraction structurée aux boucles capture d'écran-et-réflexion. Visitez des pages, naviguez des flux et extrayez des données typées avec des sélecteurs explicites ou des prompts guidés par schéma. Fonctionne sur les sites JS intensifs où les récupérations style DDG ne retournent rien, mais moins coûteux qu'un MCP Playwright complet pour de nombreuses tâches.

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

prêt

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-act-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-act-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/browser-act/skills",
          "~/.claude/skills/browser-act"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add browser-act-skill -- git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : browser-act skills

Extraire une liste typée depuis une SPA JS intensive

👤 Développeurs ayant besoin de données ponctuelles depuis des sites sans API ⏱ ~25 min intermediate

Quand l'utiliser : Le site ne rend les données dont vous avez besoin qu'après exécution de JS ; une simple récupération ne retourne rien.

Prérequis
  • Skill installé — git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act
Déroulement
  1. Définir le schéma
    Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ Copié
    → Schéma accepté
  2. Visiter + extraire
    Open <url>; wait for the product grid; extract matching the schema.✓ Copié
    → Liste JSON typée
  3. Vérifier les valeurs aberrantes
    Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ Copié
    → Les vérifications ponctuelles passent ; ou vous trouvez un bug de parser à corriger

Résultat : Données typées fiables ; pas de navigation manuelle.

Pièges
  • La détection de bot bloque le site après 50 requêtes — Baisser la concurrence ; changer l'UA ; respecter robots.txt ou abandonner la tâche
Combiner avec : filesystem

Naviguer un formulaire multi-étapes pour atteindre des données derrière

👤 Développeurs scrapant des données derrière des connexions ou assistants ⏱ ~40 min intermediate

Quand l'utiliser : Jeu de données public caché derrière un flux «sélectionner pays → sélectionner année → cliquer voir».

Déroulement
  1. Planifier le flux
    Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ Copié
    → Plan de flux accepté
  2. Exécuter
    Run the flow for 50 country/year combinations.✓ Copié
    → Lignes typées pour les 50 combinaisons
  3. Persister
    Write each combo to /data/<country>-<year>.json.✓ Copié
    → Fichiers dans /data/

Résultat : Données en masse derrière des interfaces cliquables sans travail manuel.

Pièges
  • Le flux casse quand le site ajoute une étape ou rebaptise un bouton — Le skill le remarque et se met en pause ; vous re-enregistrez le flux une fois, pas 50
Combiner avec : filesystem

Surveiller une page pour détecter un changement et alerter

👤 Toute personne surveillant une page de statut / traqueur de disponibilité ⏱ ~15 min beginner

Quand l'utiliser : Vous voulez savoir quand un créneau s'ouvre, un prix baisse, un doc se met à jour.

Déroulement
  1. Définir la surveillance
    Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ Copié
    → Surveillance active
  2. Définir le canal d'alerte
    Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ Copié
    → À chaque changement, les deux se déclenchent

Résultat : Surveillance mains-libres d'un signal spécifique.

Pièges
  • Surveiller trop agressivement = blocage — S'en tenir à des intervalles ≥5 min sur la plupart des sites ; respecter les 429

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

browser-act-skill + filesystem

Persister les données scrapées dans des chemins structurés

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ Copié
browser-act-skill + duckduckgo-mcp

Trouver les pages d'abord via la recherche, puis extraire les données structurées

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
extract_typed url, schema, wait_for? Récupérer des données structurées depuis une page Exécution navigateur + tokens LLM
run_flow steps[], schema? Navigation multi-étapes Coût navigateur multi-étapes
watch url, selector, interval, action Détection de changement longue durée Coût par sondage
screenshot url, full_page? Débogage visuel Exécution navigateur

Coût et limites

Coût d'exécution

Quota d'API
Dépend du fournisseur ; certains flux sont gratuits avec le navigateur intégré
Tokens par appel
L'extraction guidée par schéma est moins coûteuse que capture d'écran-et-réflexion brute
Monétaire
Skill gratuit ; tokens LLM pour l'extraction
Astuce
Toujours passer un schéma — l'extraction non dirigée gaspille des tokens sur le bruit

Sécurité

Permissions, secrets, portée

Portées minimales : HTTPS sortant
Stockage des identifiants : Si vous vous connectez à un site, secrets via variables d'env ; rotation après scraping ponctuel
Sortie de données : Sites cibles + fournisseur LLM
Ne jamais accorder : Tokens de connexion persistants stockés dans l'espace de travail du skill

Dépannage

Erreurs courantes et correctifs

L'extraction retourne vide

Attendre plus longtemps le sélecteur ; le site peut charger les données après un délai ou via XHR après clic

Vérifier : Utiliser l'outil screenshot pour vérifier l'état de la page
Le site détecte le bot

Baisser la concurrence ; changer l'UA ; vérifier si le site autorise le scraping

Incompatibilité de schéma

Assouplir les types (string vs number) ; le site peut utiliser un formatage qui casse les types stricts

La surveillance se déclenche à répétition sur des changements cosmétiques

Affiner le sélecteur ; ou passer à un diff basé sur le texte plutôt que sur le HTML

Alternatives

browser-act skills vs autres

AlternativeQuand l'utiliserCompromis
Playwright MCP / chrome-devtools-mcpVous avez besoin du contrôle navigateur complet avec toutes les fonctionnalités DevToolsPlus lourd ; plus coûteux par appel
Firecrawl MCPCrawling à l'échelle d'un site, pas extraction typée par pageForme différente ; payant pour les volumes importants
duckduckgo-mcp fetch_contentLa page est en HTML simple ; pas besoin de JSNe fonctionnera pas sur les SPAs

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills