Sisypi - Assistant d’automatisation

Sisypi est une puissante extension chromée conçue pour automatiser facilement les tâches répétitives et longues sur les pages Web. Il vous permet de créer, d’éditer et d’exécuter des scénarios d’automatisation Web via une interface intuitive sans nécessiter de connaissances de codage . Accélérez vos flux de travail quotidiens, automatisant les processus de collecte de données et augmentez votre efficacité en minimisant les erreurs manuelles.

Caractéristiques

Sisypi propose un ensemble de fonctionnalités riches et flexibles pour vos besoins en automatisation Web:

Création du scénario visuel: Ajoutez des étapes d’automatisation en sélectionnant directement des éléments sur la page Web. Configurez facilement les interactions de base comme cliquer, taper du texte et copier des données. Advanced Toolbox: fournit divers outils pour ajouter de la complexité et de la flexibilité à vos scénarios: Attendez: Débit de scénario de contrôle en attendant une durée spécifique (en millisecondes). Important pour les charges de page ou le contenu dynamique. Commentaire: Ajouter des notes descriptives à votre scénarioÉtapes pour améliorer la lisibilité et la maintenance. Capture d’écran: Capturez automatiquement une capture d’écran de la page à des moments spécifiques du scénario. Utile pour le débogage ou le suivi des processus. Logique conditionnelle (si / else): Exécutez différentes étapes en fonction de la question de savoir si un élément spécifique existe sur la page. Rend vos scénarios plus dynamiques et tolérants aux pannes. LOOCS (n fois): Répétez une étape ou un bloc spécifique des étapes un nombre prédéfini de fois. Particulièrement utile lors du traitement des éléments de liste. Faites défiler: Faites défiler la page pour charger un nouveau contenu ou rendre les éléments invisibles accessibles. Prise en charge des variables: Enregistrer les valeurs copiées de la page Web à des variables nommées et utiliser ces variables pour les entrées de texte ou d’autres actions dans les étapes suivantes (par exemple, variable ). Rend vos scénarios plus génériques et réutilisables. Restriction d’URL: Assurez-vous que les scénarios s’exécutent uniquement sur des pages correspondant aux modèles d’URL spécifiques, empêchant l’exécution accidentelle ou indésirable sur des pages incorrectes. Gestion du scénario: Créez, modifiez et supprimez facilement vos scénarios via une interface intuitive. Vous pouvez sauvegarder tous vos scénarios en tant que fichier JSON unique et les restaurer plus tard. Prise en charge multi-langues: L’interface utilisateur prend en charge les langues turques et anglaises.

Architecture

Sisypi fonctionne en utilisant les composants centraux de l’architecture d’extension Chrome. Ces composants sont conçus pour remplir différentes fonctions de l’extension:

popup ( popup / ): L’interface principale qui s’ouvre lorsque l’utilisateur clique sur l’icône d’extension. Toutes les interactions utilisateur, telles que la création, l’édition et la gestion des scénarios, ont lieu ici. Script d’arrière-plan ( scripts / background.js ): le” cerveau “de l’extension. Il écoute les événements de navigateur, stocke les données de scénario et coordonne la communication entre les scripts contextuels et contenu. Content Scripts ( Content / Content_Script.js , Content / Selector_Generator.js ): Scripts injectés directement dans la page Web. Ils accèdent etInteragissez avec le DOM de la page Web. Ils activent le mode de sélection des éléments, exécutent des étapes de scénario et envoient des mises à jour d’état dans le script d’arrière-plan. Ressources accessibles au Web ( Content / Selection.css ): Le fichier CSS injecté dans la page Web pendant le mode de sélection des éléments.

Installation

Sisypi est une extension chromée. Suivez ces étapes pour l’installer et l’exécuter dans votre environnement de développement:

1. Clone le référentiel: Clone ce référentiel GitHub sur votre ordinateur ou le téléchargez-le comme zip et extraitz-le dans le répertoire souhaité. bash git clone https://github.com/ademisler/sisypi.git ’
2. Open Chrome Extensions: Ouvrez votre navigateur Chrome et tapez chrome: // extensions dans la barre d’adresse.
3. Activer le mode développeur: Activez le “mode développeur” bascule dans le coin supérieur droit.
4. Chargez l’extension déballée: Cliquez sur le bouton “Chargez un débordement”.
5. Sélectionnez le dossier: Sélectionnez le dossier sisypi que vous avez cloné ou extrait.

Maintenant, l’extension Sisypi sera installéeet prêt à l’emploi dans votre navigateur. Vous voudrez peut-être épingler l’icône d’extension à votre barre de navigateur.

Utilisation

La création et l’exécution de scénarios d’automatisation Web à l’aide de Sisypi est assez simple. Voici un guide étape par étape:

