Connecter votre agent IA à votre navigateur personnel avec la connexion automatique

Connectez votre agent IA directement à votre instance de navigateur active grâce à la fonctionnalité de connexion automatique. Cela permet à votre agent de contourner les limites du bac à sable en héritant de vos onglets actuels, de vos extensions de navigateur et de l'état de l'application en direct.

L'héritage du contexte de votre workflow permet à votre agent de passer de l'écriture de code au débogage de l'état de votre navigateur en direct sans perdre les données de session. Cela peut être utile lorsque vous avez déjà atteint un état d'application spécifique (comme un processus de paiement complexe ou une erreur reproduite manuellement) et que vous souhaitez que votre agent prenne le relais pour l'investigation technique sans avoir à réexécuter ces étapes manuellement.

Tenez compte des points suivants avant d'activer la connexion automatique :

  • Sécurité et confidentialité : lorsque la connexion automatique est active, votre agent a accès à toutes les données de votre profil de navigateur, y compris les onglets ouverts, le stockage de session, le stockage local, les cookies et les autres données exposées par les API JavaScript.
  • Garantie de confidentialité des données : le serveur Outils pour les développeurs Chrome pour les agents est un processus local et n'envoie pas vos données de navigation, vos jetons de session ni vos données de télémétrie à Google.
  • Confiance et requêtes : n'utilisez ce mode qu'avec les agents auxquels vous faites confiance et soyez prudent quant aux informations que vous incluez dans les requêtes.

Prérequis

Avant d'utiliser la fonctionnalité de connexion automatique, assurez-vous de disposer des éléments suivants :

  • Chrome 144 et versions ultérieures : la connexion automatique nécessite des protocoles de débogage modernes disponibles dans les versions actuelles de Chrome.
  • Canal Chrome correct : votre agent se connecte à la version stable de Chrome par défaut. Pour utiliser Canary ou Bêta, spécifiez le canal dans votre configuration.
  • Débogage à distance activé : activez manuellement le pont entre votre navigateur et l'agent.
  • Configuration correcte : vous devez mettre à jour la configuration MCP pour inclure l'indicateur --autoConnect.

Configurer la connexion automatique

Pour configurer la fonctionnalité de connexion automatique dans votre serveur MCP, procédez comme suit :

  1. Dans votre navigateur Chrome en cours d'exécution, accédez à chrome://inspect/#remote-debugging et activez le débogage à distance.
  2. Mettez à jour votre configuration MCP pour inclure l'indicateur --autoConnect :

    {
      "mcpServers": {
        "chrome-devtools": {
          "command": "npx",
          "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
        }
      }
    }
    
  3. Demandez à l'agent d'interagir avec votre application Chrome ouverte. Lorsque Chrome vous demande l'autorisation d'autoriser la session, cliquez sur Autoriser.

Votre agent utilise désormais le serveur MCP pour interagir avec votre application Chrome en cours d'exécution.

Cas d'utilisation de la connexion automatique

La connexion automatique vous permet d'utiliser des outils ou des états qui ne peuvent pas être utilisés sur les sessions Chrome en bac à sable. Par exemple, au lieu de demander à votre agent de se connecter (ce qui échoue souvent), vous pouvez accéder vous-même à la page et vous connecter. Demandez ensuite à l'agent de prendre le relais.

Les sections suivantes incluent quelques exemples de cas d'utilisation de la fonctionnalité de connexion automatique.

Déboguer les tableaux de bord authentifiés

Les outils internes et les tableaux de bord privés sont souvent protégés par des couches complexes d'authentification unique (SSO) ou de réseau privé virtuel (VPN). Un navigateur en bac à sable nécessite généralement une connexion que votre agent ne peut pas contourner. Avec la connexion automatique, votre agent hérite de votre session active.

Exemple de requête :

I have my company's staging dashboard open in the next tab. Can you look at the
User Analytics chart, find the SVG element for the Friday data point, and tell
me why the tooltip isn't appearing on hover?

Exemple d'exécution d'un agent : votre agent identifie votre processus Chrome existant, trouve l'onglet actif et inspecte l'arborescence d'accessibilité pour localiser les éléments. Il peut également utiliser des API JavaScript pour évaluer des conflits spécifiques.

Corriger en direct l'onglet actuel

Évitez de reproduire manuellement les erreurs. Au lieu de traduire les étapes de reproduction dans une nouvelle invite pour un agent sandboxé, vous pouvez demander à votre agent de corriger le bug sur la page active où vous l'avez déjà rencontré.

Exemple de requête :

Look at the current page. The Submit button overlaps with the footer on this
screen size. Generate a fix for the layout and verify it by injecting the CSS
directly into this tab.

Exemple d'exécution d'un agent : comme il est connecté à votre fenêtre active, votre agent analyse votre mise en page et applique la correction instantanément. Vous voyez le bouton se déplacer sur votre écran, ce qui confirme que la correction fonctionne avant de mettre à jour le code source.