Build a Chrome Extension With React & Webpack

hello everyone and welcome to this video of how to create your own chrome extension using react and webpack to start we are going to create a folder in our computer for our project and then we will open it with our favorite code editor in my case i will be using vs code once we are done we will open our terminal and go straight into our project folder here we will initialize a node project and we will do so with the command npm init minus y as you may already know this command will automatically set up our package.json file and it will contain the basic project definition like project name version scripts and more next we're going to start by adding our projects folder structure for this we will create two folders which are source and public the source folder will contain our react components and styles in our public folder will contain static files like images logos favicons and most importantly our manifest.json file in order for a chrome extension to work our project needs to have a manifest.json file which works in a similar way of what the package.json file is to node.js now let's open our browser and go into the google developers page which contains the explanation of how to create a chrome extension here we will find under the create the manifest title a simple code structure and what we will do is copy the code and go back into our project create a manifest.json file under the public folder and here we will paste the code once this is set our next step is to create the chrome extensions user interface for this we will go back into the browser and search in the google developers page for the block with the title introduce a user interface as we can see here we need to create first a popup.html file which will contain a simple html document structure and then we need to add a new action block into our manifest.json file to do so let's copy the action block from the page and then go back into our project and paste it inside our manifest.json file then under the source folder we will create a new file called popup.html if we write html5 and then click in the tab key we will see how vs code automatically creates a simple html document structure inside of this file we will find the head which contains some element definitions like meta tags and a title and then we have a body which currently is empty since we are going to use react we need to create a div inside the body tag and we will define an id for it which we will call react target this div is what is called in react the root node all of the react code will be rendered directly into this div element next we're going to create our basic react setup for this we will install react in our project and we will do so by opening our terminal and then writing npm install minus minus save react and react dom once the installation is complete we will create a new file inside of the source folder which we will call popup.jsx in this file we will import react then we will import render from react-dom and then we will define a react component which we will call pop-up and we will fill it in with some dummy text to finish the file structure we will execute the render function where we will first send the react popup component and then we will retrieve the div with the id react target we created inside of the body tag of the popup.html file before we jump into configuring webpack it is important to understand the file structure our end product should have in order for the chrome extension to work we need to convert all of our project files into static web files this means that our project can only contain files that the browser can understand like plain javascript html json images and css since chrome cannot understand node or react code we need to use a build tool to convert these files and here is where webpack comes into the picture now let's configure webpack in our project for this let's open our browser and then go into the webpack page if we go into the documentation section we will find a very detailed page with multiple options to understand how to set up webpack for now let's go into guides and in the left navigation let's click in the installation option in this page we will find the packages we need to install to run webpack in our project let's then open our terminal and write the command npm install minus minus save dev webpack and webpack cli once the installation is done we will create our webpack configuration file which we will call webpack.com just to keep in mind this configuration file should be created in the root project folder which means it should be at the same level as the package.json file if we now go back into the browser and then into the concepts page we will find a complete explanation of the webpack elements called entry output loaders and plugins we will go through each one of them in a second but for now let's copy the example code and then go back into our project and paste it inside our webpack configuration file the first thing that we will do is update the entry field here we will change the example path for an object and inside of it we will define popup with the path to the popup.jsx file we have in our source folder if we had another file that we wanted to generate like the chrome extension background file we would only need to add another element into the entry object which we would call background and then define for it the path to the background.jsx file now for the output field we're defining the path for build which in this case is the this folder then we have the file name structure where we copied a simple string name but we will change it for the following value what this means is that any file that we defined in the entry section will be copied with the exact name but with the difference of the file extension being js instead of jsx for example if we are sending in the entry section the popup.jsx file webpack will then turn this file into popup.js before we can run webpack for the first time we need to add a build script into our package.json file for this we will first remove the existing test script and then we will define the new script called build which will have the value of webpack minus minus config webpack.config.js if we now open our terminal and execute the command npn run build webpack will start generating the build of our project based on the configuration we created in the webpack.config.js file as we can see in the terminal we got some messages from the build process the first one is a reminder that we have not defined the mode option in our webpack configuration file for now we don't have to worry about this since we will do it later in this video now the second message is an error coming from building the popup.jsx file what this error is showing us is that webpack cannot understand jsx files which means that it cannot build react code to fix this error we will use the webpack element called loaders if we go back into the browser we will scroll into the loader section of the concepts page and then we will copy the example code we will then go back into our project and paste this code in our webpack configuration file here we will update the copied code structure by adding a new rule that can transform react code into something that our webpack builder can understand for this we will change the test field for this new value and what this means is that the loader will be executed with any file that has the extension.js or jsx then we will add a new element that is called exclude and here we will exclude all the files that come from the node modules folder finally we will update the use field and turn it into an object which will contain first the loader fields which will have the value bubble loader and then we are going to send some options that contain the presets called babel preset m and babel preset react babel is the tool that we use to understand react code and transpile it into plain javascript that a webpack builder can understand even though it is not the focus of this video i highly encourage you to read more about babel bubble presets and how does it all work before we can run our build command again we need to install the babel packages we just defined in our webpack loader section for this we will open the terminal and write the command npm install minus minus save dev bubble loader babel core babel preset m and babel preset react even though we didn't use the babel core in the loader definition we still have to install it so babel can work correctly in our project once the installation is complete we can run the command npn run build and finally we are getting a complete build without an error message to make sure that it all worked we will go into our project and we will make sure that a new this folder was created in it now if we open the this folder we will find that it has the popup.js file but it is still missing the manifest.json in popup.html files to fix this problem we will use the webpack element called plugins if we go into the browser we will scroll into the plugins section of the concepts page and then we will search for the plugin called html webpack plugin its main purpose is to create html files in our webpack build to use it we will copy the installation command and we will paste it in our terminal and then execute it once the installation is complete we will go back into the browser and we will copy the code example that is under the installation then we will go back into our webpack configuration file and paste it under the output section here we will update the copied code and we will send an object to the function which will contain the template with the path to our popup.html file and then we will define the file name field to keep the same popup.html name if we now go back into the terminal and run the build command we can see that after the build is complete our this folder now has the popup.html file in it now for the manifest.json file we will go back into the browser and search for the plugin called copy webpack plugin its main purpose is to copy and paste all the files that are inside of a specific folder into the final build and in our case we will use it to copy all the files inside the public folder now we will copy the installation command and then we will execute it in our terminal once the installation is complete we will go back into the browser and we will copy the code example under the getting started section then we will go back into the webpack configuration file and paste it under the html webpack plugin code here we will update the copied code by leaving only one pattern that comes from the public folder before we run our build command again we need to import the copy webpack plugin and then we can go back into the terminal and run the build if we now open the this folder we can see that the manifest.json file is now in it now that our basic webpack setup is complete we will learn how to load our chrome extension in the browser for this let's open the browser and then go into options more tools and extensions in the top right corner of the page we will find a toggle called developer mode if we turn it on we will then get a new navigation bar which contains three buttons that are load unpacked pack extension and update in order to load our extension we will click in the load and pack button then we will navigate into our project this folder and once we select it we will see how our package will appear in the chrome extensions page now to make our development process easier we will pin the chrome extension in the browser's toolbar if we click on it we will see that our project is loading perfectly and our extension is displaying the dummy text we defined in the popup.jsx file one common problem you will find when you are developing your extension is that each time you make a change in your project you will need to reload the extension inside of the extensions page to avoid this you can open your extension as a chrome tab which makes the development process much easier for this we will first copy the extension id and then we will open a new tab and write the following url if we change the extension id text for the copied one we will see how our extension loads like a website with this you can debug your project with all of the chrome inspector tools now we will improve our webpack build functionality by creating a production and development build for this we need to install a package called webpack merge if we open our terminal we will run the command npm install minus minus save dev webpack merge once the installation is complete we will create two files which we will call webpack.prod.js and webpack.dev.js let's now start by configuring the webpack.dev.js file first we will import merge from webpack merge and then we will import our existing configuration from webpack.config.js after this we will write module.exports which will merge our existing configuration with a new object that has the field mode with the value developments and the fill dev tool with the value inline source map for the webpack.prod.js file we will replicate all of this code and then we will change the mode field for the value production and we will remove the dev tool field before we run the new webpack changes we will open our package.json file and we will update the build script to use webpack.prod.js instead of webpack.config.js then we will create a new script called dev which will have the value webpack minus minus watch minus minus config webpack.dev.js once we run the dev script webpack will not only build our project but it will rebuild each time we make a change in any file of our code this functionality will be extremely helpful since we won't have to repeat manually the build process on every change we make now that we have completed this video we have built a chrome extension using react node.js and webpack

Channel: Codify Tools

Views: 1,895

Keywords: chrome, chrome extension, react, webpack, nodejs, development

Id: 8OCEfOKzpAw

Length: 17min 44sec (1064 seconds)

Published: Sun Sep 19 2021