Creating a chrome extension in React

hello guys uh this is the ordinary dev and in this video we are going to make an google chrome extension using react uh and like this is my first video after the animation series um the new videos in the series will come eventually so like this is a new video for me so hope you guys like it so i'm gonna show you what we're gonna make here so like we're gonna make an extension that looks like this so [Music] this will have like uh different tabs and you can add uh as many tabs as you want so if you like for example if you click on search engines then like this will open the two search engines that we have provided in our code and like uh similarly if you click on well rent or movies whatever it will open the respective tab so i have created an empty project here using create react app and i have removed all the polyplate code from app.js and app.css so let's get started so when we are creating an extension what we need to do is like we first need to create our ui and it will like it will display in this normal web page but as we saw we want to like display our extension in the pop-up window that comes up when we click on our extension so like i will get to that later first let's design our ui and logic and then we'll put it in here so let's make a header which shows what we're doing so all right here let's say choose your list now in this day we will have our actual the list of our apps so uh we'll have a button here and for now let's just say [Music] happy okay now uh let's try this so this gives this classical list this button will have a plastic move button here so like you want to hover into the list so get a flick so now uh and for a button uh okay so first we need a background color and let's see how that looks uh and this is a border of none bottle radius of 20 pixels okay this looks good and last thing you want is font weight this will work okay and like let's give this a hover effect so what we'll do is simply add a border when you are old so [Music] let's say border is equal to 1px solid black seems good last thing i wanna do is like in the beginning here let's have a adding of zero bx and 20 [Music] so that just will we have like a horizontal padding here okay so what we're gonna do now is we will save our list of apps somewhere and we will create a state that will uh maintain that list so for that uh let's import new state and [Music] well now let's call this lists and set list and you state and um here we will uh like create a structure that will contain all the list of our apps their names and the urls so let me show you how the structure will be so [Music] uh let's call it data this will be an array an array will contain an object so this object will first have a name and this name is like for example app is here so this is the name of an this is the name of the app so [Music] um well for now just uh [Music] it's called search engines okay [Music] and the url will have an array which will contain the string of urls so for example so like in the search engines app will the first url is google and bing.com i think i don't know if this is like correct or not i will rectify it later if it's wrong uh okay so this is our data for now and we'll just like save this in a straight year so now what we'll do is we'll we will display this data obviously so instead of this static uh button that we are using here will uh display data here rather so first we will check if list is present and if it is not null then this dot map um this map function will give us an item and here we will return this button so like instead of this static text here we'll do this item dot name so if you save uh this becomes search engines so now if i like click on this app what should happen is uh this two urls should uh open in new tab uh so let's make a function for that um like we'll call it open tabs and this will like take in a url and so this button that we have here [Music] um in the on click prop we will give this call this engineer so [Music] open tabs and [Music] i made a typo here so this will be taps instead of this url like we'll have this items item.url so [Music] this array of strings we are passing it in this function and now we will iterate over it so for and for link of [Music] url now we'll get like a single string in link so we'll just do a window dot one link and since we want to open it in new tab we'll just do blank okay so i think this should work so if you click on this um well google opens but not bing i think [Music] uh well i don't use bing much so i don't know the url okay so i found out what the what's the problem here so like when we click on this it's only opening the first link that we provide in here like only google not the second link because when you open multiple links the browser thing it's a like pop-up ad or something so it's it blocks the like the following links so if you come across this just go to manage and here like you can allow the pop-ups so now if i click on the search engines uh this will open like both google now that we have our basic extension ready so what we're gonna do is instead of like uh opening this in our normal webpage uh we will try to open this in our extension so first of all uh if you go in a public folder there is a file called manifest.json so like before exporting like uh the extension uh we need to fill in some data here so just remove all the default code there is and [Music] write this here so first of all we need a name of the extension uh let's call it my apps and second we need a description uh open your go to tabs and [Music] one click uh now we need to specify the the version of our app let's say 1.0 and now we need a manifest version and like on the official official docs the current version that is used is three so like uh we're gonna write three here and the next is important part so [Music] uh it's called action here and this is an object and in this uh we specify like uh our extension pop-up that will appear uh the details about that so first one is like the title of the pop-up so [Music] like this will not show up like by default like uh the title will be shown if you hover over the extension in a tooltip so let's just say my apps here the next one is default offer um so this is important uh what we'll do is like this default popup we have to specify the uh the file that is being rendered in the pop-up so when we like compile this code react compile like uh compiles all this down to html javascript right so this index.html is the one that is rendered at the end so we'll just write index.html there because that's the file that the popup will look for at the beginning uh okay so next what we're gonna do is we need the icons right so default icon and we can like specify two sizes so 16 by 16 size and let's just use the default lower that this one that create react app provides for default so it's called logo 192 dot png so like this logo 192 is like a 192 by 192 uh dimension but like to optimize this extension like if you are making a serious app so just make the uh make this icon 16x16 so this small icon will be rendered here and we can like provide one more year so it's 7.8 so and this 128 by 128 is a large icon so like if you're making a real app then um make sure that uh the dimensions are better uh i'm just gonna write the same same icon in both places so logo 192.png uh okay so that's pretty much it let's just save this file now what we need to do is we need to create a build on this app so let's just run npm run so what this will do is this will create a build folder here and it will have uh like compiled version of our code so it is completed we have this inside our build uh now uh let's go to our extensions tab manage extensions and make sure developer mode is open so if this is turned on we will have um options to like upload our own extension so click on load unpacked and here uh in our app make sure to go inside the build folder and select that folder so when we we don't need to select this whole root folder just like go inside build and then select it so what we see is like we have this our extensions uh loaded here so [Music] if you go to this tab and click on this and let's pin it at the top and if now if we click on this uh like we can see our app that we created uh of course uh it doesn't look as we wish so now we are going to change this and change the dimensions of this so now in order to change the width and height of this extension uh what we need to do is uh we need to specify uh like a width and a height property to this file that we are fetching so if you remember in our manifestation we are saying that we are fetching the index.html file okay so uh well if there is an index.html file there is also an index of cssi so this index.css is uh the css file that specifies the styling for this uh this file so uh what we're gonna do is let's just remove all the default code from here and instead of body we'll have html and body both what we'll do here is i will specify a width let's say 400 pixels and a height of 100 pixels this sounds good now if we save this and we do the build again and it just takes a second yeah so now uh if you click on this we can see that our uh like the extension pop-up look a lot better and it still works like if you click on this we open our new tabs okay so yeah so if your pop-up doesn't update uh automatically just go to manage extensions and uh like here you can update or you can click on update and will update all the extensions okay so uh our basic build is ready so you can create like uh many creative extensions if you like like uh for example if you're a developer you can have your work uh in one tab and you're like like whatever you do your hobbies so that taps in another and you can like open that in one go so like for example to show you that you can extend it uh however you want i've created another uh like i've added some more things here so like uh the search engines are the default one that we saw and like if i want let's say i'm doing some work and i'm going to check out uh some esports coverage so just go to click on variant here i don't know websites and i can just use it whenever i want so that's it for this video and thanks for watching and hope you guys have fun so like share and subscribe and thank you

Channel: TheOrdinaryDev

Views: 20,952

Keywords:

Id: R9cVnEUD6OA

Length: 18min 13sec (1093 seconds)

Published: Sun Mar 13 2022