Як створити та опублікувати розширення Chrome за 20 хвилин

Ви ніколи не замислювались, як би було створити розширення Chrome? Ну, я тут, щоб сказати вам, наскільки це просто. Виконайте ці кроки, і ваша ідея перетвориться в реальність, і ви зможете за короткий час опублікувати справжнє розширення у Веб-магазині Chrome.

Що таке розширення Chrome?

Розширення Chrome дозволяють додавати функціональність веб-браузера Chrome, не глибоко занурюючись у власний код. Це чудово, тому що ви можете створювати нові розширення для Chrome за допомогою основних технологій, які веб-розробники добре знають - HTML, CSS та JavaScript. Якщо ви коли-небудь створювали веб-сторінку, ви зможете створити розширення швидше, ніж ви можете пообідати. Єдине, що вам потрібно навчитися, це те, як додати певну функціональність до Chrome за допомогою деяких API API, які 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веб-переглядач і переконайтеся, що прапорець Режим розробника встановлений у верхньому правому куті.

Клацніть Завантажити розпаковане розширення та виберіть каталог, в якому зберігаються ваші файли розширень. Якщо розширення є дійсним, воно буде активним відразу, тому ви зможете відкрити нову вкладку, щоб побачити свій "Привіт світ".

Крок 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.