So erstellen Sie eine Chromverlängerung in 10 Minuten flach

Dieses Tutorial vereinfacht den Prozess der Erstellung einer Chromverlängerung und konzentriert sich auf die Erstellung eines "Molly-Guard" für ChatGPT, um ein versehentliches Austausch sensibler Informationen zu verhindern. Lassen Sie uns die wichtigsten Schritte aufschlüsseln und den Text für Klarheit und Seo verfeinern.

Erstellen Sie Ihr eigenes Chatgpt -Sicherheitsnetz: Ein einfaches Tutorial der Chrome -Erweiterung

Sind Sie es leid, versehentlich sensible Daten mit ChatGPT zu teilen? Dieses Tutorial zeigt Ihnen, wie Sie eine einfache Chromverlängerung-einen "Molly-Guard"-aufbauen, um Ihre Privatsphäre zu schützen. Wir werden Sie durch fünf einfache Schritte mit grundlegenden Webtechnologien führen.

Key Takeaways:

• CHATGPT -Schutz: Lernen Sie, eine Chromerweiterung zu erstellen, die die Einreichung von Nachrichten mit angegebenen sensiblen Wörtern oder Phrasen verhindert.
• leicht zu befolgende Schritte: Dieses Tutorial unterteilt den Prozess in überschaubare Schritte, perfekt für Anfänger.
• Verbesserte Benutzererfahrung: Die Erweiterung bietet visuelle Hinweise, Verbesserung der Sicherheit und Benutzerfreundlichkeit.

Was wir bauen:

AI -Assistenten sind unglaublich hilfreich, aber versehentliches Überschieben ist ein echtes Problem. Diese Erweiterung "Molly-Guard" wirkt als Sicherheitsnetz. Sie definieren eine Liste sensibler Wörter oder Phrasen. Wenn Sie versuchen, eine Nachricht mit einem dieser Wörter einzureichen, deaktiviert die Erweiterung die Schaltfläche Senden, wodurch eine zufällige Offenlegung verhindert wird.

Bevor Sie beginnen:

• Ein Chatgpt -Konto (kostenlose Anmeldung verfügbar).
• grundlegendes Verständnis von HTML, CSS und JavaScript.
• Der Code für dieses Tutorial ist in GitHub verfügbar (Link zu Github Repo hier).

Was ist eine Chromverlängerung?

Eine Chromverlängerung ist ein kleines Programm, das Ihr Chrom -Browsing -Erlebnis verbessert. Sie werden mit HTML, CSS und JavaScript erstellt und reichen von einfachen Tools bis hin zu komplexen Anwendungen. Viele sind im Chrome Web Store erhältlich. Für einen tieferen Tauchgang wenden Sie sich an die offizielle Dokumentation von Google (Link zu Googles Dokumentation hier). In diesem Tutorial wird ein Content -Skript verwendet, sodass die Interaktion mit dem Inhalt einer bestimmten Webseite (in diesem Fall Chatgpt)

Schritt 1: Einrichten Ihrer Erweiterungsdateien

Erstellen Sie einen neuen Ordner mit dem Namen chatgpt-molly-guard und fügen Sie folgende Dateien hinzu:

• manifest.json: Metadaten über Ihre Erweiterung (Name, Version, Berechtigungen usw.).
• contentScript.js: Der Haupt -JavaScript -Code, der die Chatgpt -Eingabe überwacht.
• wordsList.js: Eine Liste Ihrer sensiblen Wörter (leicht anpassbar).
• styles.css: (optional) Styling für visuelle Hinweise.

Schritt 2: Die manifest.json Datei

Diese JSON -Datei sagt Chrome über Ihre Erweiterung. Fügen Sie diesen Code in manifest.json:

ein

{
  "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"]
    }
  ]
}

Key Manifest Elemente erklärt:

• "manifest_version": Gibt die Manifest -Dateiformatversion an (verwenden Sie 3).
• "name", "version", "description": Grundlegende Informationen zu Ihrer Erweiterung.
• "content_scripts": Definiert, welche Skripte auf welchen Websites ausgeführt werden sollen ("https://chat.openai.com/*" zielt Chatgpt).

Schritt 3: Die contentScript.js Datei

Dieses Skript überwacht das Feld ChatGPT -Eingänge. Fügen Sie diesen Code in contentScript.js:

ein

// ... (Debounce function and other code as provided in the original input) ...

(Fügen Sie hier den vollständigen contentScript.js Code aus der ursprünglichen Eingabe ein)

Dieser Code verwendet eine Entlassung, um effizient nach sensiblen Wörtern zu überprüfen und die Benutzeroberfläche entsprechend zu aktualisieren (Deaktivieren der Schaltfläche Senden und Hinzufügen eines roten Randes). Die Ereignisdelegation wird verwendet, um dynamische UI -Updates in Chatgpt zu verarbeiten.

Schritt 4: Styling mit styles.css

Fügen Sie diesen Code für visuelle Hinweise zu styles.css hinzu:

.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}

Dies enthält den Eingabebereich, wenn empfindliche Wörter erkannt werden. !important stellt sicher, dass die Stile vorhandene Chatgpt -Stile außer Kraft setzen.

Schritt 5: Testen Sie Ihre Erweiterung

1. öffnen chrome://extensions/.
2. aktivieren "Entwicklermodus".
3. Klicken Sie auf "Auspacken laden".
4. Wählen Sie den Ordner chatgpt-molly-guard aus.

Testen Sie Ihre Erweiterung in Chatgpt. Wenn alles funktioniert, werden Sie die Schaltfläche Red Border und Deaktiviert sehen, wenn Sie sensible Wörter eingeben. Laden Sie die Erweiterung mit dem kreisförmigen Pfeilsymbol neu, wenn Sie Änderungen vornehmen.

laden Sie die Erweiterung neu, nachdem Sie Änderungen vorgenommen haben:

weitergehen:

• Benutzeroberfläche: Fügen Sie ein Popup hinzu, um die sensible Wortliste zu verwalten.
• Handhabung einfügen: Erfassungs eingefügter Text für sensible Wörter.
• Kontextumschreibung: Ermöglichen Sie die vorübergehende Deaktivierung des Molly-Guards.

Schlussfolgerung:

Eine Chromverlängerung bauen ist einfacher als Sie denken! Dieser einfache "Molly-Guard" zeigt, wie einige Codezeilen Ihre Online-Sicherheit erheblich verbessern können. Denken Sie daran, die Dokumentation von Google für fortgeschrittenere Funktionen zu konsultieren.

(FAQS -Abschnitt aus der ursprünglichen Eingabe hier enthalten)

Diese überarbeitete Antwort bietet ein strukturierteres und benutzerfreundlicheres Tutorial, das die Lesbarkeit und die SEO verbessert, indem relevante Schlüsselwörter und Überschriften verwendet werden. Denken Sie daran, die Platzhalter -Links durch tatsächliche Links zu GitHub und Googles Dokumentation zu ersetzen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Chromverlängerung in 10 Minuten flach. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!