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

На самом деле, любой сайт или web-app можно обернуть в расширение. Это означает, что вы можете запрограммировать сайт самостоятельно или найти open source именно веб-сервиса (т.е. не обязательно искать open source расширения!) и очень быстро упаковать этот веб-сервис в расширение.
💡
Вообще сайт и расширение могут очень эффективно работать в паре. Ведь сайт можно встроить в расширение, а затем добавить дополнительные виджеты, которые возможны только в расширении.
В придачу такая реализация сможет привлечь значительно больше пользователей за счет оптимизации в CWS, чем сайт в одиночку.
  • В чем суть таких расширений: нажимаем на иконку расширения, расширение открывает сайт-сервис в отдельной вкладке.
  • Когда выбирать такую реализацию: универсальный тип расширений, который подходит и простым, и сложным продуктам.
    • 💡
      У такого типа расширений есть 2 бонуса:
      • На сайте можно будет выкатывать любые апдейты без модерации CWS.
      • На сайте можно будет поставить стандартную web-аналитику для сайтов.
  • Реальные примеры продуктов из CWS:
    • Annotate PDF – нажимаем на иконку расширения, расширение открывает сайт-сервис для редактирования pdf-файлов:
      • notion image
    • Подписать документ электронной подписью – нажимаем на иконку расширения, расширение открывает сайт-сервис для подписания документов электронной подписью (кстати, редкий пример продукта из буткемпа чисто под российский рынок):
      • notion image
💡
Если быть точнее, модерация не пропускает расширения, единственная функция которых – это открыть сайт. Поэтому такие расширения всегда имеют дополнительные модули, без которых их бы не пропустила модерация. Но эти модули очень простые.
Например, Annotate PDF из примера выше также добавляет артефакт на все страницы, которые оканчиваются на .pdf . По клику на этот артефакт расширение прогружает pdf-файл на сайт annotatepdf.io и сразу открывает этот файл в редакторе сайта:
notion image

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

В таких расширениях необходимо сначала запрограммировать сайт-сервис, а затем его будет очень легко упаковывать в расширение.
Для того, чтобы сайт открывался по клику на иконку расширения:
  1. Создаем вот такой manifest.json:
    1. { "manifest_version": 3, "name": "Example", "version": "1.0", "background": { "service_worker": "background.js" }, "action": { "default_popup": "" } }
      manifest.json
  1. Затем в background.js добавляем простой скрипт, который открывает сайт по клику на иконку расширения:
    1. chrome.action.onClicked.addListener((tab) => { chrome.tabs.create({ url: "https://example.org" }); // link to your website });
      background.js
  1. Все заработает, но как было указано выше, этого функционала будет недостаточно, чтобы пройти модерацию.
    1. Для прохождения модерации нужно придумать и добавить какие-то дополнительные вспомогательные виджеты на страницы, которые способны добавлять только расширения, как в примерах выше.