Теперь, когда мы узнали о различных типах расширений, давайте посмотрим, как мы можем создать наше первое расширение для браузера.
В этой статье мы создадим расширение, которое изменит цвет тела на каждой странице на розовый.
Потому что розовый — отличный цвет.
Схема расширения браузера
Браузерные расширения функционируют благодаря тому, что называется манифестом.
Это JSON-файл, который содержит все конкретные данные о расширении.
В нем указаны метаданные расширения и фактическое содержимое, которое оно должно запускать.
Давайте создадим новую папку и перейдем в нее.
mkdir pinkify-extension && cd pinkify-extension
Следующим шагом будет создание файла manifest.json, который станет мозгом этой операции.
Внутри него разместите следующую информацию.
{
"manifest_version": 2,
"name": "Pinkify",
"version": "1.0",
"description": "Convert any page to a pinkish page 💖",
"icons": {
"48": "icons/pinkify-48.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["pinkify.js"]
}
]
}
Как видите, здесь содержится довольно много данных о приложении.
Более подробно мы рассмотрим content_scripts позже.
Вы можете поместить образец иконки размером 48×48 пикселей в корневой каталог.
Затем вы можете добавить файл скрипта, который называется pinkify.js, и поместить в него следующую строку кода.
document.body.style.setProperty('background', '#FDF2F7');
Это установит цвет фона тела на светло-розовый.
Примечание: я не добавлял никаких перезаписей, поэтому если на странице уже установлен цвет тела, он не будет активирован.
Тестирование вашего расширения
Мы не хотим публиковать его в магазинах, не протестировав наше расширение, поэтому давайте посмотрим, что нужно сделать, чтобы попробовать его локально.
Я предпочитаю использовать Chrome, так как он имеет более быстрый интерфейс.
В Chrome нажмите кнопку «Плагины» и откройте страницу.
Затем включите режим разработчика. У вас появится еще одно меню, в котором вы сможете выбрать опцию загрузки распакованных расширений.
Нажмите кнопку загрузить распакованные и перейдите в папку pinkify-extension.
После загрузки вы должны увидеть что-то вроде этого:
Теперь перейдите на сайт google.com или любую другую веб-страницу, и вы должны увидеть активированный розоватый фон.
Удивительно, но вы создали свое первое в жизни расширение для браузера. Как видите, это не так сложно, как можно подумать.
В следующих статьях мы создадим несколько более продвинутых расширений.
Код сегодняшней статьи вы можете найти в следующем репозитории GitHub.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь на Facebook или Twitter.