1. Ouvrez l’extension: Cliquez sur l’icône Sisypi dans le coin supérieur droit de votre navigateur Chrome pour ouvrir la fenêtre d’extension.
2. Créer un nouveau scénario: Sur l’écran principal, cliquez sur le bouton “Créer un nouveau scénario” . Cela vous amènera à l’écran de l’éditeur de scénario.
3. Entrez les informations du scénario:
   Nom du scénario: Donnez à votre scénario un nom descriptif (par exemple, “Rechercher sur Google”). Restriction d’URL (facultatif): Si vous souhaitez que le scénario s’exécute uniquement sur un modèle URL ou URL spécifique, entrez une URL ou une partie de celui-ci ici (par exemple, Google.com / Maps ). Cela empêche votre scénario de fonctionner sur des pages incorrectes.
4. Ajouter des étapes:
   Ajouter une étape en sélectionnant l’élément: Cliquez sur ce bouton pour interagir avec un élément sur la page Web. L’extension commencera l’élémentMode de sélection dans l’onglet actif. Lorsque vous planez votre souris sur des éléments, vous verrez des boîtes numérotées. Entrez le numéro de l’élément souhaité et cliquez sur “Sélectionner”. Ensuite, choisissez l’action que vous souhaitez effectuer sur l’élément (cliquez, tapez, copie) et entrez les paramètres nécessaires (par exemple, texte à taper, nom de variable). Toolbox: Dans la section “Toolbox” en bas de l’écran de l’éditeur, vous pouvez ajouter des étapes avancées comme “attendre”, “comment”, “capture d’écran”, “if”, “else”, “end”, “n fois”, “end loop” et “scroll”. Chaque outil ajoute une couche différente de fonctionnalité et de contrôle à votre scénario.
5. Enregistrer le scénario: Après avoir fini d’ajouter des étapes, cliquez sur le bouton “Enregistrer” pour enregistrer votre scénario.
6. Exécutez le scénario: Pour exécuter le scénario enregistré, cliquez sur le bouton “Exécuter” . Le scénario s’exécutera automatiquement dans l’onglet du navigateur actif. L’état d’exécution sera affiché dans la fenêtre d’extension.
7. Sauvegarde et restauration: À partir de l’écran principal, vous pouvez télécharger tous vos scénariOS en tant que fichier JSON unique sur votre ordinateur avec “Sauvegarde All” , et restaurez les scénarios précédemment sauvegardés avec “Load From Backup” . Cette fonctionnalité vous permet de protéger vos scénarios et de les transférer entre différents appareils.

Développement

Ce projet est développé à l’aide d’outils de développement Web modernes: Vite et TypeScript.

outils requis

[Node.js] (https://nodejs.org/) (v18 ou plus recommandé) [npm] (https://www.npmjs.com/) ou [yarn] (https://yarnpkg.com/)

Configuration et course

1. Clone le référentiel et accéder au répertoire du projet: bash git clone https://github.com/ademisler/sisypi.git CD Sisypi ’

2. Installez les dépendances: bash Installation de NPM ’

3. Démarrez le serveur de développement. Cette commande utilise VITE pour popup.html et fichiers connexes, offrant une expérience de rechargement rapide et de développement: bash NPM Run Dev ’

4. Pour installer l’extension dans Chrome, suivez les étapes “d’installation” ci-dessus. Modifications apportées en dLe mode Evelopment peut ne pas être détecté automatiquement, vous devrez donc peut-être rafraîchir manuellement l’extension de la page chrome: // extensions ‘(en cliquant sur l’icône de rafraîchissement sur la carte de l’extension) pour voir les modifications.

   Structure du projet

Cette section décrit la structure du répertoire principal du projet et le but de chaque dossier / fichier. Cette structure permet aux développeurs de naviguer plus facilement et de contribuer au projet.

’ sisypi / ├til’ui ├fiques ├fiquesl ├fiques ├fiques-outadata.json métadonnées du projet (probablement pour un usage interne) ├──occupackage.json Node.js Dépendances et scripts du projet ├fiques ├fiques ├fiques-content / │ ├fiquesipt.js script de contenu principal injecté dans la page Web │ ├fiques-SELECTION.CSS Styles CSS pour le mode de sélection des éléments │ └fiques ├fiques │ ├fiques │ ├fiques │ └fiques ├fiques bibliothèques externes │ ├fiques │ └fiques │ ├fiques │ │ └fique │ └fiques ├fiques │ ├fiques │ ├fique │ └fiques └fiques-Scripts / ├fiques └fiques ’

Contribution

Les contributions sontaccueillir! Pour les rapports de bogues, les demandes de fonctionnalités ou les contributions de code, veuillez visiter le référentiel GitHub et n’hésitez pas à ouvrir un “problème” ou à soumettre une “demande de traction”.

Crédits
Créé par [Adem İşler] (https://ademisler.com/). Si vous trouvez ce projet utile, Considérez [m’acheter un café] (https://buymeacoffee.com/ademisler).

Licence

Ce projet est autorisé sous la licence du MIT. Voir le fichier «Licence» pour plus de détails.