Comment utiliser l’extension de navigateur OpenClaw pour l’automatisation web

OpenClaw est une plateforme d’agent IA open source qui peut se connecter à vos applications de messagerie, exécuter des tâches sur votre serveur et automatiser les flux de travail entre les outils que vous utilisez déjà.

L’extension de navigateur OpenClaw intègre l’agent directement dans votre navigateur. Elle vous permet d’automatiser des tâches courantes telles que remplir des formulaires, extraire des pages, prendre des captures d’écran et naviguer sur des sites sans aucun codage.

Pour utiliser l’extension de navigateur OpenClaw, vous aurez besoin :

1. Une instance OpenClaw en cours d’exécution.
2. L’extension installée sur un navigateur basé sur Chromium.
3. Une connexion entre les deux.

La configuration de l’extension se fait en trois étapes : OpenClaw fonctionnant sur un VPS, un hôte de nœud pour relayer les instructions et l’extension Chrome pour les exécuter dans l’onglet de votre navigateur.

Une fois connecté, vous pouvez contrôler le navigateur à l’aide d’instructions rédigées dans votre langage quotidien.

Cette automatisation du navigateur élimine les tâches répétitives qui vous font perdre du temps. Au lieu de remplir les mêmes formulaires, de copier des données ou de cliquer sur plusieurs étapes, vous décrivez la tâche une seule fois et laissez l’agent s’en charger.

Comment installer et configurer l’extension de navigateur OpenClaw

Si vous n’avez pas d’instance OpenClaw en cours d’exécution, vous pouvez la configurer sur votre ordinateur local ou sur un VPS.

Pour vous montrer les étapes à suivre, nous allons la configurer sur un VPS à l’aide de l’hébergement OpenClaw de Hostinger, où vous pouvez vous inscrire et obtenir tout ce qui est préconfiguré pour le déploiement en un seul clic.

Avec la méthode d’installation en un clic, il vous suffit de choisir un plan VPS OpenClaw, de finaliser le paiement et de saisir votre numéro WhatsApp dans le champ prévu à cet effet.

Copiez le jeton de passerelle OpenClaw affiché à côté, car vous en aurez besoin pour vous connecter.

À partir de là, cliquez sur Déployer et attendez que l’installation se termine. Cela prend généralement quelques minutes.

Une fois l’installation terminée, vous verrez votre instance OpenClaw avec le statut Actif dans le tableau de bord VPS. Cliquez sur Ouvrir pour accéder à la page de connexion OpenClaw, collez le jeton que vous avez conservé précédemment et vous serez dans le tableau de bord.

Si vous souhaitez essayer une autre méthode pour configurer OpenClaw sur un VPS, vous pouvez suivre notre guide étape par étape.

L’extension de navigateur OpenClaw ne prend en charge que les navigateurs basés sur Chromium, c’est pourquoi ce guide utilise Google Chrome.

Comme OpenClaw fonctionne sur le VPS, Chrome doit être exécuté sur un ordinateur local distinct. Nous allons donc installer un programme hôte de nœud sur l’ordinateur où Chrome est exécuté. L’hôte de nœud agit comme un relais, permettant à la passerelle VPS d’envoyer des instructions du navigateur à votre ordinateur local.

Suivez les étapes ci-dessous pour les connecter via Tailscale afin de conserver l’échange de données sur un réseau privé et de minimiser le risque d’exposition.

Étape 1 : Configurer Tailscale sur votre VPS et votre appareil local

Avant de connecter votre VPS et votre appareil local, vous devez exécuter Tailscale sur les deux machines.

1. Exécutez cette commande pour installer Tailscale sur votre VPS :

curl -fsSL https://tailscale.com/install.sh | sh

sudo tailscale up

2. Installez Tailscale sur l’appareil sur lequel vous souhaitez exécuter Chrome. Vous pouvez télécharger le package d’installation depuis le site officiel de Tailscale.
3. Connectez-vous avec le même compte Tailscale que celui utilisé pour le VPS.
4. Vérifiez que votre VPS et votre appareil sont tous deux détectés comme des machines connectées dans votre panneau d’administration Tailscale.
5. Notez l’adresse IP Tailscale du VPS (qui commence par 100.x.x.x), car vous en aurez besoin plus tard.
6. Configurez la passerelle de votre VPS pour qu’elle écoute le réseau Tailscale en entrant cette commande :

