Gondolkodott már azon, hogy milyen lenne létrehozni egy Chrome kiterjesztést? Nos, azért vagyok itt, hogy elmondjam, milyen könnyű. Kövesse ezeket a lépéseket, és ötlete megvalósul, és pillanatok alatt közzétehet egy igazi kiterjesztést a Chrome Internetes áruházban.

Mi az a Chrome kiterjesztés?

A Chrome-bővítmények lehetővé teszik a funkcionalitás hozzáadását a Chrome böngészőjéhez anélkül, hogy mélyen belemerülne a natív kódba. Ez fantasztikus, mert új kiterjesztéseket hozhat létre a Chrome-hoz olyan alapvető technológiákkal, amelyeket a webfejlesztők jól ismernek - HTML, CSS és JavaScript. Ha valaha is készített weboldalt, akkor gyorsabban létrehozhat bővítményt, mint amennyit ebédelhet. Az egyetlen dolog, amit meg kell tanulnia, hogy miként adhat hozzá bizonyos funkciókat a Chrome-hoz a Chrome által bemutatott néhány JavaScript API-n keresztül.

Ha még nem jártas a weboldalak készítésében, akkor azt javaslom, hogy először merítsen el néhány ingyenes forrást a kódolás elsajátításához, például a freeCodeCamp.

Mit akarsz építeni?

Mielőtt elkezdené, nagyjából meg kell gondolnia, mit szeretne építeni. Nem kell, hogy valami új, úttörő ötlet legyen, ezt csak szórakozásból tehetjük meg. Ebben a cikkben elmondom ötletemről és arról, hogyan valósítottam meg azt egy Chrome-bővítményben.

A terv

Egy ideje használom az Unsplash Chrome kiterjesztést, amely lehetővé teszi, hogy az alapértelmezett fülemen szép háttérképeket láthassak az Unsplash-ról. Később lecseréltem a Muzli Chrome kiterjesztésre, amely az alapértelmezett lapot design hírek és webes felvételek hírfolyamává változtatja.

Használjuk ezt a két kiterjesztést inspirációként valami új építéséhez, de ezúttal a filmek szerelmeseinek. Az az ötletem, hogy minden alkalommal, amikor új lapot nyitunk, véletlenszerű háttérképet mutatok egy filmből. Görgetéskor a népszerű filmek és tévéműsorok szép hírcsatornájává kell válnia. Tehát kezdjük.

1. lépés: A dolgok beállítása

Az első lépés egy manifeszt fájl létrehozása manifest.json. Ez egy JSON formátumú metaadatfájl, amely olyan tulajdonságokat tartalmaz, mint a kiterjesztés neve, leírása, verziószáma és így tovább. Ebben a fájlban elmondjuk a Chrome-nak, hogy mi lesz a kiterjesztés, és milyen engedélyekre van szükség.

A filmbővítményhez engedélyre van szükségünk az ActiveTab vezérléséhez , így a manifest.jsonfájlunk így néz ki:

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

Mint láthatja, azt mondjuk, hogy newtab.htmlez lesz a HTML fájl, amelyet minden egyes új lap megnyitásakor renderelni kell. Ehhez engedélyre van szükségünk az ActiveTab vezérléséhez , így amikor a felhasználó megpróbálja telepíteni a kiterjesztést, figyelmeztetni fogja a bővítmény összes engedélyével.

Egy másik érdekes dolog manifest.jsona böngészőben. Ebben a példában a cím beállításához használjuk, de vannak további lehetőségek. Például egy felugró ablak megjelenítéséhez, amikor rákattint az alkalmazás ikonjára a címsávon belül, csak annyit kell tennie:

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

Most popup.htmla felugró ablakban jelenik meg, amely a felhasználó böngészőműveletre történő kattintására válaszként jön létre. Ez egy szabványos HTML fájl, így szabad uralmat adhat a felugró ablakok megjelenítésében. Csak tegye a varázslat egy részét egy fájlba popup.html.

2. lépés: Ellenőrizze, hogy működik-e

A következő lépés a newtab.htmlfájl létrehozása és egy ' Hello world' betétele:

  Test   
Hello World!

Ha tesztelni szeretné, hogy működik-e, látogasson chrome://extensionsel a böngészőjébe, és ellenőrizze, hogy a jobb felső sarokban található Fejlesztői mód jelölőnégyzet be van-e jelölve.

Kattintson a Kicsomagolatlan kiterjesztés betöltése elemre, és válassza ki a könyvtárat, amelyben a kiterjesztési fájlok élnek. Ha a kiterjesztés érvényes, akkor azonnal aktív lesz, így megnyithat egy új lapot a „Hello world” megtekintéséhez.

3. lépés: Szép dolgok

Most, hogy működött az első funkciónk, itt az ideje, hogy szép legyen. Egyszerűen megtervezhetjük új fülünket, ha létrehozunk egy main.cssfájlt a kiterjesztés könyvtárunkban, és betölthetjük a newtab.htmlfájlunkba. Ugyanez vonatkozik akkor is, ha JavaScript-fájlt tartalmaz minden aktív funkcióhoz, amelyet fel szeretne venni. Feltételezve, hogy korábban már létrehozott egy weboldalt, most felhasználhatja varázslatát, hogy a felhasználóknak megmutassa, amit csak akar.

A terv elkészítése

A filmbővítmény befejezéséhez csak HTML, CSS és JavaScript kellett, ezért nem hiszem, hogy releváns lenne mélyen belemerülni a kódba, de szeretnék gyorsan átmenni rajta.

Íme, amit tettem:

Ötletemhez néhány szép háttérképre volt szükségem, ezért a JavaScript fájlban a TMDb API-t használtam néhány népszerű film letöltéséhez, a háttérképeik elkészítéséhez és tömbbe helyezéséhez. Valahányszor az oldal betöltődik, véletlenszerűen kiválaszt egy képet a tömbből, és beállítja az oldal hátterének. Hogy ez az oldal egy kicsit érdekesebb legyen, a jobb felső sarokba felvettem az aktuális dátumot is. További információért lehetővé teszi a felhasználók számára, hogy rákattintsanak a háttérre, ami a film IMDb oldalának felkereséséhez vezet.

A képernyőt a népszerű filmek jó hírcsatornájával cseréltem le, amikor a felhasználó megpróbál lefelé görgetni. Ugyanazt az API-t használtam képek, címek, minősítések és szavazatok számával rendelkező filmkártyák készítéséhez. Ezután az egyik ilyen kártyára kattintva megjelenik az áttekintés egy gombbal, amellyel megnézheti a trailert.

Az eredmény

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.