So erstellen und veröffentlichen Sie eine Chrome-Erweiterung in 20 Minuten

Haben Sie sich jemals gefragt, wie es wäre, eine Chrome-Erweiterung zu erstellen? Nun, ich bin hier, um Ihnen zu sagen, wie einfach es ist. Befolgen Sie diese Schritte, und Ihre Idee wird Wirklichkeit und Sie können in kürzester Zeit eine echte Erweiterung im Chrome Web Store veröffentlichen.

Was ist eine Chrome-Erweiterung?

Mit Chrome-Erweiterungen können Sie dem Chrome-Webbrowser Funktionen hinzufügen, ohne sich eingehend mit nativem Code zu befassen. Das ist großartig, weil Sie neue Erweiterungen für Chrome mit Kerntechnologien erstellen können, mit denen Webentwickler sehr vertraut sind - HTML, CSS und JavaScript. Wenn Sie jemals eine Webseite erstellt haben, können Sie eine Erweiterung schneller erstellen, als Sie zu Mittag essen können. Sie müssen lediglich lernen, wie Sie Chrome über einige der von Chrome bereitgestellten JavaScript-APIs einige Funktionen hinzufügen.

Wenn Sie noch keine Erfahrung mit dem Erstellen von Webseiten haben, empfehlen wir Ihnen, zunächst in einige kostenlose Ressourcen einzutauchen, um zu lernen, wie man Code erstellt, wie z. B. freeCodeCamp.

Was möchtest du bauen?

Bevor Sie beginnen, sollten Sie eine ungefähre Vorstellung davon haben, was Sie erstellen möchten. Es muss keine neue bahnbrechende Idee sein, wir können dies nur zum Spaß tun. In diesem Artikel erzähle ich Ihnen von meiner Idee und wie ich sie in eine Chrome-Erweiterung implementiert habe.

Der Plan

Ich habe eine Weile die Unsplash Chrome-Erweiterung verwendet, mit der ich schöne Hintergrundbilder von Unsplash auf meiner Standardregisterkarte haben kann. Ich habe es später durch die Muzli Chrome-Erweiterung ersetzt, die die Standardregisterkarte in einen Feed mit Designnachrichten und Aufnahmen aus dem Internet verwandelt.

Lassen Sie uns diese beiden Erweiterungen als Inspiration verwenden, um etwas Neues zu bauen, diesmal jedoch für Filmliebhaber. Meine Idee ist es, jedes Mal, wenn Sie einen neuen Tab öffnen, ein zufälliges Hintergrundbild eines Films anzuzeigen. Beim Scrollen sollte es sich in einen schönen Feed mit beliebten Filmen und TV-Shows verwandeln. Also lasst uns anfangen.

Schritt 1: Dinge einrichten

Der erste Schritt besteht darin, eine Manifestdatei mit dem Namen zu erstellen manifest.json. Dies ist eine Metadatendatei im JSON-Format, die Eigenschaften wie den Namen, die Beschreibung, die Versionsnummer usw. Ihrer Erweiterung enthält. In dieser Datei teilen wir Chrome mit, was die Erweiterung tun wird und welche Berechtigungen sie benötigt.

Für die Filmerweiterung benötigen wir die Berechtigung zum Steuern von activeTab . Unsere manifest.jsonDatei sieht also ungefähr so aus:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,
"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },
“chrome_url_overrides” : { “newtab”: “newtab.html”},
 “permissions”: [“activeTab”]}

Wie Sie sehen können, newtab.htmlist dies die HTML-Datei, die jedes Mal gerendert werden soll, wenn ein neuer Tab geöffnet wird. Dazu benötigen wir die Berechtigung zum Steuern des activeTab . Wenn ein Benutzer versucht, die Erweiterung zu installieren, wird er mit allen Berechtigungen gewarnt, die die Erweiterung benötigt.

Eine weitere interessante Sache im manifest.jsonsind die Browser-Aktionen. In diesem Beispiel verwenden wir es, um den Titel festzulegen, aber es gibt mehr Optionen. Um beispielsweise ein Popup anzuzeigen, wenn Sie auf das App-Symbol in der Adressleiste klicken, müssen Sie lediglich Folgendes tun:

“browser_action”: { “default_popup”: “popup.html”, },

Nun popup.htmlwird in den Popup - Fenstern wiedergegeben , die in Reaktion auf einen Benutzer klicken Sie auf dem Browser Aktion erstellt wird . Es handelt sich um eine Standard-HTML-Datei, mit der Sie frei entscheiden können, was im Popup angezeigt wird. Legen Sie einfach etwas von Ihrer Magie in eine Datei mit dem Namen popup.html.

Schritt 2: Testen Sie, ob es funktioniert

Der nächste Schritt besteht darin, die newtab.htmlDatei zu erstellen und ein ' Hello world' einzugeben:

  Test   

Hello World!

Um zu testen, ob es funktioniert, besuchen Sie chrome://extensionsIhren Browser und stellen Sie sicher, dass das Kontrollkästchen Entwicklermodus in der oberen rechten Ecke aktiviert ist.

Klicken Sie auf Entpackte Erweiterung laden und wählen Sie das Verzeichnis aus, in dem sich Ihre Erweiterungsdateien befinden. Wenn die Erweiterung gültig ist, ist sie sofort aktiv, sodass Sie einen neuen Tab öffnen können, um Ihre "Hallo Welt" anzuzeigen.

Schritt 3: Dinge schön machen

Nachdem wir unser erstes Feature zum Laufen gebracht haben, ist es Zeit, es schön zu machen. Wir können unsere neue Registerkarte einfach formatieren, indem wir eine main.cssDatei in unserem Erweiterungsverzeichnis erstellen und in unsere newtab.htmlDatei laden . Gleiches gilt für das Einfügen einer JavaScript-Datei für alle aktiven Funktionen, die Sie einschließen möchten. Angenommen, Sie haben zuvor eine Webseite erstellt, können Sie jetzt Ihre Magie verwenden, um Ihren Benutzern zu zeigen, was Sie wollen.

Den Plan fertigstellen

Alles, was ich weiter brauchte, um die Filmerweiterung fertigzustellen, war HTML, CSS und JavaScript. Ich denke nicht, dass es relevant ist, tief in den Code einzutauchen, aber ich würde es gerne schnell durchgehen.

Folgendes habe ich getan:

Für meine Idee brauchte ich einige schöne Hintergrundbilder, also habe ich in der JavaScript-Datei die TMDb-API verwendet, um einige beliebte Filme abzurufen, ihre Hintergrundbilder aufzunehmen und sie in einem Array abzulegen. Immer wenn die Seite geladen wird, wählt sie zufällig ein Bild aus diesem Array aus und legt es als Hintergrund für die Seite fest. Um diese Seite etwas interessanter zu gestalten, habe ich auch das aktuelle Datum in der oberen rechten Ecke hinzugefügt. Für weitere Informationen können Benutzer auf den Hintergrund klicken, um die IMDb-Seite des Films zu besuchen.

Ich habe den Bildschirm durch einen schönen Feed mit beliebten Filmen ersetzt, wenn der Benutzer versucht, nach unten zu scrollen. Ich habe dieselbe API verwendet, um Filmkarten mit Bild, Titel, Bewertung und Stimmenzahl zu erstellen. Wenn Sie dann auf eine dieser Karten klicken, wird die Übersicht mit einer Schaltfläche zum Anzeigen eines Trailers angezeigt.

Das Ergebnis

Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

Step 4: Publish your extension

When your first Chrome extension looks nice and works like it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

Got questions or feedback? Let me know in the comments!

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.