openclaw config set gateway.bind tailnet

openclaw gateway restart

Pour poursuivre l’installation de l’hôte du nœud, vous aurez besoin de votre jeton OpenClaw Gateway, que vous avez obtenu après la configuration. Si vous l’avez perdu, vous pouvez le retrouver en naviguant vers Config → Gateway dans votre tableau de bord OpenClaw. Vous pouvez également exécuter cette commande sur votre VPS :

openclaw config get gateway.auth.token

Étape 2 : Installer l’hôte de nœud sur votre appareil local

L’hôte de nœud permet à la passerelle VPS d’envoyer des instructions au navigateur Chrome local. Voici ce dont vous avez besoin pour l’installer :

1. Installez OpenClaw sur votre machine locale en entrant cette commande dans le terminal de votre appareil :

npm install -g openclaw@latest

2. Définissez le jeton Gateway comme variable d’environnement. N’oubliez pas de remplacer le paramètre fictif par votre jeton réel lorsque vous exécutez cette commande :

export OPENCLAW_GATEWAY_TOKEN="<insérez-votre-jeton-passerelle>"

3. Entrez la commande ci-dessous pour démarrer l’hôte du nœud et le connecter à votre VPS. Veillez à remplacer l’espace réservé par l’adresse IP Tailscale de votre VPS :

openclaw node run --host <votre-ip-tailscale-vps> --port 18789 --display-name "My Local Chrome"

4. Exécutez les commandes ci-dessous sur votre VPS pour approuver la connexion du nœud. L’ID de la demande apparaîtra dans la commande pending.

openclaw nodes pending

openclaw nodes approve <requestId>

Étape 3 : Installer l’extension Chrome sur votre machine locale

Une fois l’hôte du nœud en cours d’exécution, vous pouvez désormais configurer l’extension Chrome sur votre appareil local. Ce composant permet à l’agent de contrôler directement les onglets de votre navigateur.

1. Installez les fichiers de l’extension de navigateur OpenClaw sur le terminal de votre appareil à l’aide de cette commande :

openclaw browser extension install

2. Notez le chemin d’installation affiché par la commande :

openclaw browser extension path

3. Ouvrez Chrome et entrez chrome://extensions.
4. Activez le mode développeur en basculant le bouton situé dans le coin supérieur droit. 
5. Cliquez sur Load unpacked, puis sélectionnez les fichiers d’extension que vous avez trouvés à l’étape 2.
6. Épinglez l’extension à votre barre d’outils Chrome.

Étape 4 : Exécuter l’automatisation du navigateur

À ce stade, votre passerelle VPS, votre hôte de nœud et votre extension Chrome devraient communiquer correctement. Voici comment commencer à contrôler un onglet de navigateur :

1. Ouvrez l’onglet Chrome que vous souhaitez contrôler avec OpenClaw.
2. Cliquez sur l’icône de l’extension OpenClaw. Le badge doit indiquer ON.
3. Sur votre VPS, exécutez cette commande pour utiliser le profil du navigateur Chrome :

openclaw browser --browser-profile chrome tabs

La passerelle VPS achemine les actions du navigateur via l’hôte de nœud sur votre machine locale. À partir de là, l’extension Chrome les exécute dans l’onglet actif.

Une fois cela fait, vous pouvez saisir des instructions en langage naturel via n’importe quelle interface connectée à OpenClaw, qu’il s’agisse du tableau de bord WebChat ou d’une application de messagerie comme Telegram ou WhatsApp. L’action que vous souhaitez effectuer sera automatiquement exécutée dans l’onglet du navigateur.

Automatiser les formulaires et les interactions UI avec OpenClaw

L’automatisation des formulaires est l’une des raisons les plus courantes pour lesquelles les utilisateurs ont recours à l’automatisation du navigateur, et OpenClaw la rend automatique. Voici le flux de travail habituel :

