
Creating a Chrome extension in React is no different than creating one in vanilla JavaScript. After all, it's all JavaScript in the end. But we just need to keep few details in our mind. In this post, let's see how to create a simple Chrome extension with React.

## 1. Creating and setting up a React application

For this, we are going to use `create-react-app` tool, as it makes it easy to get started with React. In your command line, go to your workspace directory and run `npx create-react-app chrome-react-extension`. This will setup a sample React application named "chrome-react-extension", with all the build steps built in.

Once you have the basic react app created, 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.

Now, let's move on to configuring this app to make this as an Chrome extension.

## 2. Configuring React app to work as a Chrome extension

A Chrome extension requires a `manifest.json` file to be present in root directory of the extension. Luckily, our `create-react-app` already has one. We just need to add few details in it to make it compatible with Chrome's `manifest.json` spec.

Open the file `[PROJECT_HOME]\public\manifest.json` and add the following code to it. The file should already contain other entries and that's fine, just add the code at the end of it.

```javascript
{
    /* ... other values */
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
    }
}
```

Also, the file will have some default entries for `icons`, but this is not compatible with the Chrome's `manifest.json` format. You can either update this to comply with ["icons" format](https://developer.chrome.com/apps/manifest/icons) or just remove the entry as we do not need it for our extension to work.

And, that's it. That's all you need to do to get out 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 place the files inside `[PROJECT_HOME]\build`.

Now, let's install it in Chrome.

## 3. Adding React app extension to Chrome

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

