Create Custom Chrome Homepage Extension using React (Vite ⚡ )
Tags: react, chrome, javascript, showdev
Published: 2021-09-20 03:57:05

In this article I'll explain how to create a custom chrome homepage extension step by step.

## Let's get coding!

### 1. Create React with Vite

To make react project with Vite is very simple. All you need to do is follow this instruction.

```properties
yarn create vite chromepage 
```

- select framework **react**

![Select framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2uo26df1r17dzw3vhz8.png)

- Then select react variant (any 🏃‍♂ )

![React variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hhou9vwe8flmqfv7rza3.png)

- Go to your project app folder and enter `yarn` command. Project will be ready within a minute.

## 2. Create the Manifest

Every extension has a JSON-formatted manifest file, named `manifest.json`, that provides important information.

Inside project app folder create a new folder `public` with `manifest.json`.

![Create manfiest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mczky4rsrxlxr8103f6r.gif)

Our `public/manifest.json` will look like this:

```json
{
    "name": "React (vite) Homescreen",
    "description": "Some description idk hahah",
    "version": "0.1",
    "manifest_version": 3,
    "chrome_url_overrides": {
      "newtab": "index.html"
    },
    "content_security_policy": {
      "extension_pages": "script-src 'self'; object-src 'self'"
    }
}
```
So what's all this?:

- name (required) : plain text strings that identify the extension.
- version (required) : One to four dot-separated integers identifying the version of this extension
- manifest_version (required) : An integer specifying the version of the manifest file format your package requires (latest version **v3**)
- description (recommended) : A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension. 
- chrome_url_overrides : Override pages are a way to substitute an HTML file from your extension for a page that Google Chrome normally provides.
 - newtab : The page that appears when the user creates a new tab 
  or window. You can also get to this page by entering the URL 
  **chrome://newtab**.
- content_security_policy : Content Security Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web page).

### 3. Build and Load Extension

we can build it with the following command:

```properties
yarn build
```
![Production](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbivez7jjzqjos3fn86f.png)

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

- Open Chrome or Brave or Edge
- Click the menu icon (three dots) at the top right of Chrome, point to “**More Tools**,” then click on “**Extensions**.” You can also Navigate to `chrome://extensions` or `brave://extensions` or `edge://extensions`
- Turn on the "Developer Mode "switch
- Click over the "Load unpacked" button that appeared on the left
- Select our react homepage extension's build folder (`dist`)

![production](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9ui5k5w6q2xm5t9cami.gif)

Now we can see our extension on the list, with the name and description we defined in the `public/manifest.json`.The Custom Chrome Homepage extension is running. 🕺 

Source code:

{% github NazeemNato/react-chrome-homepage %}

Let me know what you think in the comments! 🏃‍♂