Полный исходный код этого проекта можно найти на GitHub.
В этом посте я расскажу вам, как можно создать расширение Chrome с нуля.
Что такое расширение Chrome?
Расширение Chrome или плагин — это программа, которая добавляет функциональность в браузер. Вы можете легко создать его, используя такие веб-технологии, как HTML, CSS и JavaScript.
Создание проекта
Инициализируйте наш новый проект с помощью игровой площадки CodePen или создайте свой собственный проект в Visual Studio Code со следующей структурой файлов в папке src.
Developer Launcher
|- Assets
|- css
|- styles.css
|- images
|- logo16.png
|- logo128.png
|- logo150.png
|- /src
|- popup.html
|- popup.js
|- manifest.json
Часть 1: изменение нашего HTML-файла.
Начните с редактирования файла index.html и замените его следующим кодом.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Launcher</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,700" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
<img src="./assets/images/logo128.png" alt="Developer Launcher" class="logo-icon"> Developer Launcher <span class="version">(1.0.0)</span>
</h1>
</div>
<div class="modal-content">
<p> Early Access to HR Media 🐱💻!</p>
</div>
<div class="modal-icons">
<div class="flex-container">
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-github fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-twitter fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-linkedin fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-dev fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-medium fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-dribbble fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-codepen fa-animated"></i></a>
</div>
<div class="flex">
<a href="" target="_blank"> <i class="fab fa-artstation fa-animated"></i></a>
</div>
</div>
<div id="modal-footer">
<a href="" target="_blank"><p>MIT © HR</p></a>
</div>
</div>
</body>
<script src="popup.js"></script>
</html>
Примечание 💡 — Помните, что число рядом с logo16.svg означает размер 16×16 и так далее.
Часть 2: модификация нашего файла CSS.
Следующим шагом будет добавление следующих стилей и завершение нашего файла style.css.
html,body{
font-family: 'Poppins', sans-serif;
font-size: 16px;
margin: 0px;
min-height: 180px;
padding: 0;
width: 384px;
}
h1{
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #000;
text-align: center;
}
img{
width: 30px;
}
p{
text-align: center;
}
.modal-header{
align-items: center;
border-bottom: 0.5px solid #231955;
}
.modal-content{
padding: 0 22px;
}
.modal-icons{
border-top: 0.5px solid #231955;
height: 50px;
width: 100%;
}
.logo{
padding: 16px;
}
.logo-icon{
vertical-align: text-bottom;
margin-right: 12px;
}
.version{
color: #444;
font-size: 18px;
}
a:link, a:visited{
color: #231955;
outline: 0;
text-decoration: none;
}
.flex-container{
display: flex;
justify-content: space-between;
padding: 10px 22px;
}
.flex {
opacity: 0.4;
transition: opacity 0.2s ease-in-out;
width: 120px;
}
.flex:hover{
opacity: 0.4;
}
i{
font-size: 30px;
}
#modal-footer{
background-color: rgba(0,0,0,0.6);
font-size: 15px;
font-weight: bold;
text-align: center;
}
#modal-footer a{
color: #ffffff;
}
.fa-animated {
position: relative;
padding-top: 15px;
padding-bottom: 15px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
vertical-align: bottom;
}
.fa-animated:hover {
padding-top: 0px;
padding-bottom: 30px;
}
.fa-animated::after {
content : "";
position: absolute;
left: 0%;
right: 0%;
bottom: 0;
height: 0px;
width: 100%;
border-bottom: 2px solid #FF0063;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
border-radius: 90px;
}
.fa-animated:hover::after {
left: 20%;
right: 20%;
width: 60%;
border-bottom: 1px solid #FF0063;
}
Часть 3: изменение нашего файла Manifest.Json.
Манифест — это JSON-файл, который содержит всю метаинформацию о нашем расширении.
Для создания расширения chrome нам нужен файл манифеста.
{
"manifest_version": 3,
"name": "Developer Launcher",
"description": "Developers don't talk much. Their code does all the talking. So here's a google chrome extension for developers that want to connect their preferred social media links from the web.",
"version" : "1.0.0",
"icons" : {"128": "./assets/images/logo128.png"},
"action": {
"default_icon": "./assets/images/logo16.png",
"default_popup": "./popup.html"
},
"permissions": ["activeTab"]
}
Примечание 💡 — Не забудьте проверить документацию разработчика chrome, так как manifest_version 3 является последней версией.
Развертывание
Наконец, мы можем загрузить наше расширение в режиме разработчика chrome следующим образом:
Примечание 💡 — Не забудьте нажать на кнопку «Загрузить распакованное» и затем выбрать путь к папке маршрута вашего расширения.
Теперь вы должны увидеть следующее:
