Пишемо розширення для Chrome з Battery API
Привіт, кодегідці! Мене звуть Ярик, мені 16, живу, працюю та вчусь у Львові. Це моя перша стаття, буду радий коментарям!
Сьогодні ми напишемо просте, але корисне розширення під Chrome та познайомимось із Battery API.
Функціонал нашого додатку:
- Відображення рівня заряду акумулятора
- Сповіщення про низький заряд (якщо level < 20% )
Що нам знадобиться:
- Базові знання HTML, CSS та JavaScript
- 5$ для публікації на Chrome Web Store (необов'язково)
Організуємо структуру директорій:
baterry-monitor
+ — icons
-32x32.png
-48x48.png
+ — popup
-main.js
-style.css
-popup.html
— background.js
— manifest.json
Розпочнемо ми із обовязкового файлу у Chrome extensions - manifest.json.
manifest.json
{
“manifest_version”: 2, //версія маніфесту, стандартно - 2
“name”: “battery-monitor”, //назва нашого додатку
“version”: “1.0”,
“icons”: {
“32”: “./icons/32x32.png”, //шлях до іконок
“48”: “./icons/48x48.png”
},
“background”: {
“scripts”: [“background.js”] //скрипт, що виконується при запуску браузера
},
“browser_action”: {
“default_title”: “open battery-monitor”, //спливаюча підказка
“default_icon”: “./icons/48x48.png”, //головна іконка
“default_popup”: “./popup/popup.html” //шлях до файлу "картки" додатка
}
}
Також нам будуть потрібні іконки 32x32 та 48x48 розмірів у папці icons. Знайти та завантажити можна тут
Покладемо базову верстку у файл popup.html
popup/popup.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title></title>
<script src=”main.js”></script>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Час поглянути, що у нас вийшло:
Сhrome > налаштування > розширення > ставимо галочку “режим розробника” > завантажити розпаковане розширення > вибираємо папку із нашим додатком.
Ура! Наш додаток тепер доступний на Chrome - панелі.
Попрацюємо над popup - вікном:
Верстаємо акумулятор:
popup/popup.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title></title>
<script src=”main.js”></script>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<div id=”batteryEnd”>
<div></div>
</div>
<div id=”batteryBody”>
<div id=”indicator”>
<span id=”status”></span>
</div>
</div>
</div>
</body>
</html>
Також додамо стилі у popup/style.css
.container {
font-family: Roboto, Noto, sans-serif;
width: 100px;
margin: 0 auto;
padding: 5px;
}
#batteryEnd {
width: 15px;
}
#batteryEnd div {
width: 35px;
height: 15px;
margin-left: 30px;
background-color: #CCC;
}
#batteryBody {
width: 75px;
height: 150px;
border: 10px #CCC solid;
}
#indicator {
width: 100%;
background-color: white;
}
Жмемо Cmd + R (Mac OS) або Ctrl + R (windows), щоб оновити наш додаток.
Покажемо рівень заряду посередині батарейки:
popup/popup.html
<div id=”indicator”>
<span id=”status”>70%</span>
</div>
popup/style.css
#status {
top: 80px;
position: relative;
text-align: center;
width: 100%;
font-size: 20px;
font-weight: 400;
display: block;
}
Закінчимо наш style.css набором класів для забарвлення батарейки відповідно до заряду.
popup/style.css
.full {
background-color: #BFFF00;
}
.good {
background-color: #BDE24D;
}
.medium {
background-color: #FFFF00;
}
.low {
background-color: #FFC800;
}
.empty {
background-color: #FF5200;
}
Перейдемо до JS
Щоб отримати інформацію про заряд акумулятора ми будемо використовувати Battery API, а саме navigator.getBattery() метод.
popup/main.js
navigator.getBattery()
.then((battery) => { // отримуємо battery object
let level = battery.level * 100; // переводимо десятковий дріб у число.
document.getElementById(‘status’).innerHTML = level.toFixed(0) + “%” // відображаємо рівень заряду у <span id="status"></span>
})
Результат:
(Результат точно співпадає із наявним рівнем заряду)
Напишемо функцію для підбору кольору:
const getStyle = (level) => {
if (level <= 10) {
return ‘empty’;
}
else if (level <= 20) {
return ‘low’;
}
else if (level <= 50) {
return ‘medium’;
}
else if (level <= 80) {
return ‘good’;
}
return ‘full’
}
Надамо відповідний клас для batteryBody та піднімемо indicator :
document.getElementById(‘batteryBody’).setAttribute(‘class’, getStyle(level))
document.getElementById(‘indicator’).style.height = 100 — level + ‘%’;
Фінальний вигляд popup/main.js:
const getStyle = (level) => {
if (level <= 10) {
return ‘empty’;
}
else if (level <= 20) {
return ‘low’;
}
else if (level <= 50) {
return ‘medium’;
}
else if (level <= 80) {
return ‘good’;
}
return ‘full’
}
navigator.getBattery()
.then((battery) => {
let level = battery.level * 100;
document.getElementById(‘status’).innerHTML = `${level.toFixed(0)}%`;
document.getElementById(‘indicator’).style.height = 100 — level + ‘%’;
document.getElementById(‘batteryBody’).setAttribute(‘class’, getStyle(level))
})
І результат:
Залишилось реалізувати сповіщення, коли заряд акумулятора менше 20%:
В файлі manifest.json рядком
“background”: {
“scripts”: [“background.js”]
},
ми вказали скріпт, який буде виконуватись у фоновому режимі при кожному запуску браузера. Напишемо трішки коду у background.js
background.js
navigator.getBattery()
.then((battery) => {
let level = battery.level * 100;
if (level <= 20 && !battery.charging) {
alert(‘Battery level is too low. You should connect your leptop to charge device’);
}
})
Як і у main.js, ми отримуємо рівень заряду і якщо він менше 20% + акумулятор не заряджається у даний момент - виводимо сповіщення.
Така перевірка пройде лише раз, при запуску браузера, тому обгорнемо все у setInterval():
let interval = setInterval(() => {
navigator.getBattery()
.then((battery) => {
let level = battery.level * 100;
if (level <= 20 && !battery.charging) {
alert(‘Battery level is too low. You should connect your leptop to charge device’);
clearInterval(interval);
}
})
}, 60000);
Тепер щохвилини наш додаток буде перевіряти рівень заряду, і, якщо він близький до мінімуму - виводитиме сповіщення:
Готово!
Якщо у Вас є аккаунт розробника (вартість — 5$), можна опублікувати додаток у Chrome web store, тоді Chrome не буде при кожному запуску пропонувати його відключити.
Код можна знайти тут (GitHub)
182 6
Коментарі:
1
Роман Федунишин
Привіт!
Мені цікаво як і де ти вивчав основи CSS i javascript.
Мені теж 16 тому буду радий відповіді!)
0
yarikgenza
Ну я самоучка) Основи вивчав на codeacademy.com, learn.javascript.ru. Node, RoR, React і тд - уже вчив з допомогою гугла/доків. Якщо цікаво - напиши мені у вк/фб.
1
OlegWock
4
yarikgenza
Дякую!
Я на кодегідці уже давненько. Тому дууужжеее радий її поверненню!
4
andreykko
yarikgenza, ми також раді цьому :)