Придумали интересное расширение для браузера, но не знаете с какой стороны подойти? Сейчас во всем разберемся!
Важно! Это первый урок из серии занятий по созданию расширений. Подпишитесь на канал, чтобы получить бесплатно все уроки и научиться мастерки писать расширения для браузеров Firefox и Google Chrome
Основы
Единственным главным элементом расширения является файл manifest.json. Он хранит полное и подробное описание вашего скрипта. Название, авторство, иконки, список скриптов, запрашиваемые разрешения.
Вот простейший пример:
Шучу, шучу... просто для красоты вставил картинку. В тексте код ниже.
{
"name": "Название расширения",
"description": "Текстовое описание расширения",
"version": "0.1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup.html"
}
}
Важные поля нашей конфигурации
manifest_version - версия структуры файла конфигурации. У Chrome появилась уже третья версия, у Firefox не знаю. Когда смотрел последний раз, еще не было. Поэтому продолжаю использовать вторую версию.
browser_action - здесь мы сообщаем браузеру, что нам потребуется добавление иконки в тулбар. default_popup указывает путь к html-файлу, который отобразиться во всплывающем окне при клике по иконке приложения.
Какие еще бывают важные опции
Из наиболее интересных, которые нам потребуются в ближайшее время:
content_scripts - указываем браузеру скрипты, которые работают с контентом сайтов. Например, в расширении для продавцов Ozone я добавлял новые кнопки в личном кабинете. Другой пример - комментарии в ВК. Когда понял, что они сильно отвлекают от работы, написал расширение полностью скрывающее комменты.
background - здесь мы указываем скрипты, которые будут выполняться фоном на уровне браузера. Обычные воркеры. Например, если мы хотим отслеживать открытие новых вкладок, нам потребуется именно это свойство.
permissions - список разрешений для расширения. Например, список сайтов с которыми будут работать контентные скрипты или запрос доступа к закладкам.
Завершим наше первое расширение
Для завершения, нам нужно создать файл popup.html рядом с файлом маниефста. Внутри обычный html:
<!DOCTYPE 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>Document</title>
</head>
<body>
<h1>Hello from Chrome Extension</h1>
</body>
</html>
Вот и все, наше первое расширение готов. Осталось открыть страничку расширений в браузере. Далее, если используете Chrome, то включить developer mode и загрузить распакованное расширение. В Firefox, на странице расширений жмем шестеренку, выбираем debug add-on и в новом окне жмем загрузить расширение.
Важно понимать, что расширение это три важных части:
- Манифест - обычный json-файл описывающий расширение
- HTML интерфейс - обычный HTML. Можно использовать чистый html, можно, например, тот же React или Vue.
- Скрипты - обычный JavaScript, который при необходимости взаимодействует с объетом браузера (подписывается на события, возбуждает события и.п.).