„In unserem jetzigen Leben sind wir eher bestrebt, Social-Media-Apps und die Google-Suchmaschine für unsere Unterhaltungs- und Suchzwecke zu nutzen, d. h. über die Suchmaschine „Google“ ein Bildungsthema zu recherchieren und uns auch allgemeines Wissen anzueignen. Um mit der Google-Suchmaschine nach etwas zu suchen, müssen wir bereits einen Browser auf unseren Mobiltelefonen, Laptops oder PCs installiert haben. Einer der am häufigsten verwendeten und effizientesten Browser des heutigen Jahrhunderts ist der „Google Chrome“-Browser, der viele gute Funktionen zusammen mit der Nützlichkeit der Erweiterung bietet. Die „Erweiterung“ ist das Plugin, das in jedem Browser zu finden ist, um Websites und verschiedene Funktionen einzuschränken oder zuzulassen. Diese Erweiterungen sind normalerweise nicht integriert; Sie müssen Ihrem Browser bei Bedarf jede Erweiterung separat hinzufügen. Wenn Sie ein kleiner Technologieexperte sind, kennen Sie vielleicht die Verwendung von Manifest-JSON-Dateien, um eine Erweiterung in wenigen Schritten zu erstellen und hinzuzufügen. Daher behandelt dieser Artikel alle diese Schritte zum Erstellen einer neuen Erweiterung im Google Chrome-Browser.
Bevor Sie sich die Methode zum Erstellen einer Erweiterung ansehen, müssen Sie sicherstellen, dass Ihr Google Chrome-Browser bereits gestartet ist und die Suchmaschine „Google“ keinen Hintergrund enthält. Sie können sehen, dass das unten angehängte Bild keinen Hintergrund für die Suchmaschine „Google.com“ hat, d. h. nur weißen Hintergrund.“
Erweiterungsordner hinzufügen
Öffnen Sie Ihr Visual Studio Code-Tool schnell aus den Apps Ihres Windows-Systems. Es kann bis zu 1 Minute dauern, bis der Visual Studio-Code ordnungsgemäß geöffnet und für unsere Verwendung aktiviert ist. Nachdem es ordnungsgemäß gestartet wurde und einsatzbereit ist, haben wir den bereits generierten Ordner „Erweiterung“ darin über die Menüliste „Datei“ in der oberen Taskleiste hinzugefügt, wie unten gezeigt. Nachdem wir den Ordner „Extension“ erstellt haben, haben wir einen weiteren Ordner namens „image“ hinzugefügt, der die Bilder enthält, die als Symbol für die Erweiterung im Browser verwendet werden sollen. Außerdem haben wir eine „manifest.json“-Datei und eine Javascript-Datei namens „script.js“ hinzugefügt, um eine neue Erweiterung zu erstellen und sie dem Browser hinzuzufügen. Beginnen wir mit der Datei manifest.json, indem wir darauf doppelklicken, um mit der Arbeit in JSON zu beginnen, um eine Erweiterung zu erstellen und zu verwenden, um den Hintergrund von „Google“ zu ändern.
Manifestdatei erstellen
Innerhalb der Datei manifest.json sollten Sie den unten gezeigten „JSON“-Code hinzufügen. Dieser Code ist das eigentliche Konfigurationsskript zum Erstellen und Hinzufügen einer Erweiterung zu unserem Google Chrome-Browser. Dieser JSON-Code wurde mit der Initialisierung für die Variable Manifest-Version als „2“ und dem Namen einer zu erstellenden Erweiterung, also „Change Background“, gestartet. Danach haben wir die Kurzbeschreibung für unsere Erweiterung in die Variable „Beschreibung“ eingefügt.
Gleichzeitig haben wir die Version einer Erweiterung als „1.0“ hinzugefügt. Nachdem alle grundlegenden Konfigurationen für die „Erweiterung“ erstellt wurden, müssen wir den Pfad zum Bildsymbol hinzufügen, das als Symbol für die Erweiterungen verwendet werden soll. Die Variable „Browser“ wurde definiert, um das Erweiterungssymbol für die obere Taskleiste des Google Chrome-Browsers festzulegen, d. h. wo alle Erweiterungen angezeigt werden, nachdem sie für die zukünftige Verwendung für bestimmte oder alle Websites aktiviert wurden. Danach haben wir den Pfad zu drei Bilddateien unterschiedlicher Größe hinzugefügt, damit der Browser jedes Mal unterschiedliche Dateien verwenden kann.
Darüber hinaus wurde die Variable „page_action“ verwendet, um anzuzeigen, welches Bild angezeigt werden soll, nachdem auf das Symbol „Erweiterungen“ in der oberen Taskleiste von Google Chrome geklickt wurde. Darin wurde die Variable „Default_icon“ zusammen mit ihren drei verschiedenen Pfadwerten für die Bilder verwendet, die bei jedem Neuladen als Symbole verwendet werden sollen. Dazu werden drei verschiedene Bilddateien verwendet. Die letzte content_scripts-Variable nimmt insgesamt 2 neue Variablen auf, d. h. Übereinstimmungen und CSS. Die Variable „Matches“ enthält den Pfad zu der Website, die geändert werden soll, nachdem die Verwendung dieser neuen Erweiterung erstellt wurde. Außerdem enthält die Variable „CSS“ den Namen einer CSS-Datei, die für das Styling von Google.com nach dem Beantragen der Erweiterung verwendet werden soll, d. h. das Styling von Google.com nach jedem Neuladen beim Aktivieren der Erweiterung. Jetzt, da dieser Code vollständig und einsatzbereit ist, speichern Sie ihn einfach schnell und gehen Sie zur Datei „main.css“.
In der CSS-Datei main.css haben wir ein Styling für unsere zu erstellende Manifest-Dateierweiterung hinzugefügt. Das Styling würde mithilfe des HTML-Tags „body“ angewendet, d. h. auf den gesamten „body“-Bereich der Manifestdatei angewendet. Wir haben den neuen Hintergrund für Google.com mithilfe der „URL“ einer Bilddatei aus der Suchmaschine festgelegt. Speichern Sie jetzt Ihren Code, bevor Sie irgendetwas tun.
Nach dem Ausfüllen der erforderlichen Codes, d. h. manifest.json und main.css-Datei, müssen wir das Erweiterungsdienstprogramm im Google Chrome-Browser über die URL chrome://extensions“ im neuen Tab öffnen. Der Hilfsbereich Erweiterungen wird geöffnet. Aus dem Entwicklermodus heraus müssen Sie den entpackten Ordner „Extension“ von Ihrem lokalen System laden, um daraus eine Erweiterung zu machen, über die Schaltfläche „Unpacked laden“, die im Bild unten angezeigt wird. Die Erweiterung wurde, wie gezeigt, effektiv zum Chrome-Browser hinzugefügt. Entfernen Sie die Fehler, damit es vollständig funktioniert.
Wählen Sie aus dem Symbol „Erweiterung“ die Erweiterung „Hintergrund ändern“, um sie in der Taskleiste anzuzeigen, d. h. die Symbolerweiterung „C“.
Nach dem Neuladen von Google.com wurde der Hintergrund mit dieser Erweiterung aktualisiert.
Fazit
Ausgehend von der Erläuterung der Verwendung der Browser im Windows-System haben wir auch die Bedeutung der Erweiterungen in jedem Browser besprochen. Nach der kurzen Erläuterung der Erweiterungen haben wir die Methode zur Verwendung der Manifest-JSON-Datei zum Erstellen einer Erweiterung für den Google Chrome-Browser und zum Ändern des Hintergrunds für die Suchmaschine „Google.com“ erläutert. Nachdem wir die Erweiterung auf Google Chrome geladen hatten, haben wir sie auf Google.com verwendet, um den Hintergrund zu ändern.