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

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

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

💡

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

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

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

AI Plagiarism Checker – нажимаем на иконку расширения, расширение открывает локальную страницу, где можно проверить контент на AI:

Создаем sample-расширение

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

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

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


{
    "manifest_version": 3,
    "name": "Example",
    "version": "1.0",
    "background": {
      "service_worker": "background.js"
    },
    "action": {
      "default_popup": ""
    }
}

manifest.json

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

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

В качестве примера создадим страницу hello.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>

hello.html

Затем в background.js добавляем скрипт, который открывает локальную страницу по клику на иконку расширения:


chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.create({ url: "hello.html" });
});

background.js

💡

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

Расширения, которые открывают локальную страницу в отдельной вкладке

Создаем sample-расширение