So erstellen Sie eine einfache Chrome-Erweiterung

Das Erstellen einer Chrome- Erweiterung ist ein ziemlich einfacher Prozess. Wenn Sie fertig sind, können Sie es auf Ihrem Computer verwenden, um die Funktionsweise des Browsers zu verbessern.

Es gibt einige grundlegende Komponenten, die der Browser benötigt, bevor die Erweiterung voll funktionsfähig ist. Wir gehen im Folgenden auf all dies ein, einschließlich der Frage, wie Sie Ihre benutzerdefinierte Erweiterung in Chrome zum Laufen bringen , ohne sie hochladen oder mit anderen teilen zu müssen.

Das Erstellen einer komplexen Chrome - Erweiterung ist ein Prozess, der viel detaillierter ist als das, was Sie unten sehen werden, aber der allgemeine Prozess ist derselbe. Lesen Sie weiter, um zu erfahren, wie Sie eine Chrome- Erweiterung erstellen, die Sie noch heute verwenden können.

Tipp(Tip) : Um zu sehen, wie großartig Ihre eigene Erweiterung sein könnte, sehen Sie sich diese fantastischen Chrome-Erweiterungen(these amazing Chrome extensions) an .

So erstellen Sie eine Chrome-Erweiterung

Mithilfe dieser Anleitung erstellen Sie eine einfache Chrome- Erweiterung, die einige Ihrer bevorzugten Websites auflistet. Es ist vollständig anpassbar und wirklich einfach zu aktualisieren.

Folgendes ist zu tun:

  • Erstellen Sie einen Ordner, der alle Dateien enthält, aus denen die Erweiterung besteht.
  • Erstellen Sie die Basisdateien, die diese Erweiterung benötigt: manifest.json , popup.html , background.html , styles.css .
  • Öffnen Sie popup.html(popup.html) in einem Texteditor und fügen Sie dann alles Folgende dort ein und speichern Sie es, wenn Sie fertig sind.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Fühlen Sie(Feel) sich frei, die Links und den Linktext zu bearbeiten, oder wenn Sie die Chrome - Erweiterung genau so machen möchten, wie wir sie haben, lassen Sie einfach alles beim Alten.

  • Öffnen Sie manifest.json(manifest.json) im Texteditor und kopieren/fügen Sie Folgendes ein:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

„manifest_version“: 2,
„name“: „Favorite Sites“,
„description“: „Alle meine bevorzugten Websites.“, ( “description”: “All my favorite websites.”,)
„version“: „1.0“,
„icons“: {
„16“: „icon.png“,
„32“: „icon.png“,
„48“: „icon.png“,
„128“: „icon.png“
},

   „Hintergrund“: {  (   “background”: { )
        „Seite“: „Hintergrund.html“ (        “page”:”background.html”)
},

    „browser_action“ : {
        „default_icon“ : „icon.png“,
        „default_title“ : „Favoritenseiten“, (        “default_title” : “Favorite Sites”,)
        „default_popup“ : „popup.html“
    }
}

Die essbaren Bereiche dieses Codes umfassen name , description und default_title .

  • Öffnen Sie styles.css(styles.css) und fügen Sie den folgenden Code ein. Dies schmückt das Popup-Menü, um es viel ansprechender anzusehen und noch einfacher zu verwenden.

#myUL {
Listenstiltyp: keiner; (list-style-type: none;)
   Polsterung: 0; (   padding: 0;)
   Rand: 0; (   margin: 0;)
   Breite: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  Rand oben: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  Polsterung: 12px; (  padding: 12px;)
  Textdekoration: keine; (  text-decoration: none;)
  Schriftgröße: 18px; (  font-size: 18px;)
  Farbe: Schwarz; (  color: black;)
  Bildschirmsperre; (  display: block;)
  Schriftfamilie: 'Noto Sans', serifenlos; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

