DEV Community

Karthikeyan
Karthikeyan

Posted on

Creating a simple Chrome extension using React-Js

Github link -

https://github.com/karthiktrp/Chrome-Extension-React-JS.git
Enter fullscreen mode Exit fullscreen mode

In this projetc i am just showing the prerequisite for create a chrome extension in react js

step 1 :

npx create-react-app chrome-react-seo-extension --template typescript
Enter fullscreen mode Exit fullscreen mode

step 2 :

edit the manifest file in public folder

inside project folder

{
  "name": "Chrome React SEO Extension",
  "description": "The power of React and TypeScript for building interactive Chrome extensions",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
      "default_popup": "index.html",
      "default_title": "Open the popup"
  },
  "icons": {
      "16": "logo192.png",
      "48": "logo192.png",
      "128": "logo192.png"
  }
}
Enter fullscreen mode Exit fullscreen mode

step 3 :
edit package.json file

inside project folder

step 4 :

npm run build

*step 5: *

turn on Developer mode
click load unpacked extension

chrome extension tools

step 6 :

choose build folder

inside project folder

that's it

your extension is ready

in next article we will add some functionalities

chrome extension tools

Top comments (0)