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

В чем суть таких расширений: нажимаем на иконку расширения, расширение открывает попап со своим функционалом.

Когда выбирать такую реализацию: для продуктов с небольшим интерфейсом, который уместится в небольшой прямоугольник попапа. Также часто (не не всегда) используется в случае, если расширение взаимодействует с сайтом и его интерфейс логично разместить поверх интерфейса этого сайта.

Реальные примеры продуктов из CWS:

Convert WebP to JPG – маленькое расширение, в который можно скинуть WebP-файл, а на выходе загрузится JPG или PNG картинка:

Audio & Voice Recorder – миниатюрное расширение, которое позволяет в 1 кнопку записывать звук с микрофона или браузера, или сразу из обоих источников:

Make QR Code – небольшое расширение, позволяющее создать QR-код из адреса сайта, на котором сейчас находится пользователь или прочитать сторонний QR-код:

BPM Finder – миниатюрное расширение, позволяющее определить количество ударов в секунду в музыкальном произведении, которое сейчас слушает пользователь:

С точки зрения разработки все очень похоже на разработку локальной страницы, которая открывается в отдельной вкладке. Тут также придется заморочиться с выводом всех библиотек и скриптов локально (модерация не разрешает, чтобы в локальных файлах расширения были remote-hosted скрипты).

Для того, чтобы попап открывался по клику на иконку расширения:

В manifest.json также прописываем action:


{
  "manifest_version": 3,
  "name": "Example",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

manifest.json

Создаем страницу с логикой нашего продукта.

Продукт можно написать с нуля, найти open source или портировать логику из сайта-сервиса в этот локальный файл.

В качестве примера создадим попап popup.html c текстом Hello, World!:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

popup.html

💡

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

Часто попап-расширения взаимодействуют с сайтом, поверх которого открывается попап. Для этого они прокидывают на сайт контент-скрипты, которые создают виджеты на этом сайте. В следующем уроке посмотрим на некоторые нюансы по встраиванию скриптов и виджетов на сайты.

Расширения, которые открывают попап