Узнайте, как создать расширение Chrome в целом и как создать интерфейсную часть вашего приложения с помощью React.
Создание собственных расширений Chrome проще, чем многие могут подумать. И это очень весело. Мы можем дать волю своему творчеству и изменить каждый веб-сайт так, как мы этого хотим.
В этой статье я начну с того, что покажу вам, как настроить расширение Chrome в целом. После этого мы настроим приложение React и загрузим его на любой веб-сайт.
Настраивать
Прежде чем мы начнем, давайте создадим две подпапки в нашем репозитории: extension и react-chrome-app. Папка extension будет содержать наши файлы расширения chrome, и мы создадим приложение реакции в react-chrome-app каталог.
Структура должна выглядеть так:
Настройка расширения Chrome
Давайте погрузимся прямо в настройку нашего расширения Chrome. Прежде всего, нам нужно создать файл manifest.json. Мы создадим файл в нашей подпапке extension.
Манифест — это точка входа нашего расширения, которая определяет метаданные, такие как имя и версия, а также дополнительные функции.
Создать файл manifest.json
Давайте создадим manifest.json и добавим некоторые метаданные:
Первые три значения name , version и manifest_version достаточны для создания нашего первого расширения Chrome.
Установите расширение
Откройте браузер Chrome и перейдите к chrome://extensions.
Включите режим разработчика, нажав переключатель рядом с Режим разработчика. Нажмите кнопку «Загрузить распакованное» и выберите каталог extension нашего репозитория, содержащий ourmanifest.json.
Поздравляем! Вы только что создали расширение Chrome!
Настроить React-приложение
Теперь давайте настроим наше приложение React в подпапке нашего репозитория.
Мы можем сделать это, запустив:
npx create-react-app react-chrome-app --template typescript
or
yarn create create-react-app react-chrome-app --template typescript
Теперь давайте избавимся от всего ненужного. Удалим все стили CSS и код шаблона React в компоненте App.tsx. Для этой статьи давайте добавим к нашему компоненту простой "Привет из приложения React"headline :
Если вы хотите включить стили, вы должны использовать styled-components, чтобы включить их в пакет Javascript.
Поскольку мы хотим включить приложение React в наше расширение Chrome, нам нужно настроить, как React настраивает наше приложение. Для этого нам нужно заглянуть в файл index.tsx:
Здесь мы видим, что React создает корень React для элемента с id="root". Затем корневой элемент используется для рендеринга нашего компонента React App.tsx в DOM с помощью render. React предполагает, что корневой элемент существует, потому что он находится в нашем файле index.html. Как только элемент не может быть найден, наше приложение завершится ошибкой.
Чтобы использовать наше приложение на любом веб-сайте, мы больше не можем предполагать, что корневой элемент существует. Вот почему мы создадим наш собственный корневой элемент программно перед рендерингом приложения React.
Мы создаем новый элемент div, передаем свой собственный идентификатор и добавляем элемент HTML в качестве дочернего элемента к body документа. Затем мы можем передать rootElement функции createRoot.
Наконец, давайте создадим элемент style и добавим его к нашему rootElement, чтобы расположить его в левой части экрана. Вот как выглядит окончательный код в нашем файле index.tsx:
Включить приложение React в расширение Chrome
В начале мы уже установили наше расширение. Тем не менее, в настоящее время он ничего не делает, потому что мы не добавили функциональность в наш manifest.json .
Создайте сценарий контента
Чтобы включить наше приложение React из расширения на любую веб-страницу, нам нужен способ чтения DOM и внесения в него изменений.
Для этого создадим контент-скрипт:
Скрипты контента живут в изолированном мире, что позволяет скрипту контента вносить изменения в свою среду JavaScript, не конфликтуя со скриптами контента страницы или других расширений. —developer.chrome.com
Для начала давайте создадим файл content.js с предупреждением, чтобы убедиться, что наше расширение успешно загружает скрипт. Этот файл будет действовать как наш контент-скрипт.
Скрипт content.js является точкой входа нашего расширения. Давайте настроим наш manifest.json для внедрения нашего скрипта:
Чтобы использовать наш статически объявленный скрипт content.js, нам нужно зарегистрировать его в поле content_scripts. В этом поле необходимо определить атрибут required matches, чтобы указать, на какие страницы будет внедрен скрипт содержимого. Для этого можно задать несколько паттернов соответствия. Мы будем использовать специальный шаблон <all_urls> для соответствия любому URL-адресу, который начинается с разрешенной схемы, например http или https .
Мы также определяем необязательное поле js. Здесь мы определяем наши скрипты, которые будут внедрены в соответствующие страницы.
Давайте обновим наше расширение, нажав кнопку обновления расширения на chrome://extensions. Теперь мы можем перейти на любую страницу, и если все сделано правильно, при загрузке страницы должно появиться предупреждение.
Худшее расширение Chrome, верно? Давайте продолжим и включим React.
Создайте сценарий содержимого React
Давайте создадим наше приложение React, работающее под управлением yarn build или npm run build.
Вы должны увидеть, что скрипт сборки react-scripts создает несколько файлов Javascript в папке build/static/js/:
Файл main.3c11b729.js является нашим входным файлом и включает сгенерированный хэш в имени файла. В сгенерированном index.html будет загружен основной файл:
Теперь мы хотим загрузить основной файл не из index.html, а в нашем расширении Chrome в виде скрипта контента.
Обратите внимание, что наша сборка также содержит файл фрагмента, который загружается основным файлом. Помещать множество файлов JavaScript с хэшами в именах в наш manifest.json — не лучшее решение. Поэтому мы настроим Webpack для создания единого пакета JavaScript для нашего приложения.
Настроить веб-пакет
Прежде всего, нам нужно установить webpack. Мы можем сделать это, запустив:
yarn add -D webpack ts-loader webpack-cli
or
npm i -D webpack ts-loader webpack-cli
Затем мы можем создать файл webpack.config.js:
Мы сообщаем Webpack, что нашей точкой входа является файл index.tsx и что мы хотим объединить все в один файл content.js. Наконец, мы определяем путь к нашему связанному файлу Javascript как наш каталог расширения Chrome.
Теперь, если мы запустим yarn build, вы должны увидеть, что файл content.js переопределяет наш существующий скрипт контента внутри нашей папки extension:
Теперь мы можем продолжить и перезагрузить расширение, чтобы применить наши изменения.
При переходе на любую веб-страницу мы должны увидеть наше приложение React, отображаемое в левой части экрана:
По общему признанию, это все еще не крутое расширение Chrome. Но теперь, когда мы успешно интегрировали наше приложение React в расширение Chrome, вы можете создать любое приложение с React по вашему выбору, которое будет работать на любой веб-странице.
Вы можете найти код этой статьи в этом репозитории GitHub.
Последние мысли
Создать собственное расширение для Chrome намного проще, чем многие могут подумать. Как только вы правильно настроите расширение, вы сможете разрабатывать все, что захотите, используя React. Возможность создать собственное расширение для Chrome может доставить массу удовольствия, так как вы можете дать волю своему творчеству.
Надеюсь, вам понравилось читать эту статью. Я пишу о побочных проектах, веб-компонентах, расширении Chrome, Typescript и многих других темах. Следуйте за мной или подпишитесь, чтобы получать мои истории по электронной почте, чтобы не пропустить мои следующие статьи.
Я всегда рад ответить на вопросы и открыт для критики. Не стесняйтесь оставлять комментарии или связаться со мной в любое время! Свяжитесь со мной через LinkedIn или Twitter.
Кроме того, если вы еще этого не сделали, ознакомьтесь с моим расширением Chrome для онлайн-подсветки. С помощью Web Highlights вы можете выделять любую веб-страницу или PDF-файл, создавать теги и делать заметки. Проверьте это! 😊
Вот ссылка для неограниченного доступа ко всему контенту здесь, на Medium. Если вы зарегистрируетесь по этой ссылке, я заработаю небольшую сумму без каких-либо дополнительных затрат для вас.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
