Create Custom Chrome Homepage Extension using React (Vite ⚡ )

#react #chrome #javascript #showdev

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.

yarn create vite chromepage

select framework react

Then select react variant (any 🏃‍♂ )

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.

Our public/manifest.json will look like this:

{
    "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:

yarn build

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)

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: