Creating a chrome extension in Next JS and React

hello everyone welcome to another version of my most famous video so I posted a video about creating browser extensions about 2 years ago and that was very well received by the audience so um like it's about time to create a updated version for it so this time uh you will learn how to create a browser extension in react and in nextjs we will cover both of this platform uh if you wonder why we are uh like including next year's here uh it's because if you go to the new react docs the react has has recently been updated and now they are pushing the default way of creating your uh react project should be using this command that is create next Tab and basically it is using nextjs now so yeah I thought we should include this all right so like to get started first you need to uh know a few points uh those are that are needed to create a browser extension so I listed them here so as you can see the first one one is Manifest file so uh if you when whenever we create our U react app or or next app uh we need the Manifest file in the rout of the project that is manifest.json it is basically an uh JavaScript object file which contains key value Pairs and it contains the information about the extension that is its name the version and description and it is the entry point uh into that extension browser uh basically looks for that file to get uh like everything ready also it is a must have file and extension won't work without this and then we have service worker service worker uh it's it is not an uh mandatory Fe mandatory thing uh it basically adds more functionality to our uh extension so like we can listen to browser events that is creating a new tab closing it or uh any other events and we can make our extension uh react to it so basically if you want any of that kind of functionality then you need service workers in your uh project then third we have content scripts content scripts are basically JavaScript files and these files uh using this you can like uh modify or read the Dom element of web page so for example uh you might have seen some extension on the Chrome Store that are quite famous like the one that gives dark mode in all uh any web page uh even the ones that does not support it so basically uh it it's using a Content script to like read the data of a web page and modify it so that's what uh it does so basically service worker and content scripts they both add extra functionality to your app and manifest the dent file is the entry point and the most important file in your project all right so we will see how everything works in the next section okay so to get started I have created a new project here using Create next tab command so this is a nextjs project and and uh you if you are using react uh don't worry we'll cover that also but if you're starting a new project into react I would recommend that you go with nextjs now uh but if you have an old project uh don't worry we'll uh don't worry we'll cover that also so um this is space. TSX which is the entry point into nextjs and in this file I have removed all the boiler plate code and just added this div which contains two text Elements which is uh nothing fancy uh just simple two text elements uh if you are in react then go to your index file and do the same uh add something simple there for now all right so if you go into this here you can see that uh we have four steps to follow in each of the like whatever framework you're using uh if you follow this four steps you can easily add your extension in your browser so the first step we have we have done that is creating our project um I used create Next Step the second step is is create manifest uh which I talked about earlier this manifest file uh the entry point in the extension so let's get started with that so I'm here in my next app and uh just remember that you need your manifest file in the root of your project so in the root I'm going to create a new folder called extension and inside that I will create a new file called manifest.json okay so this is a Json file that means we have to just create an object here and it will contain key value payers so if you go to the react uh sorry the Chrome docs uh you can see uh everything you can add in this file so they have a very nice uh documentation about creating extensions and here you can see that in the Manifest file uh this three parameters at the top are the required parameters and the others are recommended and optional so B basically there is a huge list of parameters that you can uh add according to your need whatever you want in your extension so I will provide a link to this documentation in the description if you want to Deep dive into it for now we will add the basic things so yeah um you can see these three things are the important things so I'm going to add those so first is the name of the extension I will call it extension tutorial next we will add version so you can add any version that you want I like to start with uh 0.0.1 but uh you can have whatever you want oh I misspelled version here okay so the third thing is uh manifest version so here uh we will use version three because that's the latest manifest uh version API that is uh provided by Chrome so there's another uh page of documentation for this so this is the latest uh manifest from chrome so I recommend you use that also okay since we are working in nextjs uh we need another parameter here but if you're working direct I like you you can also add this uh this will only help you so there's another parameter called action or actions I believe wait yeah it's action so action contains uh another object and this will have a value called a key called default uh popup I think yeah default popup and here we're going to specify index.html so uh what we are seeing here is that uh the default popup that is uh if you go to Chrome and if you have any extension like I have this add blocker here if I click on this uh this thing comes up right this uh window so this is the default popup that comes up so we are saying hey Chrome uh like the default popup that should open up should be uh rented from index. HTML uh all right so another thing I want to share is that in the nextjs you don't have a index orl file by default like uh if you search the project you won't find that but in in PR react uh there is an index.html so when you build the app it automatically uh boils it down to index HTML CSS and JavaScript but in nextjs you won't find that so we will deal with that next okay so if we get back to our points uh we have completed the first and second step uh which is same in both uh react and sjs so the third command if you see uh they are different so if you are using plane react uh then basically you don't have to do anything just create a build of the build of your app and using npm run build or any other command that you have and and just wait for the next step um like just creating a simple build will do for you but if you're in next uh I just told you that uh we don't have a index or HTML file there right so uh we have to add us custom build command in nextjs which uh does that for us so yeah let's do that so uh I have the command WR over here so don't worry this uh looks scary but uh I will explain what it does so basically uh it contains uh four commands so I have written it down there for next build next export and two other commands so basically the first one is next build which uh like which is quite simple it creates a build of your project and the second one is next export so this is an important command it takes the that build of your project and compiles it down to an optimized index.html CSS and JavaScript so this is where we get our index file okay so the third command is uh move this to this so basically what we are saying is uh when we create a build of our app we create an out folder and Inside Out folder there is an underscore next folder so we are renaming that underscore next to Simply next and in the third command we are copying our manifest file which we have in our extension right now uh this file uh we are copying this file into our out folder that's it that's all we have to do so you will understand once we uh go through this build command for now just copy this and add it in your package.json so in package.json uh whatever your build command is just replace that and add this all right so as you guess uh we will run this so npm run build so if you call this npm run build it will internally call this command as you can see uh it comes up over here and now it will do all those things for us that I just explained okay our build command is completed and as you can see the out folder is created for us and if you go inside that uh you can see that the next folder is renamed which is not underscore next it is simply next and our manifest file that we had here is being copied to this folder all right pretty simple so this is just an extra step that you have to do in XCS in plain react you you don't have to do anything just run n PM run that's it okay um we have completed the first three commands uh next is the final step we just have to load that extension in a browser okay so to do that um click on your extensions tab if you don't uh have it here go to the options and click on extensions and manage extension all right so I only have two extensions right now but uh to add to add a new extension that is not in the Chrome Store uh you need to turn on the developer mode it should be on the top right of your um extensions window and by doing that you will see three more options added to us uh which is first one is load and pack click on that and like the out folder that we created using our build command go to that folder and just select it that's all you have to do and if you refresh this you will see your extension this it is loaded it says extension tutorial over here and the version is 0.0.1 okay uh so now if you go to your default Tab and click on this extensions button over here you will see that your um extension is listed here and just pin it if you pin it it will come on the top and now I'm going to click it and you see our text whatever that is is being shown here and our default popup that is uh index HTML is also there okay so finally uh if you want to do any change in your um extension like modify some text or whatever you want to add new fun it and and you want to make update in your browser so basically just make a change and simply run that command again and it will create another out folder for you and do all the things and simply go in your extension tabs and create this uh click this refresh button so this will reload uh it from that uh file whatever you specified and uh it will add the updated extension for you over here so this video is already getting very long so uh I think we should stop here and and this is how you create basic extensions so in next video uh we are going to talk about service workers and content strips so this are uh this topics will take some time so that's why I decided to like uh break this into two parts and uh this next part will release next week at the same time so subscribe for those and like this video If you enjoyed it or learned something new and I hate to like break it into videos but don't worry this two topics are very good and you will be excited uh for what's coming next like you can uh by adding these two things you can create pretty awesome extensions so stay tuned for that and cheers I will see you in the next video

Channel: TheOrdinaryDev

Views: 3,832

Keywords:

Id: FENxgQ58JSE

Length: 13min 14sec (794 seconds)

Published: Wed Oct 25 2023