Как да създадете и публикувате разширение за Chrome за 20 минути

Някога чудили ли сте се какво би било да създадете разширение за Chrome? Е, тук съм, за да ви кажа колко е лесно. Следвайте тези стъпки и вашата идея ще се превърне в реалност и ще можете да публикувате истинско разширение в уеб магазина на Chrome за нула време.

Какво представлява разширението за Chrome?

Разширенията на Chrome ви позволяват да добавите функционалност към уеб браузъра Chrome, без да се впускате дълбоко в родния код. Това е страхотно, защото можете да създадете нови разширения за Chrome с основни технологии, с които уеб разработчиците са много запознати - HTML, CSS и JavaScript. Ако някога сте създавали уеб страница, ще можете да създадете разширение по-бързо, отколкото можете да обядвате. Единственото нещо, което трябва да научите, е как да добавите някаква функционалност към Chrome чрез някои от API на JavaScript, които Chrome излага.

Ако все още нямате опит в изграждането на уеб страници, препоръчвам ви първо да се потопите в някои безплатни ресурси, за да научите как да кодирате, като freeCodeCamp.

Какво искате да изградите?

Преди да започнете, трябва да имате приблизителна представа какво искате да изградите. Не е необходимо да е някаква нова новаторска идея, просто можем да направим това за забавление. В тази статия ще ви разкажа за моята идея и как я внедрих в разширение за Chrome.

Планът

Използвах разширението Unsplash Chrome за известно време, което ми позволява да имам хубави фонови изображения на Unsplash в раздела по подразбиране. По-късно го замених с разширението Muzli Chrome, което превръща раздела по подразбиране в емисия от дизайнерски новини и снимки от мрежата.

Нека използваме тези две разширения като вдъхновение за изграждането на нещо ново, но този път за любителите на филмите. Идеята ми е да показвам произволно фоново изображение на филм всеки път, когато отворите нов раздел. При превъртане трябва да се превърне в хубава емисия от популярни филми и телевизионни предавания. Така че нека да започнем.

Стъпка 1: Настройване на нещата

Първата стъпка е да създадете файл с манифест с име manifest.json. Това е файл с метаданни във формат JSON, който съдържа свойства като името на вашето разширение, описание, номер на версията и т.н. В този файл казваме на Chrome какво ще направи разширението и какви разрешения изисква.

За разширението на филма трябва да имаме разрешение за управление на activeTab , така че нашият manifest.jsonфайл изглежда по следния начин:

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

Както виждате, казваме, че това newtab.htmlще бъде HTML файлът, който трябва да се изобразява всеки път, когато се отвори нов раздел. За да направим това, трябва да имаме разрешение за управление на activeTab , така че когато потребителят се опита да инсталира разширението, той ще бъде предупреден с всички разрешения, от които се нуждае разширението.

Друго интересно нещо вътре manifest.jsonса действията на браузъра. В този пример го използваме, за да зададем заглавието, но има повече опции. Например, за да се покаже изскачащ прозорец, когато щракнете върху иконата на приложението в адресната лента, всичко, което трябва да направите, е нещо подобно:

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

Сега popup.htmlще бъде изобразено в изскачащия прозорец, който е създаден в отговор на кликване на потребителя върху действието на браузъра. Това е стандартен HTML файл, така че ви дава безплатно управление на това, което се показва в изскачащия прозорец. Просто поставете част от вашата магия във файл с име popup.html.

Стъпка 2: Тествайте дали работи

Следващата стъпка е да създадете newtab.htmlфайла и да поставите " Hello world":

  Test   

Hello World!

За да тествате дали работи, посетете chrome://extensionsвъв вашия браузър и се уверете, че е поставен отметка в квадратчето за режим за програмисти в горния десен ъгъл.

Щракнете върху Зареждане на разопаковано разширение и изберете директорията, в която живеят вашите файлове с разширения. Ако разширението е валидно, то ще бъде активно веднага, за да можете да отворите нов раздел, за да видите вашия „Hello world“.

Стъпка 3: Правете нещата хубави

Сега, когато заработихме първата си функция, е време да я направим приятна. Можем просто да оформим новия си раздел, като създадем main.cssфайл в нашата директория с разширения и го заредим в нашия newtab.htmlфайл. Същото важи и при включването на JavaScript файл за активна функционалност, която искате да включите. Ако приемем, че сте създавали уеб страница преди, сега можете да използвате магията си, за да покажете на потребителите си каквото искате.

Завършване на плана

Всичко, от което се нуждаех по-нататък, за да завърша разширението на филма, бяха HTML, CSS и JavaScript, така че не мисля, че е уместно да се потопя дълбоко в кода, но бих искал да го прегледам бързо.

Ето какво направих:

За моя идея имах нужда от хубави фонови изображения, така че в JavaScript файла използвах API на TMDb, за да изтегля някои популярни филми, взех фоновите им изображения и ги поставих в масив. Винаги, когато страницата се зарежда, тя случайно избира едно изображение от този масив и го задава като фон на страницата. За да направя тази страница малко по-интересна, добавих и текущата дата в горния десен ъгъл. И за повече информация, тя позволява на потребителите да щракват върху фона, което води до посещение на страницата на IMDb на филма.

Замених екрана с хубава емисия от популярни филми, когато потребителят се опита да превърти надолу. Използвах същия API за изграждане на картички с филми с изображение, заглавие, рейтинг и преброяване на гласовете. След това, след като щракнете върху една от тези карти, тя показва общия преглед с бутон за гледане на трейлър.

Резултатът

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.