Превращаем @prisma-cms-компонент в chrome-плагин в несколько строк.

Всем привет! Сегодня будет довольно интересная статья с минимумом кода. Задача Разработать для браузера плагин, чтобы он сообщал о наличии непрочитанных уведомлений на сайте (чтобы не приходилось постоянно на сайте сидеть и не переживать, что пропустишь сообщение из-за того, что не в той вкладке находишься). Требования Наличие git, node-js, yarn и хотя бы 1.5 Gb свободной оперативки (делать мы мало будем, но сам компонент исходный немаленький и сборка его требует ресурсов). Внимание: я не проверял на окнах, работаю в убунте. Если у кого какие сложности возникнут, указывайте версию своей ОСи. В окнах работа совсем не гарантируется, но фикс проблемы не должен быть сложным (как правило сводится к настройке cross-env) Если у вас не стоит yarn, поставить его очень просто: За лайфхак спасибо Олегу Косныреву. Выполнение За основу возьмем @prisma-cms/society (про него и не только я писал здесь). Это самостоятельный компонента. Задача состоит в том, чтобы он мог в браузере работать как плагин, и чуть-чуть его видоизменить (нам же не нужен целый сайт в тулбаре? :)) 1. Качаем себе исходный проект. 2. Устанавливаем зависимости. 3. Скачиваем API-схему MODX-Клуба. Про этот прием я писал здесь. И хотя в том случае мы качали схему для локальной копии сайта Клуба, здесь примерно то же самое, только меньше, потому что мы не будем настраивать проксирование, а укажим . 4. Меняем API-адрес компонента. Для этого открываем файл/src/dev/App.js и меняем на то есть дописываем свой эндпоинт. Вообще в примере с клонированием сайта Клуба мы вносили правку в другом месте и совершенно другую, но здесь делаем именно так. Объясню: в том случае для работы сайта мы запускали node-сервис и там мы редактировали проксирование запросов, то есть все API-запросы и запросы картинок шли на локальный адрес /api/, а node-процесс уже проксировал их на конечный сайт, получая api-ответы и картинки. В нашем случае плагин будет работать без node-js и никаких прокси не будет, запросы будут напрямую слаться на сайт Клуба. Минус тут только в том, что картинок мы не получим, но это не столько важно, нам главное сейчас - уведомления. 5. Тестовый запуск компонента. Сначала мы проверим, что компонент в принципе работает, выполняется авторизация и мы можем видеть чат-комнаты и сообщения в них (и если у вас есть активные уведомления, то и их тоже). Для этого выполним Если все ОК, то у вас откроется браузер с адресом http://localhost:3000 и вы увидите мини-сайт, где сможете авторизоваться со своим modxclub-аккаунтом или зарегистрироваться (прям там, а аккаунт будет создан в базе MODX-Клуба) и можете посмотреть список чат-комнат и сообщений в них. Если все так и произошло, то можно переходить непосредственно к модификации компонента и упаковке его в гугл-плагин. 6. Создаем манифест. В корне проекта создаем файл manifest.json с таком содержимым: Все:) Да-да, теперь это можно билдить и заливать в браузер. 7. Билд плагина. Выполняем в корне проекта команду 8. Заливаем в браузер. В хроме заходим во вкладку "Настройки -> Дополнительные инструменты -> Расширения" chrome://extensions/. Включаем режим разработчика (в правом верхнем углу страницы есть переключатель). Слева появится кнопка "Загрузить распакованное расширение". Жмем эту кнопку, в проводнике находим папку с нашим приложением и жмем Открыть. Если ОК, то в списке расширений у вас появится MODX-Клуб а в панели браузера появится приложение с дефолтной иконкой. Кликните его, должно открыться вот такое безобразие. Это нормально. Просто здесь нет минимальной ширины экрана, поэтому оформление идет по содержимому, а у нас там сейчас почти ничего нет. Если в меню перейти в chat-rooms, то окно расширится по содержимому и уже будет больше похоже на правду. 9. Кастомизация. Ну а теперь нам надо его немного подогнать под себя, чтобы он обеспечил необходимый функционал и выглядел чуть получше. Мне по суди надо только две функции: 1. Авторизация. 2. Чтобы менялась иконка в браузере, показывая, что есть непрочтенные уведомления (и кол-во этих уведомлений). 3. Быстрый переход на сайт в целевую тему. Пока мы заниматься будем доработками, лучше это делать в обычном режиме веб-страницы, а не гугл-плагина. Упакуем мы его потом, когда все сделаем. Для этого, как и обычно, запустим через yarn start. В этом режиме при внесении любых изменений в код у нас автоматически страница в браузере будет перезагружаться и отладка кода более подробная. Зададим минимальную ширину и высоту. Вот сюда дописываем Теперь у нас всплывающее окошко не будет слишком мелким. Пункт меню Graphql Voyager удалим, так как в этом режиме он не работает и нет смысла разбираться почему. Добавляем абсолютные ссылки на комнаты и сообщения Это одно из парочки относительно больших изменений, хотя на самом деле не прям так чтобы вообще. Смысл в том, чтобы к относительным ссылкам на комнаты и сообщения добавить абсолютные ссылки, чтобы можно было перейти к ним непосредственно на сайт Клуба. Для этого открываем вот этот файл и меняем его содержимое на такое: Для тех, кто уже успел поработать с реактом, наверняка не составит труда понять что здесь для чего меняется. Примерно то же самое делаем и для ссылок на сообщения. Все, теперь есть внешние ссылки у комнат и сообщений. Вместо заключения Вообще здесь должно было быть еще небольшое описание как вывести в панель браузера иконку что есть непрочитанные уведомления и выводить системные сообщения о новых уведомлениях, но с этим я закопался сегодня на 15 часов :) Подводные камни... Дело в том, что всплывающие интерфейсы, которые были описаны выше - это один процесс, который работает только тогда, когда это окошко выведено. А для уведомлений нужен другой - фоновый процесс. За этим потянулось еще куча всего, включая авторизация и реконнект веб-сокетных соединений и прочее. Последовало много работы. Я это все победил, но статью по этому поводу уже напишу позже. Вот картинка что на выходе получилось. Если себе хотите такие же уведомления, вот готовое расширение для хрома: https://yadi.sk/d/9hWkWOL0ZtGwrQ. Как его устанавливать, я писал выше. Распаковываете его и устанавливаете. После установки надо будет нажать иконку и авторизоваться в интерфейсе. После этого надо перезапустить приложение там же в списке расширений браузера (это чтобы веб-сокетное соединение установилось). К сожалению удобней пока не сделал, но перезапустить надо будет только один раз после авторизации. В итоге вы должны тогда увидеть сообщение "Приложение активировано". Исходники проекта здесь: https://github.com/prisma-cms/society-chrome-extension.