![Chrome extension developer mode](https://i.imgur.com/MqJDzXz.png)

Now either click on the *LOAD UNPACKED* and browse to `[PROJECT_HOME]\build` or just drag and drop the `build` folder. This will install the React app as a Chrome extension.

![React app as Chrome extension](https://i.imgur.com/enqysM3.png)

Yay! We just installed our React app as a Chrome extension. When you click the extension icon (the auto generated one), you will see the React app, rendered as a extension popup.

![React app opened as Chrome extension](https://i.imgur.com/l4xV1xZ.png)

## 4. Making changes and debugging the extension

You can continue to make changes to your React app and do a build. To refresh the changes in your browser, just click on the `Reload` button on your extension's tile in `chrome://extensions` page. This will automatically pull changes from your build folder and re-install the extension.

![Reload chrome extension changes](https://i.imgur.com/OwIK98U.png)

And, to [debug the extension in browser](https://developer.chrome.com/apps/tut_debugging), you can either right click the extension icon and select *Inspect popup* or once the popup is opened, right click in it and select *Inspect*. This wll open the developer console, where you can inspect console logs, network traffic, local storage, etc.

## 5. Injecting a React app to page as content script from Chrome extension

So far we used React to render the extension popup. For some extensions, you may also need to render some UI to any underlying page. Chrome extension uses `content_scripts` for this. Using `content_scripts`, you can 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 and can do the normal DOM manipulation.

But the problem with our `create-react-setup` 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.

To workaround this problem, you can always add a static JS file under the `public` folder and when built, this JS fill will be part of the `build` folder. Then you can use this file name as your `content_script` entry point. But then, this file will not be part of React / Webpack build pipeline so you either have to setup your own build or settle for a vanilla JS in here.

As another workaround, you can just eject out of `create-react-app` and modify the webpack configuration by hand to either retain the generated file name or create a separate entry point for content script.

Let's do this.

## 6. Ejecting create-react-app and configuring content scripts

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. 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`.
```javascript
entry: {
    app: [require.resolve('./polyfills'), paths.appIndexJs],
    content: [require.resolve('./polyfills'), './src/content.js']
},
```

Also, Search for `.[contenthash: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.

```javascript
/* src/content.js */
import React from 'react';
import ReactDOM from 'react-dom';
import "./content.css";

class ContentReact extends React.Component {
    render() {
        return (
            <div className={'react-extension'}>
                <p>Hello From React Extension!</p>
            </div>
        )
    }
}

const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<ContentReact />, app);
```

```css
/* src/content.css */
.react-extension {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: grid;
    align-items: center;
    justify-items: center;
    background: rgba(0,0,0,.4);
}

.react-extension p {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}
```

Now that we have configured React build pipeline and created our content scripts, lets update `manifest.json` to pick up these files. Add the following code to `manifest.json` file.

```json
"content_scripts" : [
    {
      "matches": ["https://reactjs.org/*"],
      "css": ["/static/css/content.css"],
      "js": ["/static/js/content.js"]
    }
  ]
```

Note that how we refer the JS and CSS file. Also, with `matches` option, we are injecting this content script only to the React JS website. But you can inject any website you want, just by adjusting the matching pattern.

Now build your app, go to `chrome://extensions` and reload the extension. After this, when you go to https://reactjs.org website you should see our extension injected model there.

![Content Script injected as a React App](https://i.imgur.com/Y7Dsawh.png)

This brings the end of this article. Feel free to let me know if there are questions.

How to create a Chrome extension in React JS


Firebug is an inseperable tool in any Web developer's toolbox. It's one of the best things that happened to JavaScript and Web Development. I have been using Firebug for a long time and have been wondering how my web development would be if there is no Firebug. So, in this article, I'm sharing few of my tips and tricks to use Firebug effectively to speed up your web development.

## 1. Visually modifying page layout in Firebug

Firebug's *Layout *panel let's you to examine the selected element's height, width and other position related attributes in a visual manner. Apart from showing the positional attribute values, the *Layout *panel allows you to edit the values directly from the panel. To edit a value, just click on it and the modified value will be reflected immediately on the page.

![Visually modifying page layout using Firebug][1]

[1]: https://veerasundar.com/img/2010/02/firebug_layout.png "Visually modifying page layout using Firebug"

## 2. See the computed styles for an element

As you might have known, CSS apply styles in a cascading manner (after all, it is _cascading_ style sheet, isn't it?). I.e. The styles that are defined for the parent element will be applied to all of it's child elements too. But, the child element is allowed to override any of the parent styles and define its own styles. Thus, the final set of style attributes which are applied to an element is always changed at the run time. To view the final style attributes, which are calculated after applying all the inherited style definitions, are displayed in the _Computed_ panel. Please note that it is not possible to edit any attribute from this panel.

![See the computed styles for an element][2]

[2]: https://veerasundar.com/img/2010/02/firebug_computed.png "See the computed styles for an element"

## 3. Find out which CSS file is the black sheep

Some times it becomes very difficult to figure out which CSS definition is affecting a element style. When more than one CSS files are being used in a single page, then it becomes even more difficult. In such scenarios, Firebug could be used to identify the CSS file name from which an CSS style definition is being taken. For example, in the below screenshot you can see that the particular page uses two CSS files (_screen.css_ and _reset.css_) and the _Style_ panel clearly displays which style is taken from which CSS file. The overridden styles are striked out. The _Style_ panel also links to the URL of the style file being used, so it is easy for us to get the entire CSS file if needed.

![Find out which CSS file is the black sheep][3]

[3]: https://veerasundar.com/img/2010/02/firebug_multi_styles.png "Find out which CSS file is the black sheep"

## 4. Not just edit CSS, edit HTML too

Firebug _Style_ panel lets you to edit any CSS attribute and view the results immediately. Firebug can be used to edit the HTML content also. To do it, right click on the tag which you want to edit in the _HTML_ panel and then select `Edit HTML` (or, just double click on the element). Firebug opens the inner HTML of the element you selected in edit mode. The changes you make will be visible on the page immediately.

![Not just edit CSS, edit HTML too][4]

[4]: https://veerasundar.com/img/2010/02/firebug_edit-e1265179743540.png "Not just edit CSS, edit HTML too"

## 5. Jump to the element you are editing

This is a nifty option for quickly navigating to the element that you are currently working. While editing a HTML element, right from the _HTML_ panel, you can easily bring that element into view by right clicking and selecting _Scroll into view_.

![Jump to the element you are editing][5]

[5]: https://veerasundar.com/img/2010/02/firebug_scroll_view-e1265179923269.png "Jump to the element you are editing"

Become IT expert with [testking 350-001][6] training course. Get the latest [testking SY0-201][7] css tutorials and [testking 642-901][8] study guide to learn about different web applications.

[6]: http://www.testking.com/350-001.htm
[7]: http://www.testking.com/SY0-201.htm
[8]: http://www.testking.com/642-901.htm


#extension (2)