DEV Community

karthikeyan
karthikeyan

Posted on

Creating a simple Chrome extension using React-Js

#javascript #react #chromeextension #webdev

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)