Es gibt eine Menge, die Sie in der CSS -Datei ändern können. Spielen Sie mit diesen Optionen herum, nachdem Sie Ihre Chrome - Erweiterung erstellt haben, um sie nach Ihren Wünschen anzupassen.

  • Erstellen Sie(Create) ein Symbol für die Erweiterung und nennen Sie es icon.png . Legen Sie es in Ihrem Chrome- Erweiterungsordner ab. Wie Sie im obigen Code sehen können, können Sie ein separates Symbol für diese Größen erstellen: 16 × 16 Pixel, 32 × 32 und so weiter.

Tipp: (Tip: )Google bietet weitere Informationen(Google has more information) zum Erstellen von Chrome- Erweiterungen. Es gibt weitere Beispiele und erweiterte Optionen, die über die hier gezeigten einfachen Schritte hinausgehen.

So fügen Sie Chrome eine benutzerdefinierte Erweiterung hinzu(Custom Extension)

Nachdem Sie die Chrome -Erweiterung erstellt haben, ist es an der Zeit, sie dem Browser hinzuzufügen, damit Sie tatsächlich alle gerade erstellten Dateien verwenden können. Die Installation einer benutzerdefinierten Erweiterung erfordert ein anderes Verfahren als die Installation einer normalen Chrome-Erweiterung(how you’d install a normal Chrome extension) .

  • Gehen Sie im Chrome-Menü zu Weitere Tools(More tools ) > Erweiterungen(Extensions) . Oder geben Sie chrome://extensions/ in die Adressleiste ein.
  • Wählen Sie die Schaltfläche neben dem Entwicklermodus(Developer mode) aus, falls er noch nicht ausgewählt ist. Dadurch wird ein spezieller Modus aktiviert, mit dem Sie Ihre eigenen Chrome- Erweiterungen importieren können.

  • Verwenden Sie die Schaltfläche „ Ungepackt laden(Load unpacked ) “ oben auf dieser Seite, um den Ordner auszuwählen, den Sie in Schritt 1(Step 1) oben erstellt haben.

  • Akzeptieren(Accept) Sie alle Eingabeaufforderungen, wenn Sie sie sehen. Andernfalls wird Ihre benutzerdefinierte Chrome - Erweiterung zusammen mit allen anderen in der oberen rechten Ecke des Browsers angezeigt.

Bearbeiten Ihrer Chrome-Erweiterung

Jetzt, da Ihre Chrome- Erweiterung verwendet werden kann, können Sie Änderungen vornehmen, um sie zu Ihrer eigenen zu machen. 

Die Datei styles.css steuert, wie die Erweiterung angezeigt wird, sodass Sie den allgemeinen Listenstil anpassen und die Schriftfarbe oder den Schrifttyp ändern können. W3Schools ist eine der besten Ressourcen, um mehr über all die verschiedenen Dinge zu erfahren, die Sie mit CSS machen können .

Bearbeiten Sie die Datei popup.html, um die Reihenfolge zu ändern, in der die Websites aufgelistet sind, oder um weitere Websites hinzuzufügen oder vorhandene zu entfernen. Achten Sie nur darauf, Ihre Änderungen nur an der URL und dem Namen beizubehalten. Alle anderen Zeichen wie <li> und <html> sind erforderlich und sollten nicht geändert werden. Das HTML-Tutorial auf W3Schools(HTML Tutorial on W3Schools) ist ein guter Ort, um mehr über diese Sprache zu lernen.



Thorsten Roth

About the author

Ich bin Informatiker mit den Schwerpunkten Datenschutz und Benutzerkonten und Familiensicherheit. Ich habe in den letzten Jahren an der Verbesserung der Smartphone-Sicherheit gearbeitet und habe Erfahrung in der Zusammenarbeit mit Gaming-Unternehmen. Ich habe auch mehrfach über die Probleme im Zusammenhang mit Benutzerkonten und Spielen geschrieben.


Related posts