Browsererweiterungen sind Add-ons zu den Browsern, die verwendet werden, um der Website mehr Ästhetik zu verleihen und außerdem ein optimales Benutzererlebnis zu bieten.
Das Konzept des Inhaltsskripts in der Erweiterungsentwicklung ist ein sehr nützliches Wissen, das sich Entwickler gleichermaßen aneignen können, da es die Anwendungsfälle von Browsererweiterungen erheblich erweitert.

Dieser Artikel soll vorstellen, was Inhaltsskripte sind und wie sie funktionieren. Es würde auch ein Demoprojekt geben, in dem die Grundlagen von Chrome-Erweiterungen besprochen werden und ein einfaches Inhaltsskript in unserer Erweiterung verwendet wird. Damit fangen wir an.

Inhaltsskripte verstehen

Was ist zunächst einmal ein Inhaltsskript? Inhaltsskripte sind JavaScript-Codes, die bei der Interaktion mit Webseiten über eine Browsererweiterung ausgeführt werden, um die Webseite zu ändern.

Dies lässt sich leicht durch die Interaktion mit dem Dokumentobjektmodell der Webseite erreichen. Das Webseitendokumentobjektmodell ist die Rohstruktur der gegebenen Webseite. Die Art und Weise, wie die Chrome-Inhaltsskripte die betreffende Webseite ändern, wird üblicherweise als Injection bezeichnet.

Nachdem wir eine kurze Einführung in Inhaltsskripte erhalten hatten, implementierten wir diese anschließend auf unseren Webseiten. Zuvor müssen wir jedoch unsere Browsererweiterung einrichten, die das Skript unterstützt.

Einrichten Ihrer Chrome-Erweiterung

Das Einrichten einer Chrome-Erweiterungsdatei ist ziemlich einfach. Als weitere Referenz zum Erstellen von Erweiterungen finden Sie unten den Link zur Dokumentationsseite der Chrome-Erweiterung.
Eine ideale Chrome-Erweiterung muss eine ausführliche manifest.json-Datei enthalten, die die Standardhintergrundinformationen zur Chrome-Erweiterung bereitstellt.
Außerdem ist die entsprechende auszuführende JS-Datei enthalten. Andere zusätzliche Dateien (HTML und CSS) tragen zur Ästhetik der Erweiterung bei.
Anschließend bauen wir unsere Erweiterung auf und integrieren dabei unsere Content-Script-Injection. Wir veranschaulichen die Leistungsfähigkeit von Inhaltsskripten, indem wir eine Chrome-Erweiterung erstellen, die eine überlagerte Schaltfläche auf jeder aktiven Webseite anzeigt, zu der wir navigieren.

Schreiben einer Manifestdatei

In diesem Abschnitt werden die Teile der Manifestdatei hervorgehoben und besprochen. Hier ist der Code zur Manifestdatei für das Projekt.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Manifestversion: Normalerweise wird die Manifestversion angefordert. Standardmäßig ist es auf 3 eingestellt, da es sich um ein deutlich besseres Upgrade als Version 2 handelt.
Name: Der Name der Erweiterung wird auch in die Manifestdatei eingegeben. In meinem Fall heißt das Projekt die Schaltfläche „Hinzufügen“. Dies kann an die Vorlieben des Benutzers angepasst werden.
Die Version der Chrome-Erweiterung wird ebenfalls eingegeben. In unserem Fall ist dies die erste Version der Erweiterung, daher heißt sie 1.0. Nachfolgende Verbesserungen an dieser Erweiterung können dazu führen, dass die Datei geändert wird, um die Versionen entsprechend zu erhöhen.
Beschreibung: Eine Beschreibung dessen, was die Erweiterung tut, verleiht der Chrome-Erweiterung auch den technisch nicht versierten Benutzern der Erweiterung Glaubwürdigkeit.

Die im Folgenden angesprochenen Punkte sind für die Erstellung der Inhaltsskripte sehr aussagekräftig.

Das Berechtigungsobjekt markiert die Route für die Ausführung der Inhaltsskripte. Dadurch wird auch verhindert, dass die Inhaltsskripte auf unerwarteten Registerkarten und Webseiten ausgeführt werden. Damit können wir alle Berechtigungen auflisten, die unsere Chrome-Erweiterung möglicherweise benötigt. Einige Chrome-Erweiterungen benötigen möglicherweise Zugriff auf den Browserspeicher, andere Chrome-APIs und einige betreffende Websites. In unserem Fall für dieses Projekt beschränken wir unsere Chrome-Erweiterung auf die aktive Browser-Registerkarte, die verwendet wird. Dies ist wichtig, um das Risiko zu verringern, dass die Chrome-Erweiterung andere nicht genutzte Teile unseres Chrome-Browsers beeinträchtigt.

Wir konfigurieren dann das Feld „Inhaltsskripte“ in unserer Manifestdatei.
Das Feld „Inhaltsskripte“ gibt die verschiedenen Codedateien an, die wir in unsere Webseite einfügen möchten.
Es enthält das Unterfeld „Matches“, das die Webseiten-URL angibt, auf die es reagieren soll. Aus Gründen der Benutzerfreundlichkeit haben wir lediglich alle URLs eingefügt, damit dies auf allen von uns aufgerufenen Webseiten funktioniert. Sie können jedoch die URL angeben, die Sie in den Unterfeldwert einfügen möchten. Beispiel: www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

Die JS-Dateien, die den Injektionscode enthalten, werden ebenfalls angegeben. In unserem Fall,
Unsere JS-Datei heißt Content script.js. Wir haben auch die CSS-Datei angegeben, die für die Gestaltung dieses Projekts verwendet wird.

Damit haben wir eine Miniaturimplementierung der Manifestdatei für unser Projekt. Anschließend schreiben wir unseren Injektionscode im folgenden Abschnitt

Erstellen von Inhaltsskripten

Um die Dinge einfach zu halten, erstellen wir eine einfache Schaltfläche, die beim Klicken eine Warnmeldung anzeigt. Es wird erwartet, dass diese Schaltfläche die vorhandene Webseite überlagert.
Hier ist der Code unten

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

Der Stil kann nach Ihren Wünschen geändert werden, es wurde jedoch eine Stilvorlage in das Code-Repository aufgenommen.

Hier ist ein Bild seiner Implementierung.

Hier ist der Link zum Quellcode, der das Code-Styling enthält.

Fortgeschrittene Techniken und Anwendungsfälle

Bisher haben wir das Projekt abgeschlossen. Um jedoch Ihr Wissen zu erweitern, finden Sie hier einige der fortgeschrittenen Techniken und Best Practices, die Sie auch beim Erstellen von Inhaltsskripten implementieren können.

• Kreuzinteraktion mit Browser-Hintergrundskripten
• Implementierung von Datenstatusmanagern, um dynamisches Scripting zu ermöglichen
• Die Integration anderer externer APIs ermöglicht die Datenmanipulation und -analyse
• Einsatz von Caching-Strategien zur Optimierung der Erweiterungsleistung
• Integration von Inhaltsskripten mit Servicemitarbeitern

Abschluss

Sie können auch auf meinem Blog mit mir interagieren und meine anderen Artikel hier lesen. Bis zum nächsten Mal, programmieren Sie weiter!