How we build Segmentify Chrome Extension with React?

Mehmet Yurtar
Jan 4, 2017 · 3 min read

Google Chrome is one of the best browsers today and part of its success is due to the excellent extensions on Chrome Web Store. Chrome extensions allow you to extend the browser’s capabilities. For example, you can use features of a SAAS tool working on your website via Chrome Extension. This is what Segmentify Chrome Extension does.


First of all, I want to tell you a bit about how a Segmentify Campaign works. Segmentify Campaigns don’t affect directly on your website after they’re created. You test it on your website first by activating Segmentify Test Mode. Then, if everything works well, you can go live with that campaigns.

How users activated Segmentify Test Mode before Chrome Extension?

Users had to add a query string to the end of their website URL. Segmentify detected that user wants to switch between Segmentify live/test mode and created a cookie to achieve this operation.

In some cases, websites automatically remove query strings from URLs, Segmentify can’t understand if users want to switch between Segmentify live/test mode, and users manually created a cookie about their test status. This could be very complex for users have no technical experience.

How Segmentify Chrome Extension eases this process?

No query strings, no cookies and no hassle! Users can activate(or deactivate) Segmentify Test Mode with one click.

How users activate Segmentify Test Mode via Segmentify Chrome Extension

All the comments above are from Chrome Web Store.

Anatomy of a Chrome Extension

Manifest.json

The manifest file called “manifest.json” describes your extension to Google and users. It contains some important information about the extension such as name, version, permissions, icons etc. This file is mandatory in any Chrome extension.

Content Scripts

A Chrome extension can interact with current page using content scripts. We use content scripts in our extension to determine whether Segmentify script is inserted on current page or not. Segmentify script triggers an event when it is loaded and we listen this event in a content script.

Browser Action

Our extension is a “Browser Action” extension. It adds a little Segmentify Icon to the right of the address bar. When user clicks the icon, an HTML page is showing up ( and a js file executed). Name of these files are popup.html and popup.js. This is the only part we use React in our extension. Elements in popup.html are actually React Components. Popup.js contains React Library and the code that render DOM Elements.

Background Script

We need to add a different type of script to our extension, a background script. It can detects when a tab change, tab reload etc. If user switches between tabs, background scripts detect this action and send messages to popup.js via message passing api.

How we use React in Segmentify Chrome Extension?

There are 4 possible situations when a user opens Segmentify Chrome Extension Popup:

  1. Segmentify script is on the website and Segmentify Test Mode is on. ( We render <SegmentifyFoundTestOn /> component. We bind a change handler to test mode switcher.)
  2. Segmentify script is on website and Segmentify Test Mode is off. ( We render <SegmentifyFoundTestOff /> component. We bind a change handler to test mode switcher.)
  3. Segmentify script is not inserted in website. ( We render <SegmentifyNotFound /> component)
  4. Users have no working internet connection ( We render <NoInternetConnection /> component)

For example, the <SegmentifyFoundTestOn /> component looks like this:

I hope you enjoyed our journey on the path of developing Segmentify Chrome Extension. You can download it from Chrome Web Store and start using today.

Mehmet Yurtar

Written by

UI Developer • JavaScript Obsessive • Developer by day entrepreneur by night