[Chrome Extension Tutorial] Build Chrome Extension with React & Typescript

topic is to create a chrome extension that can read some informations on the page that you are browsing so this is the extension so if i click on this one it's gonna read this information for you see the price is this one and the rent is right here right yeah it's pretty simple but there's some settings we need to set up because we're using react and task script yeah so let's get started so first i'm gonna go into here and make a dirt i'm gonna call it extension two low reader okay open it [Music] okay and let me open this so if you want to create a chrome extension the first thing you need is a manifest dot json file that is pretty much declaring whatever a chrome extension uh nice like the name of this chrome extension is gonna be like a silo reader and a description corruption read [Music] data yeah this is a kind of required so we'll have to specify a version 1.0 [Music] and one very important thing is that so they will require you to have this let me just copy it over manifest version two right now they have three uh about to be launched but if you try three right now yeah i can show you right away it's gonna give you an error so yeah after we set this this should be everything that is required for us to at least load this many uh i mean this extension so if you go back to the browser and if you go this link chrome extensions yeah this is the extension i previous created let me just remove it and then we can load our own and it's gonna be in the desktop extension reader like that and yeah see this error saying the maximum currently supported manifest version is still two so we'll have to just uh downgrade it to two uh um and this the version three should be coming up like very recently and it's just uh not up there yet so yeah you can just uh use two and if you use two and then go back there load it you see there's no arrow if you don't believe me i can just remove it load it again yeah see there's no error in here yeah so yeah we'll stick with version two for now it's just the manifest i don't know it's uh the sdk version or something uh yeah like that and after that if you want to load a page the page will be in this settings uh oh fix this you can find everything in the documentation but in my opinion it's kind of hard to read so i'll just put it in here so the browser pop-ups under the default pop up it's going to be like pop up pop up dot html yeah but we we have to create this one by ourself so i'm going to create a pub html there and if you click this band and then hit enter is a shortcut in the emit emit plugin that is by default included in vs code oh by the way this is just yes code i believe if you guys know that okay we don't have to use this title i think there's no way for us to see it at least as far as i'm concerned okay then i'm just saying hello road here and save it okay then if you go back in here and reload it oops there's an error browser key browser pop-up i think i probably brow oh this is misspelled browser action actually it's not browser popups browser action i'm sorry for that and action save that yeah i mean yeah let's go back reload it okay right now it's reloaded and if you go to the extensions you see the accelerator is right here let me pin it so that it shows in the toolbar and then if you just click on it hello world that's whatever we have in here uh yeah let me change into something else and okay reload it again load it again and yeah see that this is also updated okay that's pretty much the basic but right now we're gonna have to install something else so that we can use typescript and react so i'm gonna have to instantiate the packages the npm packages so we have to install some like web pack and all this kind of stuffs okay yeah let's do it this is gonna be the very basic setup so i'm not gonna change a lot of things in here um so in order for us to use react so i'm gonna use yarn but it's pretty much the same with the npm package installer so i'm going to have to install the react and react dom first this is the definitely the bare bone we have to include inside here okay if you want to i probably need to just get in it but after you need it see that there's a lot of files that in here will have to also create a git eagernor here to include to this to exclude to check into some of the files which is the like node module file see that is grayed out because i included in here i'm not sure if anyone need that information to be filled in uh yeah like that and right now we can use react but remembrance do you want to use typescript but in order to use typescript will have to include webpack as well webpack is pretty much like a like bundler to like translate or i'm i shouldn't say translate but it's uh so that the the browser cannot read typescript at once so the the the engine require the typescript be translated into javascript to be read by the browser so this webpack is with some helps of the the typescript compiler can do this for us we don't need bible in in this case so i believe this is kind of actually easier for us to set up so i'm gonna yeah but we don't need to add it in the uh in the development dependency yeah we will add in the development dependencies so that is not going to be packed into the the production build so add d is pretty much what we do we will add these dependencies in the depth dependency webpack and webpack cli webpack leads just to allow us to run some webpack commands inside the command line tools so it's nothing fancy we're not going to use directly this webpack clean the in the code and also ts loader see this is the one that is actually helps webpack to understand the typescript and do the do have a listings for typescript to trans uh translate the typescript code to javascript okay and also type script this is the compiler that is also helping the typescript loader to do the jobs yeah i think that's pretty much we need to do right now let me see where there is definitely some other plugins web plugins that we'll need to do okay so in order to use webpack i will have to create a webpack.config this is the by default if you run the webpack command by default it's going to use this one otherwise you'll have to specify it with some like other settings so to keep it simple i'll just use this one and also to use to run this webpack i'll just uh include a script in here which is just the webpack because i'm like too lazy to write it every time uh yeah i think that's pretty much it so right now i i believe we have to just specify something here we'll need a we'll need a like path this is a from node from node.js we will need the resolve function this is pretty much help us to locate some files inside our loader uh inside our directory i mean and then this is pretty much just the template codes that i'm gonna write really quickly and explain uh module exports is equal to okay first we will need to specify our entrance of this file entry of this file so the entry will be like uh we will name this entry to be pop up because we're probably gonna have some other things inside there so i'm gonna create a src folder that has something okay let me just create it first the src is the source of our things that uh and also uh how how i'm gonna structure it pop-up page i'm gonna do it in the pop-up page and then first i will need a pop up dot html remember this is pretty much like this one like this one here so i'm gonna copy this i actually don't need this i just delete it and then do it all over in here delete this so uh as you might notice as you might already know that okay uh and i need an id here oh i'll explain really quickly pop up so this is pretty much the hook point for our our react code to find that where should our reactor take effect so this is the point that we need for the react code to get access to this html page so given that we will have a up dot tsx tsx is typescript x i mean extension i'm not sure so it's pretty much allowing us to write some like html like coding here and okay so i'm gonna have to import react from react but actually i have a shortcut for it like which is react functional component that is doing a lot of things for me so this is actually pop up and i'm gonna just do pop up page for now this is functional component so i'm going to pretty much use functional components because i believe that's kind of easier in this case in this case so in this page this is probably going to be this is going to be rendered inside here but in order to help it find this point i'll have to import another one which is regretted dom the function is called render from react dom rec dom actually regular time is kind of another library uh yeah so after that so i'll call render render function and i'm going to render this thing remember this is the jsx jsx syntax to pretty much this one render this one on which point which the the point is document dot get element by id that i named it pop up i believe so if you go back in here saying it's pop-up yeah like that so this part should be wait what is oh it's because this is typescript and this one probably not included in there so i'm gonna have to add some like types in here that is declaring all the types that javascript don't have uh the types will be like react and types of react dom i live okay after i install this that should be gone yeah okay i think that's it okay one more thing is because we're using we're using this okay i'm gonna keep working on working on this okay so i'll create an output because right now we know where to find our source files but we don't know where to put them like after we translate it where should i put it so in this case i'm gonna say whatever you find in here the jsx files uh oh by the way it's only gonna find the jsx files the js files the typescript files is not gonna it's kind of gonna ignore this but we'll have a uh i mean a plug-in for us to help dealing with this html files so but for now it's gonna output to a disk folder then i'm gonna yeah i'm gonna i already have that let me just copy paste it over here and explain it okay so actually this part so this is just the name extension placeholder that is coming from actually here so if we don't mention this one everything is going to compile into one single file called whatever the default name is but if we put in here if we have like multiple entries like probably this one is going to be main or something it's going to be compiled into a single file that is probably required kind of required from this file because i'm gonna have another another file later on but right now just to focus on this code focus on this part so the file the popup file which is this one it's gonna be compiled and put into this disk folder that in here this resolve this third name is pretty much this one so it's gonna create a new disk folder under here and then put the compiled file into this folder like that so that's pretty much everything we need for now and let's let's see if we can oh by the way uh this pop-up file i'll need to that's uh i'll need to say more to help it locate this file i'm sorry not i'm not trying to save like separately yeah uh this way it's gonna ignore this file it's just gonna focus on this one so this file is going to compile into a oh yeah we will see it in action i think um okay right now i'm going to compile but there's probably there's definitely going to be an error in here so yarn remember i have the dev uh command in here it's gonna run my pack is pretty much the same if i run it it's gonna be given as an error oh this one is easy to fix so let's fix this one first um [Music] this mode is kind of required but it's not giving a lot of interesting things yeah so we'll just uh put it in here is the development it is because there's two modes development and production but right now we're in development so i just put in here production is just gonna give some optimizations on the code yeah uh and actually uh the error i wanna mention is because webpack only node.js code is it don't know it doesn't know this tsx extension and this has no way to figure out how to deal with it so the way we help it to deal with it is to let it know module oh by the way let me just do some copy paste and i'll explain it [Music] okay and there you go okay so this is pretty much telling you to note that certain files although it's not javascript file you should handle it for me as well and there's some certain rules in here that we will have to tell web web webpack the rules is like this this is like a regular expression it's saying okay whatever is ended this dollar sign says ended with dot ts x x is like optional in here if it's and and into ts we'll end in tsx and with tsx okay exclude everything inside the node modules because node modules the libraries will include these already handled everything for us so we don't have to do any thing with that with anything in there the tab squared files in there okay everything and into and with tsx we're gonna use ts loader which we uh we just installed in the depth dependency okay we're going to use ts loader to do the translation for us okay wow that's uh that's pretty much it but remember ts loader is also going to use the type square compiler which is right here we also included that and typescript compiler has a ts config that can direct the compiler how it's going to handle all this all these types of code and how to translate it and yeah we will need to uh tsc we'll need to include that as well like this so if you run this command mpx tsx in it it's gonna be in here yeah like this so i'm gonna make a very quick changes on that because we're using uh we will have to let this one know that we're using react see this is how to auto generate we can do react native or react so right now we will choose react and the target see that uh the chrome extension is actually very good example because we don't have to worry about the the ie or the older browser compatibility issues we can just use cs6 es6 is the like a kind of a modern javascript es 2015 modern javascript that's going to make our left uh a bit easier so yeah so this is used by the tsc the typescript compiler and i think that's it that's everything we need to change you probably don't even need to change it but it's a it's kind of i would like to keep my uh demo simpler as simple as as possible so we change it okay uh yeah let's go back in here that this code is pretty much doing this and it's gonna use the typescript compiler right now yeah let's see if we can possibly run into other issues let's run the webpack again okay everything is right now in here but uh in order for us to run this we will still need the html and also also the i mean the manifesting in here as well so how how can we do that so we want to we want to include some webpack plugins in here so i'll include it first so the webpack plugin is the first one is html web pack plug in and the other one is i mean leave copy web pack yeah it's gonna need these two plugins the plugin is pretty much like a webpack uh lifecycle hook so it's gonna run something during the webpack bundling process so webpack uh the first one the html webpack plugin is gonna it's gonna just uh inject a html file into the the folder that while that where we're bundling okay the way to use it is to have a cost okay have a uh just a copy this one over oh actually there's a there's something i missed so i'll add another plug-in dependency here which is called clean web pack per lug in i think we probably don't need this 100 in this project but it's like a kind of a good habit to include it it's pretty much doing things like uh before we bundling something into this folder we will clean the disk folder first but it will leave this directory that this folder is still there it's just cleans up everything inside this folder okay yeah enough talk so i'm gonna do this so all the plugins right here is like while i play code i don't wanna mix a lot of time on this so this html file is gonna do it's going to look for a template in here it's going to look for the template by this directions it's right right here in this folder and it's going to compile it into this folder with the name popup.html that's gonna be the name after this is done compiling and this put into this folder and the other thing to do is like remember these chunks chunk is liking in here it is the same as this one and it's going to inject it's going to run this typescript inside this html so it's going to add one line so i'll just run it really quick and you can see it right now and just ignore this for now ignore this for now okay i'm going to save it and yarn dev okay so right now oh we'll have to import it html web pack oh log in oh cost is equal to require uh html or pad plugin and also this clean webpack plugin but the the way they the way they import is kind of different uh clean webpack plugin so you remember this include this curly braces kind of this constructed clean webpack plugin okay everything is in place okay right now it should working oops yeah it's kind of working okay um why it's not but it's not as pop-up window oh that's that is because i didn't include in the sorry about that uh you have to include in the exports otherwise this plugin will not work okay yeah right now let's run the webpack again and you can see it's right there but if you if you take a look at this uh see this script slide is included but if you take a look at the template there's no script in there that's what the the plugins is doing for us okay then i guess we will do the copy up and because because we also need this manifest remember if you want to load it in the google chrome extent a google chrome browser you will need this manifest so how how we're going to do it so is to with this help with the help of this copy something something uh the copy webpack plugin so i'm gonna create a folder there with everything called public that with everything we want to to put into this folder in here right that's pretty much it uh this is the just the standard that is means move everything from the public folder to the this folder this folder is our like output folder in here yeah like that so if i save this and we run yarf again um reference copy webpack oh sorry another mistake webpack plugin is equal to require copy okay include this and then write it again so always remember to include all the dependencies that you need okay then yeah everything should be in there and it's running this javascript compile and let me just double check is there's something in there okay so we can go back and reload it fail to reload manifest oh that is because yeah holding to remove it that is because the the package changed direction uh the directories has changed that's why we need to include this okay the file is loaded and there's other thing i'll need to do is to pin it in there accelerator and there's narrow let's take a look at that oh yeah this is a like a weird error because uh i mean in webpack there's a like a source map because the code no this this code is like uh [Music] quite unreadable that is the the the compiled file is quite unreadable so there is a source map for it to to work so you can you can debug more simpler but the this this one is actually giving us a error because it's using the valve keyword the the eval keyword is forbidden if you want to run it in the in the background script were in the chrome extension area so one solution is to change into production if i change into production i run it again compile it and then clear all go back it's reloaded okay then it's reloaded and then you can see the pop-up page in here which is the pop-up page one two three change it okay just wait for it to finish okay pop up one two three okay that's pretty much and there's also another solution to include something like that to that to to be something else that i look it up this one would work so this is pretty much directing how the the source maps are supposed to lag so this is pretty much just going to generate a my map js for us so if you do this and then change it back to development uh take a look at this there's just gonna be an actual thing in there okay see that this this map thing in there is previous it's not yet but you can do it the way i'll just leave it in here uh so that we don't run into the issue so if you go back and then reload it see this also reloaded and the pop-up is still there okay so with with everything like that i think we're we're good to enter into the next phase which is to read something from the page uh the way we do that is okay first let me just create a comment here at all oh by the way i i shouldn't check i i need to change something else it is because the the disk we don't want we want it to be inside our sorry it's not it reset we don't want it to be inside our repository so i'm gonna do this like in here um okay i think that's pretty much everything and in the manifest so the okay what should i do okay let me let me commit first because we're we're in a good place to do the commits commit okay you need project yeah so the the second phase is to read something from the the browser that the page that we're currently reading uh the way we do that is to add something else in the manifest it's the the content script uh i just gotta copy paste a bunch of stuff i'll explain the content script is whatever it's gonna be run inside the page that we're loading for example inside this page uh yeah let me show you and this matches url is gonna it's like a filter right now i'm not filtering anything it's gonna run every page that will load but you can definitely do something like filtering here it's kind of it's just a simpler to put in here and i'm pretty sure this expression is going to be used by a lot of people so we're just including here and the js value is whatever we're gonna run so let's create a content score hopefully i'm not spelling it wrong right now i'm just it's gonna be console.log content content script from the low reader okay yeah like that and since we added one file in here we also gonna have to change something in here so content script let me just help webpack to locate this file it's content script.ts yeah and it's also going to be compiled into in here yeah so i guess that's pretty much it let me just to run the yarn dab again everything is there and let me check kind of script is there there's another source mapping here just to ignore it's not used anywhere and also the manifesto check content script content script hopefully it's the same name okay and i guess we're good to test it out let's reload it yeah so i'm gonna open this browser here as you can see this is pages if i refresh this page see that this content script from zillow reader is printed so which means uh this script is actually have access to all the things that in this page it is because this script is actually injected into this page to run so we can do some like fancy stuff in here as well like pretty much we can we can get the uh get the get get the uh get the displays in here for example if you go to a page for example if you go to this page and you can read this this thing here the way you read this is by uh by located with what by located in here if you use this tool and you can locate this this thing here and as you can see there's a couple of things we need to dig into to get access into this dom so that we can read the the inner text in here i'll show you really quick how what i mean so i'm gonna do another copy paste get pregs so if you use this one i already have the the drillings in here pretty much is the document is all the displays the doms in here i'll just query by the selectors i'll just first find a div with the class name ds summary row as you can see the s summary row is right there ds summary row and inside there there's the h4 tag and inside the h4 tag inside h4 there's a span okay there's a spanning here i'm just locating this one and i'll ask for the inner text which is this one is this one so it yeah like that so i'm gonna okay this is actually just a helper function i'll just uh console log price is equal to [Music] get price nope it's not going to allow me to put it yeah this is the right order do that okay let me save it and and then if i run this script right now you can see i should be able to lock it's loaded and as you can see if i go there clear it i should be able to lock this 700 or something oh yeah it's right there okay so we have this price already but we still need to find a way to how to say to get it displayed inside our our page like that so the way we do that is to case to go to there go to the the pop-up page in here so i'll run there's a there's a kind of a life cycle method sort of thing it's called use effect it's not a life cycle method i know but it's kind of the similar uh stuff so if i type it like this so this one means only run this effect when this pop-up is first loaded and don't run it any anytime any out anything else don't run anytime else so this effect is only going to run once when the page is loaded and uh i'm gonna send something to this uh to the tab that is opened in here to trigger my my reading so the the screen reader to get the information there will be a call back oh i will show really quick so first i'll need to locate we should have rumored there's a couple of tabs open but i need the tab that is currently active so the way i do that is to do chrome oh by the way uh because types really has a very good intelligence so if you install this at dash tabs chrome it's gonna give you some intelligence so you that's gonna save you a lot of time so tabs query i'm gonna get the get one of the the tabs and that tab is the one that is active and that is the current viewed window so i'm say current window is true and then also it's active t-r-u-e acted and then i'm gonna give it a call back so result whatever the result is i'm gonna do something with it so right now i can just do console log the silo read data and then log it result let's see okay oh actually sorry about that this is actually the tabs that is actually active not not the not the something so this this is actually gonna query the current window current tab and this is gonna give the current tab it's like a because this is uh asynchronous so the result is passed in as a asynchronous function and then we can get the the tabs opening here and the way we get the the current tab id so that we can locate this page and and trigger the reading so if we get the id we know which page to read so this id is this id is going to be so first we'll need to know that uh the length of this tabs is not equal to zero so if it's equal to zero it means this is just a empty string there's no active windows which i don't think there's a case for that but we will need to handle otherwise this value is going to be an optional it's going to give us not out of headaches to to write on so if it's zero which means it's a nail we'll just give it a default value is uh zero and then if it's then zero oh sorry about that this is a turnaround operator i kind of mis written it i'm sorry it's uh kind of late and i think that's not making a lot of sense but yes so if it's not zero i'll just uh get the the first tab showed up and get the id and i know this is definitely not null so give it a bouncy bang here exclamation mark so as long as i got the current id i can send a message to this tab uh the way i send a message is chrome runtime i think let's give me a second chrome no it's not runtime runtime is so i'm gonna send it message to the tabs wait uh yes send a send message to the tabs and which tab the tab id is the current type ide as you can see there's a intellisense that's directing you and what message you want to send this is for now we don't have to send any message to that because we're only sent once so if you send multiple times and maybe this could be a tag to distinguish this message to be sent and also a response callback so whatever is sent back from from there response and i'm gonna do some this arrow function is pretty much like a like a function anonymous function and log this so first i will just lock this response from content 10 response so what what is this response is actually send message is sending it to the let me put it in here a little so that is closer uh to a sending message to this tab to actually to this tab and by the way we can listen to this send message in here and the way we listen to it is to through runtime and on message we have to add a listener because the the the message is sent to this this event and we'll add a listener for that and inside the listener will have that oh see that there's a this is the intellisense message sender and the callback yeah and right now in here since we already have this text i can just go back to call back and then send a message back the message would be just a price and get press text like that okay then i guess we can do it now i made a mistake in here i shouldn't say zero is equal to zero if it's equal to zero i'll i'll give it a default value otherwise i'll just use the tabs id then okay we're gonna set the tabs id here and yeah this should print the the result for us and then if you go back in here the message should be sent in here sent to this listener in here and then we will print something about this centering here and then do the callback and this data is actually passed back in here which is the response so that we can lock it in there okay so after this all these changes let's run the yarn tab again to build the webpack and then go back in here clear it all to reload it and then here we'll just do a quick refresh let it finish a little bit clear it and then here message received from sender blah blah blah and if you go back to the extension i mean i'm sorry and if you just click here and inspect the pop-up and you can see response from content price which is this price in here okay then since we already got this express response in here we will use another react knowledge to display it which is the the statehook we state cook content that set content is equal to use date and first is not applicable but after the set it will be displaying the data that is giving back from the content script and then we will display it in here like that so we don't need this anymore also need this just debugging okay uh build it again almost there sorry about that yeah refresh it and then reload it will have to wait for the page to finish loading and then [Music] clicking here see the price is right there and also we will have to make make this pop-up a little bit wider the way we can do in-line styling here with is 300 pixels 300 pixels and that's it that's gonna make it make the pop-up wider and also we will need query to create the rent which i already have in here i'll just copy paste it over in here okay and then we can say rent is equal to get rent text like that and if you go back in here check it again this should be everything let's rebuild it okay below this it's reloaded refresh okay yeah it should be loaded and then clicking here you can say price rent if you don't if you go down here the rent should be there and we can try another school arcadia wait there's no school the price is really high in here in california there's no such a lot um okay let's choose what oh man that's so expensive okay let's try this see that this president here really can't rent 11 000 something dollars who's gonna rent that jesus uh okay yeah i i guess that's it uh so with this knowledge i think you can just calculate some ros in here like to time it with 12 and then do some roi calculations okay hope you guys enjoy it sorry it's kind of running along and okay

Channel: VG9 LAB

Views: 2,356

Rating: 4.9310346 out of 5

Keywords:

Id: h-OP0dtkyI8

Length: 55min 18sec (3318 seconds)

Published: Sat Jan 09 2021