Почему расширения Chrome важны

Chrome — один из самых популярных браузеров, и он предлагает крупнейшую аудиторию для расширений. Если вы знакомы с HTML, CSS и JavaScript, вы уже почти готовы сделать своё первое расширение. В этой статье мы создадим самое простое расширение — иконка в тулбаре, по клику которой откроется небольшое всплывающее окно (popup).

Важно: эта инструкция показывает минимальную структуру и базовый «Hello World». Для продвинутых сценариев и рекомендаций по безопасности смотрите официальную документацию Chrome.

Что понадобится

• Базовые знания HTML, CSS и JavaScript.
• Текстовый редактор (VS Code, Sublime и т. п.).
• Папка проекта для файлов расширения.
• Иконка формата PNG (например, 128×128 или 16×16 для тулбара).

Структура проекта

Создайте папку с именем вашего расширения, например Hello World. В ней будут как минимум три файла:

• icon.png — иконка расширения.
• manifest.json — манифест расширения, описывающий Chrome, что делать.
• popup.html — содержимое всплывающего окна.

manifest.json — «паспорт» расширения

Манифест описывает, какие файлы загружать, какие разрешения нужны и как взаимодействовать с пользователем. Ниже — минимальный пример манифеста на основе Manifest V2 (как в исходной статье). Обратите внимание на раздел «permissions» и «browser_action», которые управляют поведением в тулбаре.

{
  "manifest_version": 2,
  "name": "Hello World!",
  "description": "My first Chrome extension.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

Ключевые поля:

• manifest_version — версия формата манифеста (в примере указана 2).
• name — название, отображаемое в магазине и в chrome://extensions.
• description — краткое описание.
• version — семантическая версия расширения.
• browser_action — задаёт иконку в тулбаре и поведение по клику.
• default_icon — путь к иконке внутри папки расширения.
• default_popup — HTML-файл, который откроется при клике.
• permissions — запрашиваемые права; activeTab позволяет временно получить доступ к активной вкладке.

Подсказка: внимательно подходите к списку разрешений — чем меньше разрешений, тем выше вероятность доверия со стороны пользователей и меньше вероятность отказа при публикации.

popup.html — содержимое всплывающего окна

Ниже — простой HTML для popup. Обратите внимание: popup работает как обычная страница, но с ограничениями безопасности контекста расширения.

  
  
  


  
Hello World!

Если нужно подключить дополнительные скрипты или стили, их обычно декларируют в manifest.json как content_scripts или подключают внутри popup.html как обычные теги