Создание простого расширения Chrome от начала до конца
Создание расширения для Chrome не только просто, но и является отличным способом применить на практике основные принципы веб-разработки! В этой статье я расскажу вам, как создать простое расширение для напоминаний о позе для Chrome.
Все, что вам нужно, это базовые знания HTML, CSS и JS, и с этим все готово!
Что такое расширение Chrome?
Проще говоря, расширения Chrome — это дополнения к вашему браузеру Chrome. Эти программы улучшают работу с Chrome и написаны на HTML, CSS и Javascript. Вы можете найти и установить их через Интернет-магазин Chrome. Как видите, они могут быть чрезвычайно мощными, но сегодня мы будем придерживаться основ.😊
Что мы создаем?
Как и многие, у меня есть склонность горбиться, когда я работаю за своим столом в течение долгих часов, вызывая сильную боль в шее и спине. Вот почему мы собираемся создать расширение для Chrome, которое время от времени будет напоминать нам (посредством уведомлений) о необходимости сидеть прямо.
Готовый? Давайте начнем.
Начало работы в режиме разработки
Начнем с настройки среды разработки.
ШАГ 1 — подготовка основы
Создать новый каталог
mkdir simple_chrome_extension
Затем создайте файл с именем manifest.json.
touch manifest.json
👉 Что такое manifest.json?Каждому расширению Chrome требуется этот файл манифеста в формате JSON. По сути, это файл метаданных, который содержит обязательную и необязательную информацию о вашем расширении. (название расширения, описание, версия, разрешения) Посмотреть полный список здесь
Теперь откройте ваш любимый редактор кода. Сейчас мы заполним файл manifest.json следующим:
{
"manifest_version": 2,
"name": "Simple chrome extension",
"version": "0.1",
"description": "Simple posture reminder :)",
"icons": {
"16": "icon/16.png",
"32": "icon/32.png",
"192": "icon/192.png"
},
"permissions": [],
"browser_action": {
"default_title": "Posture popup",
"default_popup": "popup.html",
"default_icon": {
"16": "icon/16.png",
"32": "icon/32.png",
"192": "icon/192.png"
}
}
}
👉 Что такое browser_action? Расширение Chrome может использовать либо действия страницы , либо действия браузера (не оба!). Действия со страницей — это действия, выполняемые на текущей странице, в то время как действия браузера не относятся к странице и применяются ко всему браузеру. Это означает, что действия в браузере могут иметь всплывающую подсказку, значок или всплывающее окно. Вот чего мы хотим!
👉 Почему так много значков?16, 48 и 128 — это значки разного размера (16 x 16 пикселей и т. д.), предоставленные Chrome. Chrome выберет лучший значок для отображения.
Теперь давайте создадим новый файл с именем popup.html в корневом каталоге.
<html>
<body>
<header>
Simple chrome extension
</header>
</body>
</html>
И, наконец, давайте добавим те изображения, которые мы упомянули в manifest.json, в папку icon. Вы можете использовать любую иконку на ваш выбор, но вот несколько готовых, которые я собрал, которые вы можете скачать здесь
К настоящему времени ваш каталог должен выглядеть так:
| simple_chrome_extension
| icon
| 16.png
| 32.png
| 192.png
| manifest.json
| popup.html
ШАГ 2. Запуск расширения
Отлично, теперь мы готовы запустить расширение. Перейдите в chrome://extensions/, переключите Режим разработчика в правом верхнем углу и нажмите Загрузить распакованноев верхнем левом углу. Импортируйте папку simple_chrome_extension.
На этом этапе вы должны увидеть расширение Chrome на странице расширения и на панели инструментов!
Теперь любые изменения, которые вы вносите в свою папку, будут напрямую отображаться (в большинстве случаев, я немного объясню) в вашем расширении для разработки.
Написание кода
ШАГ 3. Установка интервала времени между напоминаниями
Здорово! Теперь давайте добавим немного функциональности.
Во-первых, давайте добавим этот фрагмент кода в popup.html.
<html>
<body>
<form>
<span class="time-text" id="time-text"> Remind me every
<input type="number" name="time" id="time" value="0.1" max="59" maxlength="2" />minutes
</span>
<div>
<input type="submit" value="Update" id="submit" />
</div>
</form>
</body>
</html>
👉 Почему для входных данных задано значение 0,1?Это сделано для целей тестирования, чтобы мы могли сразу увидеть всплывающее уведомление, а не ждать x минут!
Затем создайте новую папку в корневом каталоге с именем js и добавьте файл с именем popup.js. Здесь мы напишем логику, которая будет действовать в зависимости от того, что пользователь ввел во всплывающем окне.
Но прежде чем мы это сделаем, давайте воспользуемся случаем и добавим jQuery. Загрузите jQuery здесь, добавьте файл в папку js и переименуйте файл в jquery.js.
Теперь последнее, прежде чем мы добавим код — давайте импортируем наши файлы скриптов в popup.html следующим образом:
<html>
<body>
<form>
<span class="time-text" id="time-text"> Remind me every
<input type="number" name="time" id="time" value="0.1" max="59" maxlength="2" />minutes
</span>
<div>
<input type="submit" value="Update" id="submit" />
</div>
</form>
</body>
<script src="/js/jquery.js"></script>
<script src="/js/popup.js"></script>
</html>
Теперь вернемся к popup.js. Давайте добавим следующий код
'use strict';
function setAlarm() {
let minutes = parseFloat($("#time").val())
chrome.alarms.create('reminderAlarm', {
periodInMinutes: minutes
})
window.close()
}
$("#submit").click(setAlarm)
Здесь мы добавляем событие к кнопке отправить таким образом, чтобы при ее нажатии мы настраивали частоту уведомлений на основе значения, которое пользователь установил в поле ввода.
👉 Что такое chrome.alarms?Chrome.alarms API используется здесь для планирования периодического запуска кода или в указанное время в будущем. Здесь мы сообщаем Chrome запускать reminderAlarm каждые минуты с промежутком времени (через поле periodInMinutes). Можете ли вы догадаться, какое у нас начальное значение? является? Подсказка: это в popup.html
ШАГ 4. Добавление фонового сценария
Теперь, когда у нас есть будильник, срабатывающий с заданной частотой, нам нужно создать фактическое всплывающее окно с уведомлением в Chrome, когда срабатывает будильник. Это будет сделано в новом файле. Создайте файл с именем background.js в папке js и добавьте следующий код:
'use strict';
chrome.alarms.onAlarm.addListener(function() {
chrome.notifications.create({
type: 'basic',
iconUrl: 'icon/32.png',
title: 'Keep your back straight!',
message: 'A friendly reminder to sit up straight.',
priority: 0});
});
Уведомления будут создаваться с помощью API chrome.notifications. Вы можете прочитать больше об этом здесь". Не стесняйтесь персонализировать заголовок и сообщение.
👉 Зачем создавать для этого отдельный файл background.js?На самом деле это фоновый скрипт, который мы собираемся запустить в нашем расширении Chrome. Фоновый скрипт может реагировать на события браузера и выполнять определенные действия. Фоновая страница загружается, когда она нужна, и выгружается, когда простаивает. В нашем случае фоновый скрипт загрузится при первой установке расширения, поэтому убедитесь, что вы удалили и перезагрузили расширение Chrome, когда вносите изменения в этот файл!
Наконец, давайте импортируем фоновый скрипт в наш файл manifest.json:
{
"manifest_version": 2,
"name": "Simple chrome extension",
"version": "0.1",
"description": "Simple posture reminder :)",
"icons": {
"16": "icon/16.png",
"32": "icon/32.png",
"192": "icon/192.png"
},
"permissions": [
"notifications",
"alarms"
],
"background": {
"scripts": [
"/js/background.js"
],
"persistent": false
},
"browser_action": {
"default_title": "Posture popup",
"default_popup": "popup.html",
"default_icon": {
"16": "icon/16.png",
"32": "icon/32.png",
"192": "icon/192.png"
}
}
}
👉 Что такое разрешения?Для большинства, если не для всех chrome.* API, вы должны объявить их назначение в поле разрешения. Это потребуется при публикации расширения.
На этом этапе ваш каталог должен выглядеть так:
| simple_chrome_extension
| icon
| 16.png
| 32.png
| 192.png
| js
| background.js
| jquery.js
| popup.js
| manifest.json
| popup.html
ШАГ 5. Проверка того, что все работает нормально
Вы сделали это до сих пор! Теперь проверим нашу работу. Повторите шаги ШАГА 2, чтобы переустановить расширение (поскольку мы внесли изменения в фоновый сценарий). После установки, если вы нажмете на расширение Chrome на панели инструментов и нажмете Обновить, через несколько секунд вы увидите всплывающее уведомление, подобное этому.
Великолепный! Все работает. Просто убедитесь, что вы изменили начальное значение времени ввода на что-то вроде этого, чтобы не получать спам с уведомлениями:
<!-- popup.html -->
<html>
<body>
<form>
<span class="time-text" id="time-text"> Remind me every
<input type="number" name="time" id="time" value="5" max="59" maxlength="2" />minutes
</span>
<div>
<input type="submit" value="Update" id="submit" />
</div>
</form>
</body>
<script src="/js/jquery.js"></script>
<script src="/js/popup.js"></script>
</html>
🎉 И всё! Вы сделали это, поздравляю! 🎉
Куда пойти отсюда
Теперь, когда вы настроили каркас, вы можете двигаться дальше с гораздо большей легкостью. Вот список предложений:
- Добавьте свой собственный стиль во всплывающее окно с помощью CSS
- Добавьте в расширение дополнительные функции, такие как ВКЛ/ВЫКЛ, звук и т. д.
- Опубликуйте свое расширение! Всю необходимую информацию вы можете найти здесь
Спасибо, что выдержали до конца, нажмите 👏, если вам понравилось. Я надеюсь, что это руководство было полезным. Используя этот каркас, я добавил некоторые дополнительные функции и опубликовал расширение для Chrome. Не стесняйтесь проверить это и дать мне звезду здесь:
https://github.com/meko-deng/sit-better-extension
Вклад более чем приветствуется!
До следующего раза — ура! 🥂
