Jak stworzyć i opublikować rozszerzenie Chrome w 20 minut

Czy kiedykolwiek zastanawiałeś się, jak by to było, gdybyś utworzył rozszerzenie do Chrome? Cóż, jestem tutaj, aby powiedzieć, jakie to proste. Wykonaj te czynności, a Twój pomysł stanie się rzeczywistością, a będziesz mógł błyskawicznie opublikować prawdziwe rozszerzenie w Chrome Web Store.

Co to jest rozszerzenie Chrome?

Rozszerzenia Chrome umożliwiają dodawanie funkcji do przeglądarki internetowej Chrome bez zagłębiania się w kod natywny. To niesamowite, ponieważ możesz tworzyć nowe rozszerzenia dla przeglądarki Chrome, korzystając z podstawowych technologii, z którymi programiści są bardzo dobrze zaznajomieni - HTML, CSS i JavaScript. Jeśli kiedykolwiek zbudowałeś stronę internetową, będziesz mógł utworzyć rozszerzenie szybciej niż możesz zjeść lunch. Jedyne, czego musisz się nauczyć, to dodawanie funkcji do Chrome za pomocą niektórych interfejsów API JavaScript udostępnianych przez Chrome.

Jeśli nie masz jeszcze doświadczenia w tworzeniu stron internetowych, radzę najpierw zapoznać się z darmowymi zasobami, aby nauczyć się kodować, np. FreeCodeCamp.

Co chcesz zbudować?

Zanim zaczniesz, powinieneś mieć ogólne pojęcie o tym, co chcesz zbudować. Nie musi to być jakiś nowy, przełomowy pomysł, możemy to zrobić dla przyjemności. W tym artykule opowiem o moim pomyśle i o tym, jak zaimplementowałem go w rozszerzeniu Chrome.

Plan

Od jakiegoś czasu korzystam z rozszerzenia Unsplash do Chrome, które pozwala mi mieć ładne obrazy tła Unsplash na mojej domyślnej karcie. Później zastąpiłem go rozszerzeniem Muzli Chrome, które zmienia domyślną kartę w źródło nowości projektowych i ujęć z sieci.

Wykorzystajmy te dwa rozszerzenia jako inspirację do stworzenia czegoś nowego, ale tym razem dla miłośników filmów. Moim pomysłem jest wyświetlanie losowego obrazu tła filmu za każdym razem, gdy otwierasz nową kartę. Po przewinięciu powinien zamienić się w fajny zbiór popularnych filmów i programów telewizyjnych. Więc zacznijmy.

Krok 1: Konfiguracja

Pierwszym krokiem jest utworzenie pliku manifestu o nazwie manifest.json. Jest to plik metadanych w formacie JSON, który zawiera właściwości, takie jak nazwa rozszerzenia, opis, numer wersji i tak dalej. W tym pliku informujemy Chrome, co zamierza zrobić rozszerzenie i jakich uprawnień wymaga.

W przypadku rozszerzenia filmu musimy mieć uprawnienia do kontrolowania activeTab , więc nasz manifest.jsonplik wygląda mniej więcej tak :

{ “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”]}

Jak widać, mówimy, że newtab.htmlbędzie to plik HTML, który powinien być renderowany za każdym razem, gdy zostanie otwarta nowa karta. Aby to zrobić, musimy mieć uprawnienia do kontrolowania activeTab , więc gdy użytkownik spróbuje zainstalować rozszerzenie, zostanie ostrzeżony o wszystkich uprawnieniach, których potrzebuje rozszerzenie.

Inną interesującą rzeczą w środku manifest.jsonsą działania przeglądarki. W tym przykładzie używamy go do ustawienia tytułu, ale jest więcej opcji. Na przykład, aby wyświetlić wyskakujące okienko za każdym razem, gdy klikniesz ikonę aplikacji na pasku adresu, wszystko, co musisz zrobić, to coś takiego:

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

Teraz popup.htmlbędzie wyświetlany w wyskakującym okienku, które jest tworzone w odpowiedzi na kliknięcie przez użytkownika czynności przeglądarki. Jest to standardowy plik HTML, więc daje Ci swobodę panowania nad tym, co wyświetla wyskakujące okienko. Po prostu umieść trochę swojej magii w pliku o nazwie popup.html.

Krok 2: Sprawdź, czy działa

Następnym krokiem jest utworzenie newtab.htmlpliku i wstawienie „ Hello world”:

  Test   

Hello World!

Aby sprawdzić, czy to działa, przejdź chrome://extensionsdo przeglądarki i upewnij się, że pole wyboru Tryb programisty w prawym górnym rogu jest zaznaczone.

Kliknij Załaduj rozpakowane rozszerzenie i wybierz katalog, w którym znajdują się pliki rozszerzeń. Jeśli rozszerzenie jest prawidłowe, będzie od razu aktywne, więc możesz otworzyć nową kartę, aby zobaczyć swój „Hello world”.

Krok 3: Upiększanie rzeczy

Teraz, gdy nasza pierwsza funkcja działa, czas ją ulepszyć. Możemy po prostu stylizować naszą nową kartę, tworząc main.cssplik w naszym katalogu rozszerzeń i ładując go do naszego newtab.htmlpliku. To samo dotyczy dołączania pliku JavaScript dla dowolnej aktywnej funkcji, którą chcesz dołączyć. Zakładając, że wcześniej utworzyłeś stronę internetową, możesz teraz użyć swojej magii, aby pokazać użytkownikom, co chcesz.

Kończę plan

Wszystko, czego potrzebowałem, aby ukończyć rozszerzenie filmu, to HTML, CSS i JavaScript, więc nie sądzę, aby zagłębiać się w kod, ale chciałbym szybko przez to przejść.

Oto co zrobiłem:

Do mojego pomysłu potrzebowałem ładnych obrazów tła, więc w pliku JavaScript użyłem TMDb API do pobrania kilku popularnych filmów, wziąłem ich obrazy tła i umieściłem je w tablicy. Za każdym razem, gdy strona ją ładuje, wybiera teraz losowo jeden obraz z tej tablicy i ustawia go jako tło strony. Aby ta strona była trochę bardziej interesująca, dodałem również aktualną datę w prawym górnym rogu. Aby uzyskać więcej informacji, użytkownicy mogą kliknąć tło, które prowadzi do odwiedzenia strony IMDb filmu.

Zamieniłem ekran na niezłą listę popularnych filmów, gdy użytkownik próbuje przewinąć w dół. Użyłem tego samego interfejsu API do tworzenia kart filmów z obrazem, tytułem, oceną i liczbą głosów. Następnie po kliknięciu jednej z tych kart wyświetla przegląd z przyciskiem do obejrzenia zwiastuna.

Wynik

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.