Абстрактный

Расширение Chrome позволяет нам добавлять функции в наш браузер, персонализировать процесс разработки. Хорошим примером является React DevTools, который позволяет разработчикам React проверять и отлаживать виртуальную DOM с помощью Chrome DevTools.

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

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

Обзор

Расширение Chrome состоит из нескольких компонентов, которые можно разбить на фоновые сценарии, сценарии содержимого, страницу параметров, элементы пользовательского интерфейса.

Фоновые скрипты похожи на фоновый поток вашего расширения Chrome. Здесь вы можете наблюдать за событиями браузера и изменять его поведение.

Скрипты содержания выполняются в контексте веб-страниц. Разрешен доступ и изменение DOM веб-страниц. Здесь вы предоставляете расширению информацию о веб-страницах, а также предоставляете перехватчики для взаимодействия веб-страниц с расширением.

Страница параметров - это отдельная страница, на которой пользователи могут изменять поведение вашего расширения Chrome.

Элементы пользовательского интерфейса - это то, что мы обычно воспринимаем как расширение Chrome, которое включает в себя:

Теперь, когда вы знаете различные компоненты расширения Chrome, давайте рассмотрим самый важный файл в каждом расширении - manifest.json.

manifest.json здесь вы объявляете все о расширении chrome:

Вы можете объявить все элементы пользовательского интерфейса внутри manifest.json. Вы также можете программно включить их внутри фонового скрипта.

Например, React Devtools показывает другой логотип React, когда сайт не использует React, использует React разработки и использует React в рабочей среде:

Обратите внимание, что поля options_page, popup в поле browser_action и devtools_page принимают путь к HTML-странице. Вы можете обращаться с HTML-страницей как с любым веб-приложением, которое вы можете использовать для ее создания на любой платформе. Например, React Devtools построен на React!

Для страницы devtools вам нужно программно добавить панели в devtools:

Связь между компонентами

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

Например, React Devtools использует сценарий содержимого для определения версии React и уведомляет фоновый сценарий, чтобы обновить значок действия страницы соответствующим образом.

Связь между различными компонентами расширения Chrome осуществляется с помощью передачи сообщений. Есть API как для разового запроса, так и для долгоживущих подключений.

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

Я изучал, как работает React Devtools, в частности, потому что, чтобы показать обновленное виртуальное дерево DOM React внутри панели devtools, необходимо много взаимодействовать между devtools и скриптом содержимого.

После некоторого изучения и экспериментов я придумал следующую архитектуру для своего расширения Chrome:

  • Все компоненты расширения (например, всплывающее окно, сценарий содержимого, инструменты разработки) поддерживали долгосрочное соединение с фоновым сценарием.
  • Фоновый скрипт действует как центральный контроллер, который получает сообщения от каждого компонента и отправляет их соответствующим компонентам.
  • Каждый компонент подобен актору в модели актора, где он действует в соответствии с полученными сообщениями и отправляет сообщения другим акторам, где это необходимо.

Обмен данными между сценарием содержимого и веб-страницей

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

Кроме того, сценарий содержимого может получать доступ к истории страницы, файлам cookie, локальному хранилищу и API других браузеров в контексте веб-страницы.

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

верно и обратное:

Однако сценарий содержимого по-прежнему может объявить переменную в веб-приложении, поскольку он имеет доступ к той же модели DOM, он может сделать это, добавив тег сценария:

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

Тем не менее, вы не можете объявить переменную из веб-приложения в области сценария содержимого.

Я наткнулся на идею, в которой ваше веб-приложение может «объявлять переменную» через DOM, создав специальный элемент DOM только для использования сценария содержимого:

Технически это возможно, хотя я бы не рекомендовал это делать.

Вместо этого вы должны использовать window.postMessage для связи между веб-страницей и сценарием содержимого.

Примечание. Не забудьте добавить поле идентификатора, например: "source", к данным события для фильтрации, вы будете поражены тем, сколько данных передается через window.postMessage, если вы не отфильтруете события, отправленные из вашего использования.

Обеспечение привязки к вашему расширению

