Chrome is an awesome browser from Google that is very fast and lightweight, yet also very powerful. Chrome also has a very good extensibility model that allows developers with just HTML, CSS, and JavaScript skills to create powerful extensions.

I will show you how to inject our own JavaScript and CSS into an existing page to enhance its capabilities.

Table of contents

Creating and setting up a React application

In your command line, go to your workspace directory and run npx create-react-app my-extension . This will set up a sample React application named my-extension , with all the build steps built-in.

Once you have the basic react app created, go to my-extension directory and run yarn start to make sure the application is working fine. If all good, you will see a browser page, loaded with the React app.

Setup react app to use as an extension

Our create-react-app has manifest.json . We just need to add a few details in it to make it compatible with Chrome’s manifest.json . Open the file [PROJECT_HOME]/public/manifest.json and replace it with the following code.

{

"name": "My Extension",

"version": "1.0",

"manifest_version": 2,

"browser_action": {

"default_popup": "index.html"

},

"content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"

}

Adding React app extension to Chrome

To make React app working as a Chrome extension. Build this app as you normally build a react app with yarn build . This generates the app and places the files inside [PROJECT_HOME]/build .

In the Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on the LOAD UNPACKED and browse to [PROJECT_HOME]/build , This will install the React app as a Chrome extension.

When you click the extension icon, you will see the React app, rendered as an extension popup.

Injecting React app to page as content script

Chrome extension uses content_scripts to mention a JS and CSS file in manifest.json , that needs to be injected into the underlying page. Then this script will have access to the page DOM.

The problem with our create-react-app is that the build step will generate the output JS file in different name each time (if the content changed). So we have no way to know the actual file name of the JS file, hence we can’t mention in it in our manifest.json file.

As a workaround, you can just eject out of create-react-app and modify the webpack configuration by hand to create a separate entry point for content script.

Ejecting create-react-app and configuring content scripts

What happens when you eject create-react-app

First, run yarn run eject on the command line. This will eject create-react-app and then will create all necessary build scripts inside your project folder.

Now run yarn install to install all dependencies

Once ejection is done, go to [PROJECT_HOME]/config/webpack.config.prod.js file and make the following changes in it:

Change the option entry to have multiple entry points. Here, our content script will be named as content.js

entry: {

app: [require.resolve('./polyfills'), paths.appIndexJs],

content: [require.resolve('./polyfills'), './src/content.js']

},

Also, Search for .[contenthash:8] , .[chunkhash:8] and remove it from both CSS and JS output file name. This will ensure the generated file will not have a random hash in it, thus we can mention the file name in our manifest JSON.

Once you made the above changes in the webpack.config.prod.js file, now its time to create the content script file. Create a file named content.js and content.css inside the src folder.