Converting a React App to a Chrome Extension

Hello everyone! This blog post goes over the procedure we followed to convert our companion React app to a Chrome extension. The post follows the assumption that all Node/React dependencies have been installed and the developer is using a Linux environment.

1. Add a .env file in the root directory of your React app. In this file, set the environment variable INLINE_RUNTIME_CHUNK=false. If this environment variable isn’t set, webpack will inline Javascript code in the HTML, which Chrome won’t allow for XSS security reasons.
2. Add a manifest.json file in the /public directory. This will contain a bunch of settings Chrome will need to run the extension. The following suffices for a simple extension:

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "permissions": [
  ]
}

1. Build the project with npm run build. This compiles output into the build directory.
2. Open Chrome. Navigate to the URL chrome://extensions menu.
3. Turn on developer mode.
4. Click the Load Unpacked button and select the build folder generated in Step 3.

At this point, the Chrome extension should be added to your toolbar and can be used by clicking on the icon! Congratulation, you’re done.