Erstellen Sie Ihre erste Chrome-Erweiterung in JavaScript, um Ihre API-Schlüssel zu verbergen

In diesem Tutorial lernen Sie, wie Sie eine Chrome-Erweiterung erstellen. Das Beispiel, das wir heute durchgehen werden, dient dazu, Ihre Vonage-API-Schlüssel auf dem Dashboard zu verbergen. Das Wissen, das Sie durch die Schritte dieses Tutorials erlangen, wird Ihnen eine Grundlage geben, wie Sie Ihre eigenen Chrome-Erweiterungen für verschiedene Zwecke erstellen können.

Was ist eine Chrome-Erweiterung?

Eine Chrome-Erweiterung ist ein Softwareprogramm, mit dem Sie die Chrome-Funktionen erweitern und Ihr Browser-Erlebnis verändern können. Eine Erweiterung kann mit HTML, CSS, JavaScript und einer manifest.json Datei bestehen. Letztere versorgt Chrome mit den Informationen, die zum Ausführen der Skripte erforderlich sind, damit die Erweiterung funktioniert.

Erstellen Sie den Chrome-Erweiterungsordner

Erstellen Sie einen neuen Ordner auf Ihrem Computer, der die manifest.json Datei und die Bootstrap-Datei enthält. In unserem Beispiel nennen wir ihn index.js. In meinem Beispiel werde ich diesen Ordner folgendermaßen benennen chrome-extension.

Erstellen Sie diemanifest.json Datei

A manifest.json Datei ist erforderlich, wenn Sie eine Chrome-Erweiterung erstellen, da sie Ihrem Programm mitteilt, welche Funktion ausgeführt werden soll.

Erstellen Sie eine manifest.json Datei. In Ihrem Terminal unter Unix können Sie Folgendes eingeben touch manifest.json.

Geben Sie die erforderlichen Informationen ein, wie Sie im folgenden Codeausschnitt sehen können.

Schauen wir uns jede Zeile Schritt für Schritt gemeinsam an.

• name ist der Name der Erweiterung, die in der Liste der Chrome-Erweiterungen angezeigt wird.

• description ist die Beschreibung dessen, was Ihre Chrom-API tut.

• version ist die aktuelle Version Ihrer Erweiterung; wenn Sie Änderungen vornehmen, können Sie sie ändern.

• author sollte den Namen des Erstellers der Chrome-Erweiterung enthalten.

• manifest_version bezieht sich auf die Version des Manifests; zum Zeitpunkt der Erstellung dieses Blogbeitrags ist die neueste Version 3.

• content_scripts sind Dateien, die Änderungen am DOM vornehmen und Informationen an die Erweiterung weitergeben können. Mehr dazu erfahren Sie auf der offiziellen Webseite für Inhaltsskripte. In diesem Beispiel möchten wir, dass unser Skript mit der Webseite <${CUSTOMER_DASHBOARD_URL}/> und allen ihren Unterseiten übereinstimmt. Wir geben an, dass die zu befolgende Logik in die folgende Datei geschrieben wird index.js.

{
    "name": "API Key Hider",
    "description": "A chrome extension to blur your Vonage API keys",
    "version": "1.0",
    "author": "Amanda Cavallaro",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": [
        "${CUSTOMER_DASHBOARD_URL}/*"
      ],
      "js": ["index.js"]
    }]
}

Erstellen Sie die Bootstrap-Datei

Erstellen Sie in Ihrem Terminal die Datei index.js Datei. Auf einem Unix-Rechner können Sie dies tun, indem Sie Folgendes eingeben touch index.js.

Um eine Chrome-Erweiterung zu erhalten, können Sie eine einfache Funktion erstellen, die nach dem Import in den Browser übernommen wird.

Im folgenden Beispiel können Sie einen einfachen Alarm erstellen, der einmal ausgeführt wird.

function createAnAlert() {

 alert();

}

createAnAlert();