Если вы установили React Devtools, попробуйте набрать __REACT_DEVTOOLS_GLOBAL_HOOK__ в консоли. Это глобальный объект, внедренный сценарием содержимого React Devtools, чтобы обеспечить простой интерфейс для вашей веб-страницы для взаимодействия со сценарием содержимого.

Вы тоже можете это сделать:

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

Поздравляем, мы прошли, пожалуй, самую сложную часть разработки расширения Chrome!

Теперь давайте посмотрим, какое расширение Chrome мы можем разработать, чтобы помочь нам в повседневной разработке.

Что можно делать с расширением Chrome

Не знаю, как вы, но React DevTools и Redux DevTools очень помогли мне в ежедневной разработке React. Кроме того, я использую EditThisCookie для управления файлами cookie, JSON Formatter помогает мне проверять .json файлы в Chrome, и есть намного больше расширений, которые облегчили мою работу по разработке, которые я перечислил в конце этой статьи.

Как видите, эти расширения являются специализированными и полезными в определенном аспекте моего развития:

  • React Devtools для отладки React Virtual DOM
  • Redux Devtools для отладки магазина Redux и путешествий во времени
  • EditThisCookie для отладки файлов cookie.
  • …

Они специализированы для общего проекта React или Redux, но недостаточно специализированы для вашей личной или рабочей среды разработки вашей команды.

Далее я покажу вам несколько примеров вместе с исходным кодом для каждого примера, и, надеюсь, эти примеры вдохновят вас на создание расширения Chrome.

Переключение среды и переключатели функций

Веб-приложение обычно обслуживается в разных средах (например: тестовая, промежуточная, действующая), на разных языках (например, на английском, китайском) и может иметь разные переключатели функций. включить / отключить функции в веб-приложении.

В зависимости от настроек вашего веб-приложения, переключение сред, языков или переключателей функций может потребовать от вас имитации или ручного редактирования файлов cookie / локального хранилища (если там сохраняются ваши флаги).

Подумайте о том, как вам нужно обучать каждого нового разработчика / QA / PM вручную переключать среды, язык или переключатели функций.

Что, если вместо этого у вас есть расширение Chrome с интуитивно понятным пользовательским интерфейсом, который позволяет вам это делать?

Вы можете записать расширение в cookie / локальное хранилище. Вы можете подписаться на события из расширения и внести соответствующие изменения в свое веб-приложение.

Делайте это как хотите, это ваше расширение Chrome.

Код для демонстрации

Сообщение об ошибках с записью экрана

Возможно, вы используете инструмент записи экрана для записи ошибок или какой-то платный сервис, например LogRocket, для записи каждого взаимодействия с пользователем, но насколько хорошо они интегрированы с вашей системой отслеживания ошибок?

У вас может быть расширение Chrome, которое использует API chrome.tabCapture для записи видеозаписей вкладки, получения важной информации о вашем приложении, такой как состояние вашего веб-приложения, ошибок консоли, сетевых запросов, и отправки их в вашу ошибку. система слежения.

Вы можете передать информацию, которая уникальна для вашей настройки разработки, например, состояние Redux store / Vuex / Svelte store и историю действий, переключатели функций, идентификаторы запросов…

И вы можете интегрироваться со своей системой отслеживания ошибок, будь то Jira, Trello, Google Sheets, электронная почта или некоторые внутренние системы.

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

Код для демонстрации

Отладка событий и аналитика

Журнал отладки и тестирования, а также аналитические события обычно доставляют хлопоты.

Обычно, особенно в производственной сборке, события не регистрируются в консоли. Следовательно, единственный способ проверить и отладить эти события - использовать сетевой инспектор, проверяя тело запроса, когда эти события отправляются на внутренний сервер.

Что, если мы регистрируем эти события только после установки расширения?

Как и Google Analytics Debuger, расширение предоставляет переключатель для включения режима отладки клиента Google Analytics.

Код для демонстрации

Заключительная записка

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

Поделитесь со мной, на что способно ваше расширение Chrome, с нетерпением жду их встречи!

Расширения, которые помогли мне в повседневном развитии

Подписывайтесь на меня в твиттере для других моих статей. Первоначально опубликовано на https://lihautan.com.