1. Accédez à la page. Demandez à l’agent IA d’ouvrir l’URL où se trouve le formulaire, ou ajoutez l’extension à un onglet qui se trouve déjà sur la bonne page.
2. Prenez un snapshot. L’agent exécute un snapshot pour identifier tous les éléments interactifs de la page et attribue un numéro de référence à chacun d’entre eux.
3. Décrivez ce qu’il faut remplir. Donnez à l’agent des instructions en langage naturel telles que « Entrez « John Doe » dans le champ nom, sélectionnez « États-Unis » dans le menu déroulant pays et cochez la case « J’accepte les conditions ». L’agent fait correspondre vos instructions aux références du snapshot et exécute chaque action.
4. Soumettez et vérifiez. Demandez à l’agent de cliquer sur le bouton « Soumettre ». Il peut ensuite prendre une capture d’écran ou lire la page de confirmation pour vérifier que la soumission a bien été effectuée.

Soyez précis lorsque vous rédigez vos instructions. Plus vous fournissez de détails, moins l’agent aura besoin de réessayer.

Automatiser le web scraping avec l’extension de navigateur OpenClaw

Le web scraping avec OpenClaw suit un modèle similaire au remplissage de formulaires, mais se concentre sur la lecture plutôt que sur l’écriture. L’agent navigue vers une page, prend un snapshot pour comprendre la structure, puis extrait les données que vous demandez.

Voici comment configurer un workflow de scraping de base :

1. Dirigez l’agent vers la page cible. Donnez-lui une URL spécifique plutôt que de lui demander d’effectuer une recherche. Par exemple, « Allez sur example.com/products et extrayez tous les noms et prix des produits ».
2. Laissez l’agent prendre un snapshot de la page. Le snapshot fournit à l’agent une carte des éléments interactifs et du contenu de la page, y compris les tableaux, les listes et les blocs de texte.
3. Spécifiez ce qu’il faut extraire. Soyez explicite quant à la structure des données que vous souhaitez. Au lieu de « récupérer les informations sur les prix », essayez « Extraire le nom du produit, le prix mensuel et le prix annuel de chaque ligne du tableau comparatif ».
4. Gérez la pagination. Si les données s’étendent sur plusieurs pages, demandez à l’agent de cliquer sur le bouton « Suivant » et de répéter l’extraction. L’agent prend un nouvel snapshot après chaque chargement de page pour rester orienté.

Certains sites web chargent le contenu de manière asynchrone à l’aide d’AJAX ou de frameworks d’applications à page unique.

OpenClaw gère cela à l’aide de son système d’attente. Il peut attendre que les éléments apparaissent, que les requêtes réseau soient terminées ou que les conditions JavaScript personnalisées soient évaluées comme vraies.

Cela signifie que vous n’êtes pas obligé de récupérer des pages partiellement rendues. L’agent attend que le contenu soit réellement présent avant de l’extraire.

Pour obtenir une sortie structurée, vous pouvez demander à l’agent de formater les données extraites sous forme de tableau, d’objet JSON ou de fichier CSV. Si vous effectuez le scraping à partir d’une chaîne de compétences ou d’automatisation, la sortie peut être directement intégrée à l’étape suivante, par exemple, le scraping des prix des produits, puis la génération d’un rapport comparatif.

Principales fonctionnalités de l’extension de navigateur OpenClaw

L’extension de navigateur OpenClaw sert de pont entre l’agent IA OpenClaw et votre navigateur.

Elle utilise le protocole Chrome DevTools (CDP) pour interagir directement avec les onglets. Cela lui donne un accès natif à vos onglets, ce qui se traduit par une exécution plus rapide et une utilisation moindre des ressources par rapport aux outils qui lancent une instance de navigateur distincte.

Voici les principales fonctionnalités de l’extension Chrome OpenClaw :

