Un prompt peut-il remplacer Tango ?

Construis une extension de navigateur qui capture un flux de travail et peut le rejouer comme une superposition en direct sur l’application réelle.

Capture : à l’enregistrement, écoute les clics, la saisie de formulaire et la navigation. Pour chaque étape, stocke : le modèle d’URL de la page, une capture d’écran de la fenêtre avec l’élément cible entouré, le libellé texte de l’élément, et — c’est le point critique — une stratégie de sélecteur plutôt qu’un sélecteur unique.

La stratégie de sélecteur est le cœur technique de ce projet. Un chemin CSS unique casse dès que l’application déploie un changement. À la place, enregistre plusieurs localisateurs candidats par étape, par ordre de priorité :

1. Un attribut de test stable si l’application en fournit un.
2. Le rôle accessible plus le nom accessible, qui survit à la plupart des refontes visuelles.
3. Le contenu texte visible, exact puis normalisé.
4. Un chemin CSS structurel, en dernier recours.

À la relecture, essaie chacun dans l’ordre et utilise le premier qui correspond exactement à un élément. Si plusieurs correspondent, ou aucun, arrête-toi et indique à l’utilisateur quelle étape a échoué et ce qu’elle cherchait, plutôt que de cliquer sur la mauvaise chose. Un logiciel de guidage qui clique sur le mauvais bouton est pire que pas de guidage du tout.

Rédaction au moment de la capture, pas après : avant de stocker une capture d’écran, floute le contenu de tout champ de mot de passe, de toute saisie dont la valeur correspond à un motif de numéro de carte ou de longue suite de chiffres, et de tout élément que l’utilisateur a ajouté à une liste de blocage par domaine. La rédaction doit se produire avant que l’image soit écrite, parce qu’une capture d’écran floutée après coup a déjà existé non floutée sur le disque.

Deux sorties à partir d’une capture :

- Un guide statique : des étapes numérotées avec la capture d’écran annotée et une instruction auto-rédigée à partir du libellé et de l’action de l’élément, le tout modifiable.
- Un pas-à-pas en direct : mode superposition sur l’application réelle, surlignant l’élément localisé pour l’étape en cours avec une infobulle de l’instruction, avançant quand l’utilisateur effectue l’action plutôt que sur un minuteur. Un indicateur de progression, un bouton passer, et un arrêt qui ne laisse aucune trace sur la page.

Implémentation de la superposition : rends dans une racine shadow attachée au document pour que le CSS de l’application hôte ne puisse pas interférer et que les styles de la superposition ne puissent pas fuir. Positionne selon le rectangle englobant de l’élément localisé, en mettant à jour au défilement et au redimensionnement.

Stockage : guides dans le stockage de l’extension avec un export et un import JSON, pour qu’un guide puisse être partagé comme un fichier.

Hors périmètre : la capture en dehors du navigateur, le partage hébergé ou une bibliothèque de guides, les analyses de vue, l’enregistrement vidéo, et tout clic automatique — la superposition guide une personne, elle n’effectue jamais l’action à sa place.