DEV Community

Cover image for Create Custom Chrome Homepage Extension using React (Vite ⚡ )
Muhammed Nazeem
Muhammed Nazeem

Posted on

Create Custom Chrome Homepage Extension using React (Vite ⚡ )

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 
Enter fullscreen mode Exit fullscreen mode
  • select framework react

Select framework

  • Then select react variant (any 🏃‍♂ )

React variant

  • 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

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'"
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Production

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

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 logo NazeemNato / react-chrome-homepage

create custom Chrome, Edge and Brave home screen / new tab layout using reactjs

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

Discussion (1)

Collapse
aksenov1992 profile image
aleksey

good !)
maybe you now, how to do "live-reload"?
so how to do every time build, it's not funny :'(