So erstellen Sie eine Chrome-Erweiterung

Wenn Sie ein Chrome-Nutzer sind, werden Sie wahrscheinlich eine oder mehrere Erweiterungen verwenden. Unabhängig davon, ob Anzeigen blockiert oder Funktionen hinzugefügt werden sollen, bieten Erweiterungen dem Browser viele nützliche Funktionen. Wäre es nicht cool, wenn Sie Ihre eigene Chrome-Erweiterung erstellen könnten? Genau das zeige ich Ihnen hier.

Lesen Sie auch unseren Artikel Die besten Touchscreen-Chromebooks

Da ich Websites für Kunden pflege, möchte ich wissen, wie sich jede Website im Hinblick auf das Laden von Seiten verhält. Da Google jetzt Ladezeiten in seinen SEO-Berechnungen verwendet, ist es bei der Optimierung einer Website wichtig zu wissen, wie schnell oder langsam eine Seite geladen wird. Dies gilt umso mehr, wenn eine Website für Handys optimiert wird. Es muss leicht, schnell und fehlerfrei sein, um bei Google eine hohe Punktzahl zu erzielen.

Hinzu kommt, dass eine unternehmerische Person bei SitePoint dieselbe Website verwendet, auf der ich die Seitengeschwindigkeiten überprüfe, GTmetrix, und eine Chrome-Erweiterung entwickelt hat, um dies zu überprüfen. Ich dachte, ich würde dasselbe tun und Sie durch die Website führen.

Chrome-Erweiterungen

Chrome Extensions sind Mini-Programme, die dem Kernbrowser Funktionen hinzufügen. Sie können so einfach sein wie die, die wir erstellen werden, oder so kompliziert wie sichere Passwortmanager oder Skriptemulatoren. In kompatiblen Sprachen wie HTML, CSS und JavaScript geschrieben, handelt es sich um eigenständige Dateien, die sich neben dem Browser befinden.

Bei den meisten Erweiterungen handelt es sich notwendigerweise um einfache Symbol-Klick-Ausführungen, die eine bestimmte Aktion ausführen. Diese Aktion kann buchstäblich alles sein, was Chrome tun soll.

Erstellen Sie Ihre eigene Chrome-Erweiterung

Mit ein wenig Recherche können Sie Ihre Erweiterung optimieren, um zu tun, was Sie wollen, aber ich mag die Idee einer Geschwindigkeitsprüfung mit einem Knopf, also mache ich das.

Wenn Sie die Geschwindigkeit der Website überprüfen, fügen Sie normalerweise die URL der Seite, auf der Sie sich befinden, in GTmetrix, Pingdom oder wo auch immer ein und klicken auf Analysieren. Es dauert nur ein paar Sekunden, aber wäre es nicht schön, wenn Sie einfach ein Symbol in Ihrem Browser auswählen und es für Sie tun lassen könnten? Nachdem Sie dieses Tutorial durchgearbeitet haben, können Sie genau das tun.

Sie müssen einen Ordner auf Ihrem Computer erstellen, um alles zu speichern. Erstellen Sie drei leere Dateien, manifest.json, popup.html und popup.js. Klicken Sie mit der rechten Maustaste in Ihren neuen Ordner und wählen Sie Neu und Textdatei. Öffnen Sie jede Ihrer drei Dateien in einem Texteditor Ihrer Wahl. Stellen Sie sicher, dass popup.html als HTML-Datei und popup.js als JavaScript-Datei gespeichert ist. Laden Sie auch dieses Beispielsymbol von Google für die Zwecke dieses Lernprogramms herunter.

Wählen Sie manifest.json aus und fügen Sie Folgendes ein:

