Sådan oprettes og udgives en Chrome-udvidelse på 20 minutter

Har du nogensinde spekuleret på, hvordan det ville være at oprette en Chrome-udvidelse? Jeg er her for at fortælle dig, hvor let det er. Følg disse trin, og din idé vil blive til virkelighed, og du vil være i stand til at offentliggøre en reel udvidelse i Chrome Webshop på ingen tid.

Hvad er en Chrome-udvidelse?

Chrome-udvidelser giver dig mulighed for at tilføje funktionalitet til Chrome-webbrowseren uden at dykke dybt ned i den oprindelige kode. Det er fantastisk, fordi du kan oprette nye udvidelser til Chrome med kerneteknologier, som webudviklere er meget fortrolige med - HTML, CSS og JavaScript. Hvis du nogensinde har bygget en webside, vil du være i stand til at oprette en udvidelse hurtigere, end du kan spise frokost. Det eneste, du har brug for at lære, er hvordan du tilføjer nogle funktioner til Chrome gennem nogle af JavaScript API'erne, som Chrome udsætter.

Hvis du endnu ikke har erfaring med at opbygge websider, anbefaler jeg, at du først dykker ned i nogle gratis ressourcer for at lære at kode, som freeCodeCamp.

Hvad vil du bygge?

Før du starter, skal du have en grov idé om, hvad du vil bygge. Det behøver ikke at være en ny banebrydende idé, vi kan bare gøre det for sjov. I denne artikel fortæller jeg dig om min idé, og hvordan jeg implementerede den i en Chrome-udvidelse.

Planen

Jeg har brugt Unsplash Chrome-udvidelsen i et stykke tid, hvilket giver mig mulighed for at have pæne baggrundsbilleder af Unsplash i min standardfane. Jeg erstattede det senere med Muzli Chrome-udvidelsen, der forvandler standardfanen til et feed med designnyheder og skud fra hele nettet.

Lad os bruge disse to udvidelser som inspiration til at opbygge noget nyt, men denne gang til filmelskere. Min idé er at vise et tilfældigt baggrundsbillede af en film hver gang du åbner en ny fane. På rulle skal det blive et godt feed af populære film og tv-shows. Så lad os komme i gang.

Trin 1: Opsætning af ting

Det første trin er at oprette en manifestfil med navnet manifest.json. Dette er en metadatafil i JSON-format, der indeholder egenskaber som din udvidelses navn, beskrivelse, versionsnummer og så videre. I denne fil fortæller vi Chrome, hvad udvidelsen skal gøre, og hvilke tilladelser den kræver.

Til filmudvidelsen skal vi have tilladelse til at kontrollere activeTab , så vores manifest.jsonfil ser sådan ud:

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

Som du kan se, siger vi, at det newtab.htmlvil være den HTML-fil, der skal gengives, hver gang en ny fane åbnes. For at gøre dette skal vi have tilladelse til at kontrollere den aktive fane , så når en bruger prøver at installere udvidelsen, bliver de advaret med alle de tilladelser, som udvidelsen har brug for.

En anden interessant ting inde i manifest.jsoner browserhandlingerne. I dette eksempel bruger vi det til at indstille titlen, men der er flere muligheder. For eksempel, for at vise en popup, når du klikker på appikonet inde i adresselinjen, er alt hvad du skal gøre noget som dette:

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

Nu popup.htmlgengives i popup-vinduet, der er oprettet som svar på en brugers klik på browserhandlingen. Det er en standard HTML-fil, så det giver dig gratis regeringstid over, hvad popupen viser. Bare læg noget af din magi i en fil med navnet popup.html.

Trin 2: Test, om det fungerer

Det næste trin er at oprette newtab.htmlfilen og sætte i en ' Hello world':

  Test   

Hello World!

For at teste, om det fungerer, skal du besøge chrome://extensionsi din browser og sikre dig, at afkrydsningsfeltet Udviklertilstand i øverste højre hjørne er markeret.

Klik på Indlæs udpakt udvidelse, og vælg det bibliotek, hvor dine udvidelsesfiler lever. Hvis udvidelsen er gyldig, vil den være aktiv med det samme, så du kan åbne en ny fane for at se din 'Hej verden'.

Trin 3: Gør tingene pæne

Nu hvor vi fik vores første funktion til at fungere, er det tid til at gøre det rart. Vi kan simpelthen style vores nye fane ved at oprette en main.cssfil i vores udvidelsesmappe og indlæse den i vores newtab.htmlfil. Det samme gælder, når du inkluderer en JavaScript-fil til enhver aktiv funktionalitet, som du gerne vil medtage. Forudsat at du har oprettet en webside før, kan du nu bruge din magi til at vise dine brugere hvad du vil.

Afslutning af planen

Alt hvad jeg yderligere havde brug for for at afslutte filmudvidelsen var HTML, CSS og JavaScript, så jeg synes ikke det er relevant at dykke dybt ned i koden, men jeg vil gerne gennemgå det hurtigt.

Her er hvad jeg gjorde:

For my idea I needed some nice background images, so in the JavaScript file I used the TMDb API to fetch some popular movies, took their backdrop images and put them in an array. Whenever the page loads it now randomly picks one image from that array and sets it as the background of the page. To make this page a little more interesting I also added the current date in the top right corner. And for more information, it allows users to click the background which leads to visiting the movie’s IMDb page.

I replaced the screen with a nice feed of popular movies when the user tries to scroll down. I used the same API to build cards of movies with an image, title, rating and vote count. Then, on clicking one of those cards, it shows the overview with a button to watch a trailer.

The result

Nu med den lille manifest.jsonfil og bare nogle HTML, CSS og JavaScript ser hver ny fane, du åbner, meget mere interessant ud:

Trin 4: Udgiv din udvidelse

Når din første Chrome-udvidelse ser flot ud og fungerer som den skal, er det tid til at offentliggøre den i Chrome Store. Følg blot dette link for at gå til dit Chrome Webshop-dashboard (du bliver bedt om at logge ind på din Google-konto, hvis du ikke er det). Klik derefter på Add new itemknappen, accepter vilkårene, og du vil gå til den side, hvor du kan uploade din udvidelse. Komprimer nu mappen, der indeholder dit projekt, og upload den ZIP-fil.

Når du har uploadet din fil, vil du se en formular, hvor du skal tilføje nogle oplysninger om din udvidelse. Du kan tilføje et ikon, en detaljeret beskrivelse, uploade nogle skærmbilleder osv.

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!

Brug din kreativitet til at komme med noget interessant, og hvis du nogensinde sidder fast, kan den fremragende Chrome-udvidelsesdokumentation sandsynligvis hjælpe dig.

Så hvad venter du på? Det er tid til at begynde at arbejde på din egen Chrome-udvidelse og gøre din idé til virkelighed.

Glem ikke at dele dit projekt i kommentarerne og tryk på klappeknappen, hvis denne artikel var noget nyttigt for dig. Hvis du har lidt tid og vil være en helt, giv min udvidelse en positiv vurdering. Det ville blive meget værdsat!

Har du spørgsmål eller feedback? Lad mig vide i kommentarerne!

Tak for læsningen! Håber, at oplysningerne var nyttige. Følg mig på Medium for mere tekniske relaterede artikler eller på Twitter og Instagram @jakeprins_nl.