Google Chrome — один из лучших браузеров на сегодняшний день, и часть его успеха связана с превосходными расширениями в Интернет-магазине Chrome. Расширения Chrome позволяют расширить возможности браузера. Например, вы можете использовать функции инструмента SAAS, работающего на вашем веб-сайте, через расширение Chrome. Это то, что делает расширение Segmentify Chrome.

Прежде всего, я хочу немного рассказать вам о том, как работает кампания Segmentify. Кампании Segmentify не влияют непосредственно на ваш сайт после их создания. Сначала вы тестируете его на своем веб-сайте, активировав тестовый режим Segmentify. Затем, если все работает хорошо, вы можете запустить эти кампании.

Как пользователи активировали тестовый режим Segmentify перед расширением Chrome?

Пользователям приходилось добавлять строку запроса в конец URL своего веб-сайта. Segmentify обнаружил, что пользователь хочет переключиться между режимом Segmentify live/test и создал файл cookie для выполнения этой операции.

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

Как расширение Segmentify Chrome упрощает этот процесс?

Никаких строк запроса, никаких файлов cookie и никаких хлопот! Пользователи могут активировать (или деактивировать) тестовый режим Segmentify одним щелчком мыши.

Очень хорошая идея, чтобы облегчить работу. Спасибо

Вот чего я жду :)

Это сэкономило мое время. Благодарность!!

Все приведенные выше комментарии взяты из Интернет-магазина Chrome.

Анатомия расширения Chrome

Манифест.json

Файл манифеста под названием «manifest.json» описывает ваше расширение для Google и пользователей. Он содержит некоторую важную информацию о расширении, такую ​​как имя, версия, разрешения, значки и т. д. Этот файл является обязательным для любого расширения Chrome.

Сценарии контента

Расширение Chrome может взаимодействовать с текущей страницей с помощью скриптов контента. Мы используем скрипты контента в нашем расширении, чтобы определить, вставлен ли скрипт Segmentify на текущую страницу или нет. Сценарий Segmentify запускает событие при загрузке, и мы прослушиваем это событие в сценарии содержимого.

Действие браузера

Наше расширение — это расширение «Действие в браузере». Он добавляет небольшую иконку Segmentify справа от адресной строки. Когда пользователь щелкает значок, отображается HTML-страница (и выполняется файл js). Эти файлы называются popup.html и popup.js. Это единственная часть, в которой мы используем React в нашем расширении. Элементы в popup.html на самом деле являются компонентами React. Popup.js содержит библиотеку React и код, отображающий элементы DOM.

Фоновый скрипт

Скрипты контента имеют некоторые ограничения. Они не могут использовать chrome.* API, за исключением extension, i18n, runtime и storage.

Нам нужно добавить к нашему расширению скрипт другого типа, фоновый скрипт. Он может определять изменение вкладки, перезагрузку вкладки и т. д. Если пользователь переключается между вкладками, фоновые скрипты обнаруживают это действие и отправляют сообщения в popup.js через API передачи сообщений.

Как мы используем React в расширении Segmentify для Chrome?

Возможны 4 ситуации, когда пользователь открывает всплывающее окно расширения Segmentify Chrome:

  1. Скрипт Segmentify находится навеб-сайте, и тестовый режим Segmentify включен. (Мы визуализируем компонент ‹SegmentifyFoundTestOn /›. Мы привязываем обработчик изменений к переключателю тестового режима.)
  2. Скрипт Segmentify находится на веб-сайте и Тестовый режим Segmentify отключен. ( Мы визуализируем компонент ‹SegmentifyFoundTestOff /›. Мы привязываем обработчик изменений к тестовому режиму. переключатель.)
  3. Скрипт Segmentify не вставлен на веб-сайт. (Мы визуализируем компонент ‹SegmentifyNotFound /›)
  4. У пользователей нет рабочего подключения к Интернету (мы визуализируем компонент ‹NoInternetConnection /›)

Например, ‹SegmentifyFoundTestOn /›component выглядит следующим образом:

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