Свое первое расширение для Chrome я создала с целью автоматизации ряда регулярно повторяющихся процессов. В этой статье я поделюсь с вами полученным опытом и обобщу все необходимое для быстрого создания собственного расширения.
Это настолько интересно, что многие разработчики используют данный способ для получения онлайн-дохода на продаже подобных расширений. Перейдем сразу к делу!
Шаг 1. Создание структуры каталога
Прежде чем начать писать код, нам понадобится каталог, в котором мы будем создавать расширение. А для того, чтобы расширение заработало должным образом, этот каталог должен иметь конкретную структуру.
Потребуется 3 основных компонента:
- файл описания;
- иконка;
- HTML-файл.
Шаг 2. Создание файла описания
Файл описания подобен файлу конфигурации, необходимому Chrome для понимания и правильной загрузки расширения.
Вот пример такого файла manifest.json:
{
"manifest_version": 2,
"name": "Front by FAM",
"version": "1.0.0",
"description": "Quick access to Front",
"browser_action": {
"default_icon": "img/favicon.png",
"default_title": "Front",
"default_popup": "front-popup.html"
}
}
Можно добавить фоновый скрипт для серверных задач, равно как и многие другие опции. Более подробно об этом можно узнать из документации (англ.)
Шаг 3. Создание системы расширения
Очень важный шаг. Мы будем прописывать код функциональности расширения, его систему.
В этой статье я решила сделать расширение, которое позволит вам быстро со мной связываться. 😅
Проектирование
Для этого примера я все преподнесу в простом виде. Нам понадобятся:
- фон;
- карточки для ссылок на мои аккаунты в социальных сетях;
- простой футер со ссылкой на мою вселенную в интернете ^^
На этом все. В конечном итоге у нас получится нечто подобное:
Написание кода
- логотип и заголовок;
- карточки аккаунтов Instagram, LinkedIn, YouTube и Twitter;
- футер.
Вы заметите, что я уже интегрировала CSS-файл front.css , а также JS-файл front.js. JS-файл в этом примере я не использовала, а добавила его просто, чтобы продемонстрировать возможность применения JavaScript в построении расширения для Chrome.
Раcширение Front для Chrome:
<!DOCTYPE html>
<html>
<head>
<!-- My awesome extension -->
<link rel="stylesheet" href="front.css">
<link rel="icon"
type="image/png"
href="img/favicon.png">
</head>
<body>
<main class="container" id="co">
<img class="logo" src="img/logo.png" alt="Front by FAM"/>
<p class="text-white">Let's get in touch...</p>
<div class="cards-list">
<div class="card 1">
<div class="card_image">
<img src="gifs/instagram.gif" />
</div>
<div class="card_title ">
<a href="https://www.instagram.com/the_frontend_world/" target="_blank">
<p>Instagram</p>
</a>
</div>
</div>
<div class="card 2">
<div class="card_image">
<img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
</div>
<div class="card_title title-white">
<a href="https://www.instagram.com/the_frontend_world/" target="_blank">
<p>LinkedIn</p></a>
</div>
</div>
<div class="card 3">
<div class="card_image">
<img src="gifs/youtube.gif" />
</div>
<div class="card_title">
<a href="https://www.instagram.com/the_frontend_world/" target="_blank">
<p>Youtube</p></a>
</div>
</div>
<div class="card 4">
<div class="card_image">
<img src="gifs/twitter.gif" />
</div>
<div class="card_title">
<a href="https://www.instagram.com/the_frontend_world/" target="_blank">
<p>Twitter</p></a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<p>Created with love by <a href="http://www.fam-front.com/">FAM</a></p>
</div>
</footer>
<script src="front.js"></script>
</body>
</html>
Шаг 4. Стилизация
Стилизация в web подобна маркетингу в экономике. Вам необходимо уделять этому должное внимание, чтобы продукт получался привлекателен для пользователей или клиентов.
После стилизации HTML-кода получаем такой результат:
- Рабочий стол
- Версия для маленького экрана
Код CSS:
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
body {
padding: 0;
margin: 0;
font-family: 'Amatic SC', cursive;
font-size: xx-large;
}
.container {
background-image: linear-gradient(
135deg,
rgba(52, 152, 219, 0.5) 0%,
rgba(243, 65, 65, 0.4) 100%
),
url('http://i.imgbox.com/LmWSE419.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
.logo {
padding: 50px;
width: 300px;
margin: auto;
}
.container img.logo,
.footer,
.container p {
display: flex;
justify-content: center;
font-size: xx-large;
}
.text-white {
color: white;
}
/* Social media cards*/
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-bottom: 230px;
}
.card {
margin: 30px auto;
width: 250px;
height: 250px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25),
-5px -5px 30px 7px rgba(0, 0, 0, 0.22);
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: 'Amatic SC', cursive;
font-weight: lighter;
font-size: 50px;
margin-top: -80px;
height: 40px;
color: black;
}
.card .card_title a {
color: black;
}
.card:hover {
transform: scale(0.9, 0.9);
box-shadow: 5px 5px 30px 15px rgba(0, 0, 0, 0.25),
-5px -5px 30px 15px rgba(0, 0, 0, 0.22);
}
@media all and (max-width: 500px) {
.card-list {
/* For small screens*/
flex-direction: column;
}
}
/* Footer */
.footer,
.footer a {
background-color: black;
color: white;
}
Шаг 5. Расширение в действии
Это самый впечатляющий шаг. Мы опубликуем наше расширение и пронаблюдаем его в действии.
Для этого нужно:
- перейти в Chrome://extensions
- активировать режим разработки;
- кликнуть unpacked;
- выбрать проект;
- поздравляю! Ваше расширение загружено.
Проверьте список ваших расширений и убедитесь, что все в порядке.
Шаг 6. Если все в порядке, то можно гордо публиковать расширение для всего мира
Все сложное вы проделали. Теперь можете переходить к публикации расширения в магазине Chrome:
- создайте zip-файл проекта;
- создайте аккаунт разработчика;
- загрузите проект;
- добавьте ресурсы для своего объявления;
- отправьте проект на публикацию.
Более подробно здесь:Publish in the Chrome Web Store — Chrome Developers
This page describes how you publish a new extension or theme («item») to the Chrome Web Store. Before you publish an…developer.chrome.com
Видео
Заключение
Многие разработчики создают расширения для Chrome, на чем добывают дополнительный заработок. Если вы тоже так хотите, то вам следует поискать аудиторию, которой требуется либо конкретный продукт, либо автоматизация какого-либо процесса (например, Oberlo). Затем на основе этого вы создаете расширение и начинаете продавать его в магазине Chrome.
Если же вас интересует исходный код моего проекта, то он здесь:
Читайте также:
- Создаем расширение Chrome на Mint
- Создаём расширение для Chrome
- В погоне за продуктивностью, или 9 полезных расширений для браузера
Читайте нас в Telegram, VK и Яндекс.Дзен
Перевод статьи FAM: 6 Steps to build your own chrome extension and start making money!