• Contrôle du navigateur. OpenClaw peut naviguer vers des URL, cliquer sur des éléments, saisir du texte dans des champs, sélectionner des options dans des menus déroulants, faire défiler des pages et passer d’un onglet à l’autre. Comme il se connecte à votre session de navigation réelle, il a accès à vos identifiants de connexion existants, vous n’avez donc pas besoin de vous réauthentifier à chaque exécution de l’automatisation.
• Snapshots intelligents. Le système de snapshots analyse la page actuelle et attribue des numéros de référence à chaque élément interactif. L’agent utilise ces références pour décider sur quels liens ou interactions cliquer ou interagir. Exécutez le snapshot du navigateur OpenClaw pour le voir en action, ou utilisez –interactive pour obtenir un snapshot basé sur les rôles qui met en évidence les éléments exploitables.
• Automatisation des formulaires. L’agent peut remplir des formulaires dans leur intégralité, y compris les champs de texte, les cases à cocher, les boutons radio, les menus déroulants et les téléchargements de fichiers. Décrivez les données que vous souhaitez saisir, et l’agent traite chaque champ dans l’ordre.
• Extraction de données et scraping web. OpenClaw peut lire le contenu des pages, extraire des données structurées à partir de tableaux, extraire du texte à partir d’éléments spécifiques et gérer du contenu chargé dynamiquement. Il attend que les requêtes AJAX soient terminées avant de procéder au scraping, afin que vous obteniez la page complète.
• Captures d’écran et enregistrements visuels. L’agent peut capturer des captures d’écran de pages entières ou cibler des éléments spécifiques. Cela est utile pour la conservation des enregistrements, la surveillance des changements visuels sur une page ou le débogage lorsqu’une automatisation ne se déroule pas comme prévu.

Fonctionnalités avancées de l’extension de navigateur OpenClaw

Les fonctionnalités présentées jusqu’à présent répondent à la plupart des besoins quotidiens d’automatisation. Mais OpenClaw va plus loin.

En coulisses, il est conçu pour fonctionner avec des modèles d’IA et se connecter à des services externes, ce qui ouvre des possibilités d’automatisation que les navigateurs classiques ne peuvent tout simplement pas égaler.

Intégration de l’IA et du machine learning

Ce qui distingue OpenClaw des outils d’automatisation traditionnels, c’est la couche d’IA qui se trouve au-dessus du contrôle du navigateur.

L’agent est alimenté par de grands modèles linguistiques tels que Claude ou GPT, ce qui signifie qu’il interprète le contenu des pages, s’adapte aux changements de mise en page et prend des décisions contextuelles sur la marche à suivre.

En pratique, cela signifie que l’agent peut gérer des tâches qui interrompraient un script classique dès qu’un site web met à jour son design.

Si le libellé d’un bouton passe de « Soumettre » à « Envoyer le formulaire » ou si un champ de formulaire effectue un transfert de la colonne de gauche à celle de droite, l’IA reconnaît l’intention derrière l’élément et continue à fonctionner.

Vous décrivez ce que vous voulez faire en langage naturel, et le modèle détermine le chemin d’exécution.

Intégration avec des services externes

L’extension de navigateur OpenClaw fait partie de l’écosystème plus large de la passerelle OpenClaw, elle peut donc être combinée avec d’autres canaux et outils.

Par exemple, une automatisation de navigateur qui extrait des données sur les prix peut envoyer les résultats vers un canal Slack, déclencher une notification WhatsApp ou alimenter une feuille Google Sheet via les autres intégrations de l’agent.

OpenClaw utilise une architecture basée sur les compétences, ce qui vous permet de créer des composants d’automatisation modulaires et de les enchaîner.

Une compétence « récupérer les prix des concurrents » peut alimenter une compétence « analyser les tendances des prix », qui déclenche ensuite une compétence « envoyer un rapport hebdomadaire ». Chaque compétence est réutilisable dans différents flux de travail, vous pouvez donc la créer une seule fois et la déployer plusieurs fois.

Pourquoi l’extension de navigateur OpenClaw est idéale pour l’automatisation

OpenClaw est idéal pour l’automatisation car il vous permet de contrôler les tâches du navigateur à l’aide d’un langage naturel, sans avoir à écrire ou à maintenir du code.