In diesem Tutorial werden wir den unten stehenden Code verwenden, um einige API-Schlüssel zu verwischen.

Lassen Sie uns eine Funktion namens blurApiKeys erstellen. Wir verwenden document.querySelector und document.querySelectorAll um die HTML-Elemente zu finden, die den API-Schlüssel und den geheimen API-Schlüssel enthalten. Schließlich fügen wir diesen Elementen mithilfe von CSS-Styling einen Weichzeichner von 20 Pixeln hinzu und setInterval ruft die Funktion blurApiKeys alle 10 Millisekunden auf.

function blurApiKeys() {
  let apiKey = document.querySelector('#apiKeyField > div');

  if (apiKey) {
    apiKey.style.filter = 'blur(20px)';
  }

  let apiKeyLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API Key')
  );

  let apiSecretLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API secret 1')
  );

  for (let label of apiKeyLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }

  for (let label of apiSecretLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }
}

setInterval(blurApiKeys, 10);

Importieren des erstellten Ordners in Ihre Chrome-Erweiterungen

Nun ist es an der Zeit, die beiden erstellten Dateien zu importieren und sie als Chrome-Erweiterung zu Ihrem Browser hinzuzufügen.

1. Öffnen Sie den Chrome-Browser.

2. Navigieren Sie zu chrome://extensions/.

3. Klicken Sie oben rechts auf den Entwicklermodus, um ihn zu aktivieren (falls er nicht bereits aktiviert ist).

4. Klicken Sie oben links auf Ungepackt laden, und es öffnet sich ein Tool zum Hochladen von Dateien.

5. Suchen Sie den Ort, an dem Sie den Ordner erstellt haben chrome-extension auf Ihrem Computer, klicken Sie ihn an und klicken Sie schließlich auf die Schaltfläche Auswählen.

6. Sie können sehen, dass eine neue Chrome-Erweiterung mit dem Namen "API Key Hider" erstellt wurde, da sie in der Eigenschaft name der Datei manifest.json.

7. Vergewissern Sie sich, dass diese Chrome-Erweiterung aktiviert (umgeschaltet) ist. Wenn Sie sie ausschalten möchten, können Sie sie deaktivieren oder aus der Liste Ihrer Chrome-Erweiterungen entfernen.

Sie können die oben genannten Schritte in einem Gif unten sehen:

A gif showing how to import the Chrome Extension onto chrome

Testen Sie es aus

Ihre Chrome-Erweiterung ist nun geladen und Sie können sehen, wie die von Ihnen erstellte Funktion im Browser funktioniert.

Um die von uns erstellte Funktion zu testen, navigieren Sie zum Vonage-DashboardNavigieren Sie durch die Seiten im Dashboard, und Sie werden feststellen, dass sowohl Ihre Vonage API als auch Ihre geheimen Schlüssel ausgeblendet sind. Wenn Sie sie kopieren müssen, funktioniert die Schaltfläche "Kopieren" daneben immer noch, auch wenn die Schlüssel unscharf sind, wie auf dem Bild unten zu sehen ist.

Settings page on the Vonage Dashboard with the blurred keys

Herzlichen Glückwunsch

Gut gemacht! Sie haben eine Chrome-Erweiterung erstellt, um Ihre Vonage-API-Schlüssel zu verbergen. Jetzt, da Sie wissen, wie man eine Chrome-Erweiterung erstellt, importiert und aktiviert, können Sie Ihrer Kreativität freien Lauf lassen und viele weitere Erweiterungen erstellen!

Wenn Sie es auf die nächste Stufe bringen möchten, können Sie lernen wie man es im Chrome Webstore veröffentlicht veröffentlichen können, finden Sie in der offiziellen Dokumentation.

Ich hoffe, es hat Ihnen gefallen. Sie können mich gerne kontaktieren auf Twitter oder treten Sie unserem Slack-Kanal der Gemeinschaft.