ReactJS Extensions

What is a chrome extension?

Extensions are small software programs that personalize the experience of browsing. They help users to customize Chrome’s functionality and behavior to the needs or preferences of individuals. They are built on HTML, JavaScript, and CSS web technologies.

Creating and setting up a React application

Starting from the very primary stage, you’ll need to know how to create a React project anyway. There are many methods, but using the command line is the  simplest way to create-react-app

• Install create-react-app with: npm install –g create-react-app

• Create a project with the command: create-react-app react-todo

• Go to your newly created react project folder: cd react-todo

Now let’s use your favorite IDE to open your project, I’m going to use the VS Code for this guide. I have created a straightforward, complete implementation so that my parts are connected to that scope and you can have your own reaction implementation and project structure.

Consider My Project structure 

Here I have created a simple application that contains components related to my todo react application. You can create on your own react application including different components and different names.

Now we have to make it a chrome extension. It’s very easy since inside the public/ folder we already have a manifest.json file. 

Consider the fellow manifest.json file:{ "short_name": "React-Todo", "name": "React-Todo", "icons": [   {  "src: "favicon.ico" "sizes": "64x64 32x32 24x24 16x16",     "type": "image/x-icon"   }], "start_url": "./index.html", "display": "standalone", "theme_color: "#000000", "background_color": "#ffffff",}We need to make changes to manifest.json file:{ "short_name": "React-Todo", "name": "My ReactJS Extension", "manifest_version": 2, "browser_action": {   "default_popup": "index.html",   "default_title": "React Ext" }, "version": "1.0", "content_security_policy": "script-src 'self' 'sha256-      GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'"}

Now ,let’s create a build folder for your application.

Run the command npm run build and create a build for your extension.

Let’s Install ReatJS Extension on Chrome and See How It Works:

Now let’s go to chromes extension manager and type chrome://extensions in the URL line. You can also go to settings in chrome toolabar, find More tools and click Extensions. You will be redicted to this page  

Now, you have to drag your folder into the page and your extension will appear. Click the icon in the navigation bar and your extension will open.

Take a look at React-Todo on my browser:

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced React developers for your esteemed project today.

ReactJS Development Services