La plupart des outils d’automatisation de navigateur traditionnels, tels que Selenium, Puppeteer et Playwright, sont conçus pour les développeurs. Ils reposent sur des scripts codés en dur, des processus de configuration rigides et une infrastructure dédiée, même pour des tâches simples comme l’envoi d’un formulaire. Lorsqu’un site web modifie sa mise en page ou ses libellés, ces scripts cessent souvent de fonctionner et nécessitent des corrections manuelles.

OpenClaw adopte une approche différente. Au lieu d’exécuter un navigateur automatisé distinct, il se connecte directement à votre navigateur existant via une extension qui communique avec la passerelle que vous utilisez déjà. Il n’y a pas d’instance de navigateur supplémentaire à gérer ni de dépendances lourdes à maintenir.

Comme l’automatisation est pilotée par une couche d’IA plutôt que par des sélecteurs fixes, OpenClaw s’adapte aux changements de structure ou d’étiquettes des pages. Un bouton renommé de « Soumettre » à « Envoyer » ou un champ de formulaire déplacé vers une autre section n’interrompt pas le flux de travail. L’agent interprète l’intention et poursuit la tâche.

Si vos besoins d’automatisation changent fréquemment ou si vous souhaitez éviter de maintenir des scripts fragiles, OpenClaw offre une alternative flexible et résiliente à l’automatisation traditionnelle des navigateurs.

Bonnes pratiques pour l’automatisation navigateur avec OpenClaw

Il est facile d’utiliser OpenClaw pour automatiser les tâches du navigateur, mais pour le faire de manière efficace et sûre, il faut prendre des précautions supplémentaires. En plus de mettre en œuvre les meilleures pratiques générales d’OpenClaw, procédez comme suit pour déployer une automatisation sûre du navigateur :

Utiliser un profil de navigateur dédié

L’extension de navigateur OpenClaw utilise l’API de débogage de Chrome. Lorsqu’elle est associée à un onglet, le modèle IA peut cliquer, taper, naviguer, lire le contenu de la page et accéder à tout ce à quoi la session connectée de l’onglet peut accéder.

Cela fonctionne directement dans votre environnement de navigateur réel et n’est pas isolé dans un bac à sable comme le profil de navigateur géré intégré à OpenClaw.

Si vous associez OpenClaw à votre profil de navigateur quotidien, vous donnez à l’agent IA l’accès à tous les comptes connectés, tels que les e-mails, les services bancaires, les réseaux sociaux et les panneaux d’administration, et il peut effectuer toutes sortes d’actions à votre insu.

Pour réduire ce risque, créez et utilisez toujours un profil Chrome dédié spécifiquement à la relais de l’extension OpenClaw. Gardez-le séparé de votre navigation personnelle et connectez-vous uniquement aux comptes nécessaires pour les automatisations que vous souhaitez mettre en place.

Sécuriser votre passerelle et votre réseau

L’automatisation du navigateur consiste à accorder à un modèle d’IA le contrôle direct d’un onglet du navigateur. Traitez-la avec la même prudence que l’accès à distance à un ordinateur et minimisez votre exposition :

• Conservez la passerelle et les hôtes des nœuds sur un réseau privé. Si vous utilisez Tailscale, conservez tout sur le réseau tailnet et fiez-vous à l’authentification de la passerelle combinée à l’appairage des nœuds pour le contrôle d’accès.
• N’exposez pas les ports de relais au public. N’utilisez jamais Tailscale Funnel, car il peut exposer les services à l’internet public.
• Fiez-vous aux protections intégrées. Le relais bloque les origines non liées à une extension et nécessite un jeton d’authentification interne pour les clients CDP, mais ces protections ne fonctionnent correctement que lorsque la couche réseau est également verrouillée.

Réduire les actions redondantes

Chaque action du navigateur coûte du temps et des jetons API. Pour optimiser les performances d’OpenClaw, structurez vos tâches de manière à éviter les étapes inutiles :