{"manifest_version": 2, "name": "GTmetrix Page Speed ​​Analyzer", "description": "Mit GTmetrix die Ladegeschwindigkeit einer Website-Seite analysieren", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permissions":}

Wie Sie sehen, haben wir ihm einen Titel und eine grundlegende Beschreibung gegeben. Wir haben auch eine Browseraktion aufgerufen, die das von Google heruntergeladene Symbol enthält, das in Ihrer Browserleiste und in popup.html angezeigt wird. Popup.html wird aufgerufen, wenn Sie das Erweiterungssymbol im Browser auswählen.

Öffne popup.html und füge folgendes ein.

http: //popup.js

Pagespeed Analyzer mit GTMetrix

Überprüfen Sie die Seitengeschwindigkeit!

Popup.html wird aufgerufen, wenn Sie das Erweiterungssymbol im Browser auswählen. Wir haben ihm einen Namen gegeben, das Popup beschriftet und eine Schaltfläche hinzugefügt. Durch Auswahl der Schaltfläche wird popup.js aufgerufen. Dies ist die Datei, die wir als Nächstes vervollständigen werden.

Öffne popup.js und füge folgendes ein:

document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = document; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);

Ich werde nicht vorgeben, JavaScript zu kennen, weshalb es praktisch war, dass SitePoint die Datei bereits installiert hatte. Ich weiß nur, dass GTmetrix die Seite im aktuellen Chrome-Tab analysieren soll. Dort, wo "chrome.tabs.getSelected" steht, übernimmt die Erweiterung die URL von der aktiven Registerkarte und gibt sie in das Webformular ein. So weit kann ich gehen.

Testen Ihrer Chrome-Erweiterung

Jetzt haben wir das Grundgerüst und müssen testen, wie es funktioniert.

1. Öffnen Sie Chrome und wählen Sie Weitere Tools und Erweiterungen.
2. Aktivieren Sie das Kontrollkästchen neben dem Entwicklermodus, um ihn zu aktivieren.
3. Wählen Sie "Entpackte Erweiterung laden" und navigieren Sie zu der Datei, die Sie für diese Erweiterung erstellt haben.
4. Wählen Sie OK, um die Erweiterung zu laden, und sie sollte in Ihrer Erweiterungsliste angezeigt werden.
5. Aktivieren Sie das Kontrollkästchen neben Aktiviert in der Liste, und das Symbol sollte in Ihrem Browser angezeigt werden.
6. Wählen Sie das Symbol im Browser aus, damit das Popup angezeigt wird.
7. Wählen Sie die Schaltfläche Diese Seite jetzt prüfen!

Sie sollten sehen, dass die Seite überprüft wird, und einen Leistungsbericht von GTmetrix. Wie Sie auf meiner eigenen Website im Hauptbild sehen können, muss ich ein wenig daran arbeiten, mein neues Design zu beschleunigen!

Erweiterungen vorantreiben

Das Erstellen einer eigenen Chrome-Erweiterung ist nicht so schwierig, wie es scheint. Obwohl es sicherlich hilfreich war, einen Vorsprung durch das Kennen eines kleinen Codes zu haben, gibt es Hunderte von Online-Ressourcen, die Ihnen dies zeigen. Darüber hinaus verfügt Google über ein riesiges Repository mit Informationen, Tutorials und exemplarischen Vorgehensweisen, die Ihnen dabei helfen werden. Ich habe diese Seite von der Google Developer-Website verwendet, um mir bei dieser Erweiterung zu helfen. Die Seite führt Sie durch alle Schritte zum Erstellen der Erweiterung und enthält das zuvor verwendete Symbol.

Mit genügend Recherche können Sie Erweiterungen erstellen, die so ziemlich alles können, was der Browser kann. Einige der besten Erweiterungen im Chrome Store stammen von Privatpersonen und nicht von Unternehmen, was beweist, dass Sie wirklich Ihre eigenen erstellen können.

Wir danken John Sonmez bei SitePoint für die Originalanleitung. Er hat die harte Arbeit geleistet, ich habe sie nur ein wenig reorganisiert und ein wenig aktualisiert.

Haben Sie eine eigene Chrome-Erweiterung erstellt? Möchten Sie es promoten oder teilen? Lassen Sie es uns unten wissen!