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:
- Скрипт Segmentify находится навеб-сайте, и тестовый режим Segmentify включен. (Мы визуализируем компонент ‹SegmentifyFoundTestOn /›. Мы привязываем обработчик изменений к переключателю тестового режима.)
- Скрипт Segmentify находится на веб-сайте и Тестовый режим Segmentify отключен. ( Мы визуализируем компонент ‹SegmentifyFoundTestOff /›. Мы привязываем обработчик изменений к тестовому режиму. переключатель.)
- Скрипт Segmentify не вставлен на веб-сайт. (Мы визуализируем компонент ‹SegmentifyNotFound /›)
- У пользователей нет рабочего подключения к Интернету (мы визуализируем компонент ‹NoInternetConnection /›)
Например, ‹SegmentifyFoundTestOn /›component выглядит следующим образом:
Надеюсь, вам понравилось наше путешествие по пути разработки расширения Segmentify Chrome. Вы можете загрузить его из Интернет-магазина Chrome и начать использовать уже сегодня.