Ein Leitfaden für Anfänger zum Erstellen von Inhaltsskripten

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 Injektion 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": ["<all_urls>"],
        "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 handelt es sich um 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 nachfolgend 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. ZB 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 im folgenden Abschnitt

unseren Injektionscode

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");
});

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.

• Cross-interaction with browser background scripts
• Implementation of data state managers to allow for dynamic scripting
• Integrating other external APIs allows for data manipulation and analysis
• Employing caching strategies in order to optimize extension performance
• Integrating Content scripts with service workers

Conclusion

You can also interact with me on my blog and check out my other articles here. Till next time, keep on coding!

Das obige ist der detaillierte Inhalt vonEin Leitfaden für Anfänger zum Erstellen von Inhaltsskripten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!