Расширение Chrome — отличный инструмент для обогащения и управления работой браузера пользователя. Многие компании также используют его в качестве расширения своего основного приложения для повышения вовлеченности пользователей. Но основная проблема, с которой сталкиваются многие разработчики при создании расширения Chrome, заключается в том, что почти все учебные пособия, представленные в Интернете, используют ванильный JavaScript. Это действует как препятствие для разработчиков, привыкших использовать библиотеки, такие как React, для ускорения процесса разработки.
Поэтому, чтобы помочь им, в этой статье описывается четырехэтапный процесс создания расширения Chrome с использованием React. Итак, приступим!
Извлечь из пакета создания приложения React
В первую очередь надо катапультироваться из КРА. Для этого выполните следующую команду в каталоге src.
npm run eject
Если вы используете пряжу, вы можете использовать
yarn eject
Изменение manifest.json
CRA уже предоставил нам шаблонный файл manifest.json в каталоге project_directory/public/. Хотя целью этого manifest.json является поддержка функций PWA (чтобы узнать больше, попробуйте эту ссылку), мы все же можем изменить его как manifest.json нашего расширения Chrome. Чтобы получить базовый скелет для вашего manifest.json, вы можете скопировать его отсюда. Теперь измените массив Content Script, чтобы он содержал выходные файлы нашей сборки.
Удалить динамический хэш из webpack.config.js
Предварительно настроенный Webpack CRA предоставляет встроенную поддержку для создания хэшированных выходных файлов. Чтобы убедиться, что эти файлы имеют одно и то же имя каждый раз, когда мы собираем проект, нам нужно удалить тег [contenthash:8] из всех файлов .js и .css в каталог_проекта/config/webpack.config.js. Это упростит отображение выходных файлов в файле manifest.json.
Добавить приложение React в DOM как сценарий содержимого
Теперь в вашем index.js вам нужно предоставить точку входа, к которой мы можем добавить наше реагирующее приложение. Для этого мы добавим его к тегу body в DOM целевой веб-страницы.
Здесь мы добавили наш узел div с идентификатором «extension-div» к тегу body в DOM в качестве дочернего элемента. Это прикрепит наше приложение к веб-странице, на которой запущено расширение.
Чтобы использовать любой Chrome Extension API, добавьте /global chrome*/ вверху файла js. Также вы можете добавить файл background.js в свой каталог project_directory/public/.
Вот и все! Я надеюсь, что вы найдете эту статью полезной. Не стесняйтесь комментировать ниже любые вопросы, касающиеся настройки.
