Chrome — самый популярный веб-браузер на планете. Согласно исследованию доли рынка настольных браузеров, проведенному Statcounter, по состоянию на конец 2017 года Chrome занимает колоссальные 65% рынка место среди настольных браузеров.
Поскольку такая сила определяет рынок, разработка для Chrome стала приоритетом. То же самое касается и расширений: Chrome предлагает самую большую базу пользователей расширений: в Интернет-магазине Chrome представлены десятки тысяч расширений, тем и приложений.
Если вы хотите воспользоваться этой тенденцией, вы можете создать собственное базовое расширение Chrome. Вам потребуются лишь базовые навыки веб-разработки (HTML, CSS и Javascript), а также чайная ложка JSON, чтобы связать все это воедино.
В этом посте мы рассмотрим самую базовую структуру, необходимую для создания базового расширения Chrome. Чтобы получить более подробное представление о доступных возможностях, посетите Руководство по расширениям для разработчиков Chrome.
Написание базового расширения Chrome: манифест судьбы
В этом руководстве мы создадим базовое расширение Chrome, которое при нажатии отображает простое всплывающее сообщение. Нам понадобится пара важных файлов: значок («icon.png»), HTML-файл («popup.html») и самый важный манифест («manifest.json»). Все эти файлы будут находиться в каталоге с именем вашего расширения. В данном случае это называется «Hello World».
Расширение Chrome определяется его манифестом. Этот фрагмент JSON показывает Chrome, как интерпретировать расширение, какие файлы загружать и как взаимодействовать с пользователем.
Файл манифеста
Contents
Написание базового расширения Chrome: манифест судьбы
>{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }Этот файл манифеста поместит значок на панель инструментов пользователя, при нажатии на который загружается содержимое файла с именем «popup.html». Ниже приводится подробная информация об остальном содержимом:
manifest_versionсообщает Chrome, с какой версией разметки манифеста вы работаете. Для современных расширений вам необходимо установить значение2.nameотображает имя, которое расширение будет показывать в магазине Chrome, и «chrome://extensions».descriptionпоказывает описательный текст, отображаемый в «chrome://extensions».browser actionзагружает значок на панель инструментов. Это также позволяет расширению реагировать на ввод пользователя, отображая всплывающую подсказку, всплывающее окно или значок. Посмотрите полный список всего, что может сделать «browser_action» .default_iconпоказывает путь к значку из каталога расширения.default_popupпоказывает путь к файлу, который будет загружаться при нажатии на значок расширения.permissionsограничивает функциональную область расширения.activeTab— наиболее распространенный вариант, позволяющий расширению получить доступ к самой передней вкладке. Google предоставляет список из все разрешения, которые может запросить расширение .
Если вы хотите подробно изучить все, что может объявить манифест расширения Chrome, ознакомьтесь с разделом Документы Google по манифестам расширений .
Написание базового расширения Chrome: всплывающие окна
Теперь, когда мы написали манифест, мы можем выяснить, что будет отображать наше расширение. Это зависит от нашего файла «popup.html», который будет отображаться при загрузке расширения. Вот что мы будем использовать для этого проекта:
<!doctype html> <html> <head> <title>Hello World</title> </head> <style type="text/css"> body { margin: 5px; } h1 { font-size: 15px; text-align: center; } </style> <body> <h1>Hello World!</h1> </body> </html>
Как видите, это отобразит текст, стилизованный с помощью CSS. Если вы хотите добавить Javascript или внешний CSS в свое расширение, для этого необходимо объявить сценарии в манифесте под ключом content_scripts. После того как ссылка на это будет указана в манифесте, вы сможете загружать эти сценарии, как обычно.
Написание базового расширения Chrome: загрузка в Chrome
После того как мы написали базовый код для нашего расширения и нашли подходящий значок, мы можем загрузить его в Chrome.
1. Перейдите к «chrome://extensions» и включите «Режим разработчика», установив флажок в правом верхнем углу.
2. Нажмите кнопку «Загрузить распакованное расширение…» и выберите каталог расширения.
3. Как только расширение загрузится, вы увидите его значок в строке меню.
4. Нажмите на расширение, чтобы увидеть его (очень простой) эффект.<
Написание базового расширения Chrome: всплывающие окна
t/uploads/2024/05/build-a-chrome-extension-load-extension-4.png" alt="build-a-chrome-extension-load-extension-4">Вывод: расширение расширения Chrome
Как только вы закончите работу с расширением и будете готовы к публикации, вам необходимо будет создать учетную запись разработчика Chrome. Это не совсем простой процесс, но Google предоставляет полные инструкции по публикации расширения Chrome здесь. .
Очевидно, что с расширением Chrome можно сделать гораздо больше, но это выходит за рамки данной статьи. Если вы хотите узнать больше обо всем, что могут расширения Chrome, посетите Google Руководство по расширениям для разработчиков Chrome.
