Пишемо розширення для Chrome з Battery API

3 хв. читання

Привіт, кодегідці! Мене звуть Ярик, мені 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



 <meta charset=""UTF-8"">
 <title></title>
 <script src=""main.js""></script>
 <link href=""style.css"" rel=""stylesheet"">


  <h1>Hello world!</h1>


Час поглянути, що у нас вийшло:

Сhrome > налаштування > розширення > ставимо галочку "режим розробника" > завантажити розпаковане розширення > вибираємо папку із нашим додатком.

Ура! Наш додаток тепер доступний на Chrome - панелі.

Пишемо розширення для Chrome з Battery API

Попрацюємо над popup - вікном:

_Верстаємо акумулятор: _

popup/popup.html



  <meta charset=""UTF-8"">
  <title></title>
  <script src=""main.js""></script>
  <link href=""style.css"" rel=""stylesheet"">


<div class=""container"">
  <div>
    <div></div>
  </div>
  <div>
     <div>
       <span id=""status""></span>
     </div>
  </div>
</div>


Також додамо стилі у 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), щоб оновити наш додаток.

Пишемо розширення для Chrome з Battery API

Покажемо рівень заряду посередині батарейки:

popup/popup.html
<div>
  <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>
 })

Результат:

Пишемо розширення для Chrome з Battery API

(Результат точно співпадає із наявним рівнем заряду)

Напишемо функцію для підбору кольору:

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))
 })

І результат:

Пишемо розширення для Chrome з Battery API Пишемо розширення для Chrome з Battery API

Залишилось реалізувати сповіщення, коли заряд акумулятора менше 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);

Тепер щохвилини наш додаток буде перевіряти рівень заряду, і, якщо він близький до мінімуму - виводитиме сповіщення:

Пишемо розширення для Chrome з Battery API

Готово!

Якщо у Вас є аккаунт розробника (вартість — 5$), можна опублікувати додаток у Chrome web store, тоді Chrome не буде при кожному запуску пропонувати його відключити.

Код можна знайти тут (GitHub)

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.7K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація

Читайте також: status github, github status, js if return