React Chrome Extension Create Chrome Extension in React

When I moved to Edge weeks ago, I found there's no built-in strong password generator in Edge. Then I decide write one for it.

Most of the extensions on marketplace are write many years ago, and they were written in raw HTML, CSS and JavaScript. But we have React and UI component libraries now, life should be easier.

The problem I soon found is there's almost no tutorial for a React extension anywhere. That's why I decide to share everything here.

• The source code is origin from my side project 10converters.com.
• Repo on Github strong password generator.
• Edge Extension Addons Store: Strong Password Generator.

Star the repo on Github or leave a review on Edge Addons Store are both welcome!

Features of the extension

It generates a 15 characters long password with lowercased letters, uppercased letters, numbers and symbols.

But it won't like Chrome built-in password manager, it doesn't:

• copy to clipboard automatically
• fill in the password/confirm field in web page
• manage/backup your password somewhere, not in cloud, not even do it locally

It does:

• keep everything running in client side, that means no server at all
• manual copy to clipboard

I tried to make it as simple as a one-day-job. Anyone who follows this tutorial could submit your own extension to Chrome Web Store or Microsoft Edge Extension Addons(what a long name) in a single day(but from my experience, Microsoft need 2-3 days to approve your submission).

Extension Basic

Before dive into the details, I want to explain a little the basic structure of an extension of chromium based browser.

This extension structure works on Chrome, Edge and Brave, and maybe other Chromium based browsers I don't know.

There're several key parts of an extension:

manifest

manifest describes what's in the source package. It specified where browser could find background, content script, popup and option pages. As well as it describes permissions required by the extension.

background

A piece of code which is launched when the extension launched, and won't be terminated until extension removed or browser shutdown.

Background code has access to all chrome APIs, other parts are limited. But background doesn't have an UI and can not access DOM.

popup

The UI which is popped up while user click on 'browser action' which is your extension icon button right to the browser address bar.

Most extensions need a popup as entry.

options

It's an optional part of the extension. Not all extensions has an options page. It is used as a configuration UI for the extension. Your extension has to provide an entry for it.

If you have some something complicated to be configured, you need this.

content script

Content script is a piece of JavaScript which runs in a tab with specific URL. the URL pattern is defined in manifest.json. If the URL matched with which is specified in manifest.json, browser will launch the content script. It will be terminated while the URL changed, or tab closed.

If you want to manipulate DOM, you need content script.

So you should already have idea of what these parts are doing now.

Which parts involved in Strong Password Generator extension

Background, not in this tutorial, but there's an empty background.js in repo, just for future use.

Popup, yes. That's the focus of this article. I will show you how to write a Popup in React + Material.

Options, no.

Content script, no.

Start from scratch

Here're 5 steps to create an extension in React from scratch.

Step 1: create a react app

$npx create-react-app extension

This will create a regular react app. Everything else are growing from this seed app.

Step 2: Modify public/manifest.json

You've already had a public/manifest.json after CRA(create-react-app). Change the file as below:

{
    "name": "Strong Password Generator",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Strong password generator",
    "icons": {
        "512": "logo512.png"
    },
    "browser_action": {
        "default_icon": "logo512.png",
        "default_popup": "popup.html"
    }
}

Step 3: Create a build script(script/build.sh)

#!/bin/bash

build() {
    echo 'building react'

    rm -rf dist/*

    export INLINE_RUNTIME_CHUNK=false
    export GENERATE_SOURCEMAP=false

    react-scripts build

    mkdir -p dist
    cp -r build/* dist

    mv dist/index.html dist/popup.html
}

build

There're 2 things did in this script:

• build react app with some specific environment variables set
• renamed index.html into popup.html

INLINE_RUNTIME_CHUNK=false disabled webpack generating inline JavaScript in HTML. Normally webpack will put its own runtime into HTML inline script. But inline script is not allowed by browser extension.

Rename index.html into popup.html because it is required to be popup.html in manifest.json.

After create script/build.sh, don't forget add x permission:

chmod +x script/build.sh

Step 4: Modify package.json

modify scripts like below:

"scripts": {
    "start": "react-scripts start",
    "build": "./script/build.sh",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

Step 5: Build and load into Chrome(or Edge)

$npm run build

Then you will get a 'dist' directory. Load it as unpacked extension in Chrome or Edge. You would see:

The React extension is running.

To be continue

There're still pending issues for a serious extension, like:

• How to handle Options page? It's another page rather than Popup, but CRA created a SPA.
• Is there any performance issue to write extension in React?
• My content script is going to inject some UI component into host pages, can React be applied in this scenario?

And maybe some other topics not related to React too much but still important for a serious extension:

• How to obfuscate source code, especially background.js
• I'm going to introduce Firebase in my extension, any tips?

All the above will be discussed in the next post if someone interests into these questions. Leave a comment below if you have any other questions, suggestions, any feedback are welcome.

Comments

[Vasily Shelkov]

Hi, I've created a repo in order to skip having to do these steps which I aim to maintain in case anyone is interested. You can check out the github repo

or just try it out:

npx create-react-app my-browser-extension --scripts-version react-browser-extension-scripts --template browser-extension

or for typescript support

npx create-react-app my-browser-extension --scripts-version react-browser-extension-scripts --template browser-extension-typescript

[Bon]

Thanks u

[Rajvir Singh]

Can you add some examples in your readme like I am trying to make my own BlockSite extension, just for fun.

[Bobby]

Reactjs in a chrome extension completely ruins the built in message passing capabilities. I found that using reactJS for my popup, background, and content scripts meant none of the 3 parts could talk to each other anymore.

[Artem Diashkin]

I'm describing this issue here:
medium.com/litslink-frontend-devel...

[Mihail Marian]

What alternative do you use? vanilla JS + webpack?

[Nyasha (Nash) Nziramasanga]

Thanks for sharing was extremely helpful, for anyone using React + TypeScript you can use: $npx create-react-app my-app --template typescript in Stage 1 instead of $npx create-react-app extension

[Deepak Vishwakarma]

you don need all these script.
To pass u u can create .env file

REACT_APP_INLINE_RUNTIME_CHUNK=false
REACT_APP_GENERATE_SOURCEMAP=false
REACT_APP_BUILD_PATH=dist

and for move file

MACHINE="$(uname -s)"
if [[ $MACHINE =~ "Darwin" ]]; then
    mv dist/index.html dist/popup.html
else
    move dist\index.html dist\popup.html
fi

[fishsticks89]

Why did you change generate sourcemap to false?

[Ron Basumallik]

Hello, how could I include an Image in the Popup? I'm trying to include a button in the Popup with an image as the button but I can't figure out how to import the image. The source image file isn't reachable by the Popup. Thanks

[Vlad Osadchy]

How run script/build.sh on Windows?

[fishsticks89]

if you have git bash you can run

bash build.sh

[Migo]

You can type in your command prompt bash ./script/build.sh

[Gabriel Q. Matos]

Nice :D, It's very interesting

[Alexey Masalov]

What is the point of creating a dist folder? why is build not suitable by default?

[Pradeep Pradyumna]

Good one! Thanks for posting.

[Jason Cruz]

somebody copped this site from somebody lol

javascript.plainenglish.io/creatin...

[Madrus]

Good article. Thanks. The extension should also work for Yandex browser.

[Sebastián Azcárate]

Awesome!

[Gavin Chan]

thank you

[BrettFinlay]

Like it

[ajyjk7]

I'm going to introduce Firebase in my extension, any tips?