• Regroupez les tâches connexes en une seule session. Au lieu d’ouvrir et de fermer le navigateur pour chaque tâche, enchaînez les actions connexes afin que l’agent puisse les traiter de manière séquentielle sans perdre le contexte de la page.
• Soyez précis dans vos instructions. Des invites vagues obligent l’agent à explorer et à réessayer, alors donnez toujours des instructions aussi précises que possible. Au lieu de « trouver les informations sur les prix », envoyez « aller sur example.com/pricing et extraire les prix des plans mensuels du tableau comparatif ».
• Utilisez les snapshots de manière stratégique. OpenClaw prend des captures d’écran pour comprendre le contenu des pages, mais une fréquence excessive ralentit le processus. Laissez l’agent décider quand il a besoin d’une confirmation visuelle plutôt que de l’imposer après chaque action.

Gérer les onglets de manière réfléchie

Fermez les onglets dont vous n’avez plus besoin et évitez de laisser l’agent ouvrir plusieurs onglets en parallèle, sauf si votre tâche nécessite une comparaison ou un recoupement. Un seul onglet ciblé produit des résultats plus fiables que plusieurs onglets concurrents.

Déboguer systématiquement

Lorsque l’automatisation ne fonctionne pas comme prévu, vérifiez les éléments suivants dans l’ordre :

• État de la connexion. L’extension relais est-elle connectée ? Le badge indique-t-il « ON » ? La passerelle fonctionne-t-elle ?
• État de la page. La page s’est-elle entièrement chargée avant que l’agent n’essaie d’interagir ? Le contenu dynamique peut entraîner des problèmes de synchronisation.
• Autorisations. L’agent dispose-t-il du profil et des outils appropriés ? L’onglet se trouve-t-il sur un site qui bloque les interactions automatisées, comme CAPTCHA ou la détection de bot ?
• Logs. Vérifiez les journaux de la passerelle pour voir s’il y a des messages d’erreur spécifiques. La plupart des échecs laissent une trace claire.

Adapter votre automatisation OpenClaw à des projets plus importants

Une fois que vous avez automatisé quelques tâches, l’étape suivante consiste naturellement à passer à l’échelle supérieure pour gérer des flux de travail plus complexes, traiter des ensembles de données plus volumineux ou exécuter des automatisations sur plusieurs sites.

Voici comment aborder l’optimisation des performances à mesure que vos projets OpenClaw se développent :

• Adaptez l’infrastructure à la charge de travail. L’automatisation des navigateurs est gourmande en ressources. Surveillez l’utilisation du CPU/RAM et mettez à niveau votre VPS si nécessaire (minimum 4 Go de RAM pour tout ce qui dépasse l’automatisation de base). Pour les charges de travail importantes, déchargez les exécutions vers un VPS séparé dédié à cet effet.
• Utilisez le profil de navigateur géré pour l’évolutivité. Passez au navigateur sans interface graphique géré par OpenClaw pour l’automatisation basée sur serveur ou en arrière-plan. Il est plus efficace et isole les flux de travail de vos données de navigation personnelles.
• Divisez les flux de travail en compétences réutilisables. Divisez les automatisations de grande envergure en compétences modulaires plus petites, telles que scraper des données → extraire des informations → générer des rapports. Cela améliore la réutilisation, simplifie le débogage et facilite la mise à l’échelle.
• Contrôlez l’utilisation et les coûts de l’API. Définissez des limites de jetons, utilisez des modèles plus légers pour les étapes de routine et mettez en cache les résultats lorsque les pages n’ont pas changé. Comprendre comment les coûts d’OpenClaw évoluent vous aide à planifier à l’avance à mesure que votre automatisation se développe.
• Planifiez et échelonnez les exécutions. Utilisez des tâches cron pour espacer les automatisations. Cela permet d’équilibrer la charge du serveur et de réduire le risque de limites de débit ou de détection de bots.
• Prévoyez les défaillances. Attendez-vous à des pannes à grande échelle. Versionnez les compétences et les configurations, sauvegardez régulièrement votre espace de travail et examinez les journaux pour détecter rapidement les problèmes récurrents.

Avec une structure adéquate, OpenClaw peut passer de quelques automatisations à un système fiable sans devenir un fardeau en termes de maintenance.

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.