Comment créer une extension chromée en 10 minutes à plat

Ce didacticiel simplifie le processus de construction d'une extension chromée, en se concentrant sur la création d'un "Molly-Guard" pour Chatgpt pour éviter le partage accidentel d'informations sensibles. Décomposons les étapes clés et affinons le texte pour la clarté et le référencement.

Créez votre propre filet de sécurité ChatGpt: un simple tutoriel d'extension chrome

Fatigué de partager accidentellement des données sensibles avec Chatgpt? Ce tutoriel vous montre comment construire une simple extension chromée - un "Molly-Guard" - pour protéger votre vie privée. Nous vous guiderons à travers cinq étapes faciles, en utilisant des technologies Web de base.

Prise des clés:

• Protection du chatppt: Apprenez à créer une extension chromée qui empêche la soumission de messages contenant des mots ou des phrases sensibles spécifiés.
• Étapes faciles à suivre: Ce tutoriel décompose le processus en étapes gérables, parfait pour les débutants.
• Expérience utilisateur améliorée: L'extension fournit des indices visuels, améliorant la sécurité et la convivialité.

Ce que nous construisons:

Les assistants de l'IA sont incroyablement utiles, mais le sursautage accidentel est une réelle préoccupation. Cette extension "Molly-Guard" agit comme un filet de sécurité. Vous définissez une liste de mots ou de phrases sensibles. Si vous essayez de soumettre un message contenant l'un de ces mots, l'extension désactivera le bouton Soumettre, empêchant la divulgation accidentelle.

avant de commencer:

• un compte Chatgpt (inscription gratuite disponible).
• Compréhension de base de HTML, CSS et JavaScript.
• Le code de ce tutoriel est disponible sur github (lien vers GitHub Repo ici).

Qu'est-ce qu'une extension chromée?

Une extension chromée est un petit programme qui améliore votre expérience de navigation en Chrome. Ils sont construits à l'aide de HTML, CSS et JavaScript et vont des outils simples aux applications complexes. Beaucoup sont disponibles sur la boutique en ligne Chrome. Pour une plongée plus profonde, consultez la documentation officielle de Google (lien vers la documentation de Google ici). Ce tutoriel utilise un Script de contenu , permettant une interaction avec le contenu d'une page Web spécifique (dans ce cas, Chatgpt).

Étape 1: Configuration de vos fichiers d'extension

Créez un nouveau dossier nommé chatgpt-molly-guard et ajoutez ces fichiers:

• manifest.json: Métadonnées sur votre extension (nom, version, autorisation, etc.).
• contentScript.js: Le code JavaScript principal qui surveille l'entrée Chatgpt.
• wordsList.js: Une liste de vos mots sensibles (facilement personnalisable).
• styles.css: (facultatif) Style pour les signaux visuels.

Étape 2: le fichier manifest.json

Ce fichier JSON raconte à Chrome votre extension. Collez ce code dans manifest.json:

<code class="language-json">{
  "manifest_version": 3,
  "name": "ChatGPT Molly-guard",
  "version": "1.0",
  "description": "Prevents submission of messages containing sensitive words.",
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "css": ["styles.css"],
      "js": ["wordsList.js", "contentScript.js"]
    }
  ]
}</code>

Éléments manifestes clés expliqués:

• "manifest_version": Spécifie la version de format de fichier manifeste (utilisez 3).
• "name", "version", "description": informations de base sur votre extension.
• "content_scripts": définit les scripts à exécuter sur quels sites Web ("https://chat.openai.com/*" cible Chatgpt).

Étape 3: le fichier contentScript.js

Ce script surveille le champ de saisie du chatppt. Collez ce code dans contentScript.js:

<code class="language-javascript">// ... (Debounce function and other code as provided in the original input) ...</code>

(incluez le code complet contentScript.js de l'entrée d'origine ici)

Ce code utilise une fonction de débouchement pour vérifier efficacement les mots sensibles et met à jour l'interface utilisateur en conséquence (désactiver le bouton Soumettre et ajoutant une bordure rouge). La délégation d'événements est utilisée pour gérer les mises à jour dynamiques de l'interface utilisateur dans Chatgpt.

Étape 4: Style avec styles.css

Ajouter ce code à styles.css pour les repères visuels:

<code class="language-css">.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}</code>

Cela stylise la zone d'entrée lorsque des mots sensibles sont détectés. !important s'assure que les styles remplacent les styles de chatpt existants.

Étape 5: Tester votre extension

1. Open chrome://extensions/.
2. Activer le "mode développeur". "
3. Cliquez sur "Chargement déballé".
4. Sélectionnez le dossier chatgpt-molly-guard.

Testez votre extension dans Chatgpt. Si tout fonctionne, vous verrez la bordure rouge et le bouton de soumission désactivé lorsque vous tapez des mots sensibles. Recharger l'extension à l'aide de l'icône de flèche circulaire si vous apportez des modifications.

Recharger l'extension après avoir apporté des modifications:

Aller plus loin:

• Interface utilisateur: Ajouter une fenêtre contextuelle pour gérer la liste des mots sensibles.
• Manipulation de la pâte: détecter le texte collé pour les mots sensibles.
• Remplacement contextuel: Autoriser la désactivation temporaire du Molly-Guard.

Conclusion:

La construction d'une extension chromée est plus facile que vous ne le pensez! Ce simple "Molly-Guard" montre comment quelques lignes de code peuvent améliorer considérablement votre sécurité en ligne. N'oubliez pas de consulter la documentation de Google pour des fonctionnalités plus avancées.

(Incluez la section FAQ de l'entrée d'origine ici)

Cette réponse révisée fournit un tutoriel plus structuré et convivial, améliorant la lisibilité et le référencement en utilisant des mots clés et des titres pertinents. N'oubliez pas de remplacer les liens d'espace réservé par des liens réels vers la documentation de GitHub et Google.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!