CHROME EXTENSION DEVELOPMENT (LET'S BUILD A SCREEN RECORDER)

hey there guys this is Clement from the graphitec and in this video I'm going to be showing you guys a Chrome extension development crash course and this is going to be a project-based learning experience um I'm gonna tell you guys all about that in a bit um but if you like this type of content please don't forget to leave a like And subscribe because that really helps our Channel out so without any further Ado let's get on with the video so we're talking about Chrome extensions so I guess the logical question to ask first of all is what is a Chrome extension well basically you know according to the little notes I have written down here in this slide these are basically programs that you can install in your Chrome browser to change its functionality maybe modify a website to suit your only users personal taste like maybe the theme color or maybe some image changes and it's also used to automate the repetitive tasks you know so it's used for uh wide variety of functionalities um but the projects we're going to be what we're going to be you know learning with on Chrome extensions today is we're going to be building a screen recorder apps um we will learn all the thin steps to learn about a Chrome extension in that way and feel fairly comfortable be it in one on your own so yes as we do here at uh the graphic attack we believe in Project based learning so we're going to be learning this by building a little screen recorder app and before we go into the code um feel free to go through the Chrome extensions documentation over here at developers Chrome docs they release the new mv3 version version three that's a manifest version three um that's what we're going to be using in this video so we're going to learn all about the new um version 3 which came out in 2020. um this is a really good documentation really detailed but you don't need to learn to go through this I'll go through a majority of all what the Chrome extension is all about but you know there are some details here that I won't really be covering so you can feel free to go through it as well and this is also another really good article that talks about uh Chrome extension version 3 in general so feel free to look this up um so yeah that's pretty much all the things I have to show you in terms of like uh online resources on Chrome extensions without any further Ado let's get on with building the Chrome extension so um the very um you know let me show you an example of a Chrome extension maybe that will make things clear so basically um there are many Chrome extensions and they do a slur a lot of stuff um in general so there's no one functionality of um a Chrome extension so for this for example all this logos here are Chrome extensions and I can quickly click on this one this is a an i a Color Picker Chrome extension we're not going to be building this but it's just an example of how you know it can change the page and you know pick out colors uh so this picks out white you know and other colors here um so yeah we've all done it to go into too deeply into like examples I'm sure you probably have seen a couple of Chrome extensions on your own end um so that's why you're watching the video anyways so yeah so we're just going to go up right into building a simple screen recorder Chrome extension right now let's minimize this so yeah let's hop right into the code you can see I'm starting with an empty uh well not too empty uh Visual Studio code um code editor here it just has a couple of images that I name as such and of course you can pick this images from the GitHub that I'll leave in the description below but it's nothing too huge about these they're just um logos for our Chrome extension but the first and important thing to create the first important thing to create when you are making a Chrome extension is the manifest.json file so I'll go ahead and type in the manifest.json file basically the manifest.json file is a Json file that describes what um it does a lot of things right it describes you know the version of the Chrome extension the name what this conversation extension does it also sets permissions for the Chrome extension the website it's allowed to scrape the websites it's allowed to not scrape you know different level of uh things that it's allowed to do so I'll just start real quick uh so basically this is the Jason Frost we need to have like a Json and we're going to be using manifest version three and the name of our Chrome extension is going to be I'll call this um the graph screen recorder right and the description is it records the users screen nice so we got um a couple of these out of the way so the next thing I want to do right now is talk about you know assigning the logos of you know our um Chrome extension and to set the icon you know for the Chrome extension uh which I'll show you where it appears is I need to set an icons property and in this case uh you can set multiple sizes but in the grand scheme of things it doesn't really fully matter how many sizes you set just depends on you know the size of the the laptop or you know or device you're using in this situation so I'm not going to set a 128 here and I'm going to locate slash Images slash icon 128 that's a 128 by 120 pixel image which is this one we have over here this one here uh so this is gonna be the logo of the uh you know of the um Chrome extension in the list of Chrome extension page which I will show you in a few seconds um so there's another very important part of a Chrome extension which is called the background scripts uh so basically a background script is just a simple script that you know maintain some level of States determines um what tab gets injection injected with what scripts it's also used to make network network requests but I'll get more into that in a little bit um into uh uh make the background script available I just need to say service worker and it's gonna I'm gonna create this file called background.js and I'm going to really create it here now um I'll call this background.js you know it's going to be empty for now but this is going to bring in this background file again it's just a process that runs constantly in the background that cities for um a certain amount of functionalities which I will be showing you in a little bit so the next thing I want to sort of do after adding the background of file is I'm going to create I'm going to like us um specify the action file and what is the action file the the well the action property I mean and what is this you know take care of it takes care of what they call the pop-up you know there's a pop-up that usually shows up when you are working with a Chrome extension um looking for an exam here when I click this you can see this pop pop that shows here on the screen this is brought about by the pop-up um HTML script that is um specified in the manifest.json so that's what we're specifying right here and I'll call this default pump up and this is going to be a file which we'll create in a moment I've got this pop-up.html you can call this whatever you want to call this it doesn't really need to copy code follow up with HTML even this you can call background.js whatever you want to call it um so I'm not going to come here and just create a pop-up that each demo I'll fill this with content in a little bit um yeah so the next thing I want to sort of make is uh you know yeah I'm not really done with the actions property there are other things to specify like this icon that's on the pop-up um the image for this particular icon is what I will specify in the um action property so this you know if you're familiar with the react logo this shows the react logo right so what logo do we want our extension to show that's what will be underneath this default power property and the property is going to be called default underscore icon this is going to take another object that has you know the difference resolution of images in this case I'll just say slash Images slash icon x16. PNG I'll just copy and paste this real quick um the other sizes so we don't take too much time so just come here and paste this perfect so uh these are this finishes up our action specifications and then the next thing I want to sort of set up here is I'm gonna um set up some additional permissions um I'm gonna set up two permissions actually the first permission I'll set up is what they call the host permissions that's away from the action underneath the action property uh it's called the host underscore permissions and this takes in an array and this generally dictates the websites that you want this extension to function in so this can really be any website it can be um a list of websites that you want the Chrome extension to be functioning in uh and if you want uh any for example any Google website it can be like http like this and be google.com you know star for example but in this case I want it to be any HTTP or https website so instead of making it you know whether it's https Google or HTTP Google like this I won't say to make it to be any website by using another um you know regular expression maybe not a little bit another expression to show this wild card um character here so basically this means google.com anything that's what's a star symbol represents but in this case I'm going to make it http star which means any website you know then I can take this one off real quick and then I can say this also a https for any website as well so this is what the host permissions are for um uh then there's another one another property called permissions which exposes some additional functionality to your Chrome extension part of me it's actually is going to be an array of permissions so there are a lot of properties for Chrome extensions but the ones I will be using in this video and that may change if I see how things go but I'm going to be exposing the tabs API and all this will make sense in a little bit or you know what let me just stick it out so that you know when the need comes for that API I only get an error indicating we need that API I will be able to add the permissions to use that API but there are a lot of apis and you can all see that in the Chrome extensions documentation perfect so uh the final thing I suppose is the version number just to indicate what version of your code this is when you deploy it in the Chrome extension store so this is just going to be our version of 1.0.0 I'm just going to save this and um yeah that should be it for this um I want to create other files though um I'm going to create I'm gonna just make a JS folder quick folder JS folder and this folder is going to hold the pop-up dot Js but instead of going into this right now just let's leave it empty the first thing I want to sort of touch before I start you know bring in this extension into um into uh you know the Chrome browser that we have is I want to like just write some dummy HTML code here and again it's not the HTML tutorial so this is going to be very very Bare Bones um I'll just I'm just use my AmEx to do this real quickly by pressing um exclamation points Tab and I'm going to call this the graphic video recorder in the title and then I'm just going to say this is just going to have like a I'm just going to copy and paste some you know some HTML here so we don't waste too much time you paste this paste this n so you just uh it's going to have a class of content uh and I'll be you know obviously adding a CSS file to this um yeah so I'm gonna include another thesis folder later but that will be for later let's just have like a button here that says video and another button here that said stop video and then I can also include my um JavaScript Scripts um put this at the bottom just below the closing body tag that's in scripts that brings in popup.js into our um pop up the HTML file before we do any more programming on this let's just see how this looks in our Chrome extension so it's time to load unpacked our Chrome extension now let's finally go into our Chrome browser and how do we access our extensions you can either go here click in this ellipses button at the top right corner of your Chrome browser and we can go into more tools and then click on extensions when I do this it opens in brand new tab and of course I'll just remove this real quick it opens a brand new tab and of course you can if you don't have developer mode turned on please just take this developer mode on at the top right corner this will enable you to be able to load in your Chrome extensions into um Google Chrome so you can see the next button for us to click will be load unpacked and I'm going to look for look for my Chrome extensions folder which is called extension tutorial and the documents folder of my PC let's click on load unpacked and I'll look for extension tutorial and I'll click on select you can see that I have brought in the graph a screen recorder and it records the user screen and this these are the this is the metadata from our manifest.json file that we just specified you can see if we go over here the graph is current order records user screen perfect so you can see that we have an active um uh screen recorder and this image that shows here is from this um Rec logo here that shows here is from the um icons property and I'll show you in a bit how to pin your Chrome extension because this the graphics screen recorder is not here quite yet and how do we pin that we click on this extension icon here at the top click on this you can scroll down and then we can look for the graphics the graphics screen recorder they click on this pin icon then we'll click on the pin icon we have automatically pinned this so you can see now we can see the graphics screen recorder it's now pinned to our Chrome browser um so uh obviously we want to you know click on it to see how it looks like so when I click on it you can see that we have our HTML content very Bare Bones no style whatsoever um so uh we we can go along with this but I'm gonna just show you guys some CSS so you can know how to bring in CSS to your file it's just the same way you would want to do it in the first place right so I'll just come in here and I will just you know use go to the Head Tab and you know type in the link tab a functionality to bring out this link tag here and the href will then be a CSS path with which I'm yet to create without creating a little bit is going to be a CSS folder that has style.css as its content I'm going to make that folder now it's going to be a CSS folder and I'm going to create a styles CSS and then it's going to be a really bare bone style feel free to edit this to your hearts uh contents but I'm just going to um copy some content feel free to copy this same content from my uh GitHub repository so this basically just giving it like some default styling across the sheets um no zero button zero pattern and photobox as the Box sizing and then gives it some but some Bare Bones style in here give it the bourbon Stalin um padding you know some hover effects uh all these you know don't really matter just work on the styles on your own perfect so I'm gonna save this again and how do we like update our saved extension because it doesn't update automatically so the first step what we do is we come here and click this refresh button over here this refresh button over here also click the refresh button it's refreshes the state and then we can try to click on it again you can see this is the style not very pretty um well you know it's just just showing you how to you know uh add some styling right now make it make it not too ugly I'll just come here real quick and just add like a brake line at the bottom here and we just come here and give it a style uh the buttons here to be maybe a width of a hundred percent right and I'll save this let me see how that looks uh I don't know whether it'll look good or not just the plan to make it look a little bit more presentable I guess and it's it's okay you can change this maybe change the button to red but I won't do that right now uh let's just know that the style is working which is pretty good pretty good so obviously you can also check the Chrome Dev tools because this is an HTML script here we can check we can inspect it to see the dev tools behind it and just bring that over here so I click right click and click on inspect and then brought about this so you can also check the console if there are some errors here with the Javascript file which we haven't brought in yet and I'm going to bring it in right now so I'll just come quickly and go back to our file here to bring in our pop-up.js um yeah we've actually brought it in let's check whether it's connected um we put it in here at line in a second we brought it in here at the line um 23. I'm sorry if the screen was too small for you guys to see um the words I've made it a little bigger now I think it's super much better much better now I think it is cool so so yeah so I'm gonna go to pop up the JS which is let me just close this files real quick so it doesn't get too cluttered good so um I'm gonna go to popular GS right now um which is here so cool so I'm going to console.log um here just to be sure that it's properly connected to our pop-up the HTML file so come here and I will reload again and click so once this spreads out once this appears it loads our pop-up the JS file so let me just click on inspect it right click and click on inspect again and if I go to console.log we see we see this here log and if you can see where it's coming from it's coming from the it's coming from the pop-up JS and line one you can see the hear log cool very nice so we're going to add some proper functionality to this in a little bit and I'm just going to be showing you guys exactly how to communicate with um uh the page so we're going to be building a a Chrome extension we've got to remember our mission here we're going to be building a Chrome extension that records the user screen so the first step in making that a possibility of course is to you know determine um what happens when we click um take a video and stop a video obviously you want this to do some kind of activity on the page that we want to record so this will bring us to a very interesting topic called the messaging and Chrome extensions and the how it works in general so I'm not going to create a new notes file here notes dots txt just to explain how the messaging sort of works in the Chrome extension so it is possible to send a message from the pop-up dot JS file to um the particular tab right to a particular tab um to do something basically right it is very possible to do that um it's possible to send from the tab as well back to the pop-up .js file and it's all these things there's like this interconnection and a message sending capabilities in a Chrome extension it makes it really really um you know robust and really amazing to use and very powerful at the same time so there's this communication between the tab which will basically um translates to the content scripts which I will create in a little bit um so there's this constant communication between these different scripts we're making and it was a message sending in between them to do certain functions and I'll go very deeply into that in the next few minutes and um there's also a communication between the tab and all these things right and the background the JS Scripts we've not yet talked too much about the background script this is very is a very important script inserting doing certain tasks in the future I'll make more complex videos on Chrome extensions so that I can cover the certain nuances of background.js but the whole point of this new note the txt file is to show you that there is this constant communication um some bi-directional really communication between these different scripts that make it so powerful and they all communicate with each other pop-up web background background with um pop up pop up with the content script kind of script with you know all of them all communicate with each other to make everything so um to come and have this flawless single seamless transfer of information between all of them and I'm just blabbing a bit but I want to stress the importance of this bi-directional communication between these three key parties of Chrome extension I'll call them here key parties of a Chrome extension perfect so I'm just going to save this file uh it's just not that important just for you guys to have like an idea of you know the real power unlocking the real power of a Chrome extension so I'll just come over here to the pop-up and you know back on a mission to determine what exactly this video button actually does so what I'll do is um before I even talk about this pop-up and what a pop actually does there's something I also need to talk about I talked in this notes the txt I talked about um the content scripts and we haven't even created a Content script what is a Content script well basically content script is a script that we inject into our user page into our web page to change certain characteristics run certain functions on the the web page that's exactly what the content script does um so how how does the content script work how are we going to actually utilize the content script uh in this particular scenario um how do we inject the content script the injection process is brought about by background.js and a lot of these topics I'm talking about are all covered in this how to build a Chrome extension material um article it's really really detailed but I I digress so let's talk about how we can actually inject the content script injecting the content script is a very important first step in a Chrome extension because once the page loads we need to be able to interact the pop-up needs to be able to interact with the content script on the loaded page and if the condos script hasn't been injected yet by the background JS which is responsible for the injection of the content script to your web page the pop-up script can't really communicate even with even if we set every single button on this page to work so the first step on you know work in a functional Chrome extension is to actually inject that content script right uh so we're just going to go ahead and do that real quickly so to inject the content script we need to set a couple of permissions to our manifest.json file since we are going to be injecting a script we need to um basically talk about injecting the scripting permission just get that real quick so the permission is called scripting so come in here and I will put script in in small caps and the we also need the tabs API to access the individual tabs of our browser right and we also finally need um the active tab to get the app the tab that the user is currently on uh you know it's very all these will make sense when I write the code for the tabs API well basically we need this three permissions to inject any script to the background.js in the first place so be sure to put these things these three scripts here under your permissions to actually inject the script perfect so let's go to background.js and see what we can do and how we can actually start the script injection process so the first step um you know to doing this basically is to um note that there is a chrome object all as well I've not talked about this chrome object here but basically Instagram objects has a lot of properties and you know methods associated with it that is exposed to us by the Chrome extension API so in this situation the ones who haven't since we've set permissions for tabs in line 30 here for over manifest.json we want to basically access the Chrome's API the tabs API excuse me so I can say Chrome dot tabs dot in this case we want to check for when a tab the the state of a tab has changed or has been updated and there are different states of a tab that we can check and the major State we're looking for is the complete State meaning that the tab just became fully loaded the page just became fully loaded after you know going to google.com google.com does for example just fully loads it sends it runs this listener so I'm going to call this the on updated it's what it's called basically so Chrome the tabs when the tab is updated I want to listen for that update data so that's what this line of code means so we're going to be using the add listener method here but you know with the tabs API exposes the tabs property and the automated property as well so we can listen for when the tap has actually had an updated state so when it has this uh event listener has a callback function callback URL when um the tab State changes and this has a few arguments as well this is gonna have to tap ID so every ID and every tab in uh the Chrome browser has an ID which will become very very useful in this uh um during the Run of our of this particular video so there's also something called the change info you know um the info that the info of the change and there's the tab itself the tab data the tab that actually underwent this updates functionality so at what points do we want to inject our content script before we inject our content script of course let's make our content scripts so I'm just going to call the script contents.js and I'm going to just put a console.log Pi I have been injected you know to show that the script has been actually being injected on the web page right it's going to save this I'm going to go back to background and I want to only inject this script if the change info dot status is equal to complete meaning that only if you know the page has loaded completely and uh only if and this is going to be like a regular expression here only if the URL of the tab has uh http http you know in its string URL so we don't want any URL that doesn't have HTTP for example this extensions URL let's not begin with the HTTP it begins with the Chrome uh column slash you don't want it to run scripts on this particular page right only in pages that have the HTTP there which includes https this doesn't mean anything because we hate or just HTTP is good enough so HTTP so we're gonna write this regular expression DOT test tab dot URL so only if I know it's a bit of a long expression but only if the page load in status is complete and if the HTTP the test no text the test um of the tab URL is actually true that's only if it's an actual website so only then we want to say Chrome dot we want to inject the script so we need a scripting um API dot execute the executes script method and the tab the first thing is the targets so where do you want to execute the scripts we want the execute the script in the tab with tab ID to be tab ID or we could just ignore the double um key value pair according to es6 and we want to you can inject multiple files for really want to inject one file which is our four slash contents.js and of course this has a this can either pass or fail depending on you know if the file exists or files exist so there's going to be event here and this then is going to have a callback function of course uh we say console.log we have injected [Music] um content script or foreground scripts I want to show you where this logs for the background file appear it's different from where the ones from the for the pop-up file up here but I'm going to show you that in a little bit um so the catch of course if it doesn't successfully inject the scripts it's gonna have an error here I'm just going to cancel the log error error and background scripts line 10. okay this is going to save this and then I'm going to test this and how I'm how am I going to test this I'm going to say it's going to reload the page here um I'm going to go to a new tab and just go to google.com and then I'm going to inspect the check if we were actually successful and injecting the scripts you see it's still loading google.com pretty slowly so it's not yet injected in any script but we'll just wait for a little bit and when we scroll down hopefully we see we have high I have been injected well P because this is the content script that has been injected once the Google page totally completely loads so um that's the importance of let's try this properly okay that's the importance of this uh code injection process that should run whenever the tab is updated and I said I'll show you where this constant lock runs after the background script has been injected and that is it runs here in this service worker so when I click on it you can see that um a second okay because it wasn't really active back then it didn't really log anything so what I'll just do is I'll just reload the page again to see how it logs um so you can see this the background page here just waiting for the log to be for the Google page to load and you can see that we get this our login the we have injected the content script this is login for background.js perfect so we can we have injected.background.jscript perfect so there are a couple more things we could do with background.js but this is the major key thing according to manifest version three that we do with background GS but there are a lot of things we can do here but this is what I'm going to cover for now I'm back on JS um perfect uh there's a couple of things that you can also listen for when this Chrome extension is clicked you know and that's kind of way to Chrome dot action API that's unclicked the add listener but we're not going to go too deep into that because this doesn't really matter in this particular project but just look into the documentation there are a lot of listeners you can set up here and the background um a JS file there's also another thing I want to cover and this is it's not this code is not only um for the the code is not only for the background JS file it can also be for the pop-up.js file it's listening for runtime events so you can use Chrome dot runtime and again you don't need to you learn to access any permission so you can listen for messages which is what I discussed here in the notes the txt that we can actually listen for messages between every single file um both the background and the content as well as the pop-up.js so Chrome the runtime that on message right that add listener right and then we can sort of like listen for the request the sender and this and send back a response right even though we're not going to use is in this project I I just want to show you how we can actually do this we're going to use it but not here quite yet but we are going to use this I believe let me quickly Check Yes we are certainly going to use this so I want to show you guys this later but just showing you that we can also use this in the background JS file as well to listen to messages I'll go much more in depth in this in a few minutes so we're done with the background.js file for now the next step is what we have been discussing for a while let me just close this and clear this up a bit the next step is what we have been discussing for a while which is what actually will go into our JS file right what actually goes into our JS file and if I can just make this a little bigger good so we know that we have uh we know that we've set our pop-up.html file to do certain things but right now this button doesn't work this one doesn't work how do I make those buttons work it's with our pop-up JS file so he has to make the power.js file work properly um let's start with um you know listen for when the the proper GS file fully paints and fully loads the page on the screen so what I'll do is I'll say document dot add event listener right Dom content loaded which means when the pop-up HTML file actually loads on the page that's this file here when it actually paints all these colors on the page and everything is all painted on the page completely um that is when I want to run a code here in this callback function and the first thing I want to do is sort of um get the selectors of the buttons right so the first button of course is let me see okay uh I need to change these IDs because they don't make any sense this first ID for the popular rotational should be um starts video and then just let me call this CR starts video and this other one here stop video perfect so I'm gonna come in here and I'm going to pick out these two buttons uh so that'll be const um start video button is equal to document dot query selector it's going to be button then it's going to be an ID you're bad and this would be start button it's going to duplicate this and this one will be stop video button and this would be stop the video right this is also Star video not start button the start video perfect so we have selected these buttons according to how they look like on our HTML page and the next step is to add the event listener so add in events listeners so what we want to do is we say um starts reader button dot add eventlister so listen for one of the start video button is clicked and they want to run a function in here and this is when we start majorly using our tabs and active tabs API so what wants to happen here is we want to start recording the active screen I want to start recording the screen that we the user is currently on for example this current Chrome extension docs screen I want to start recording the screen right so how do we do that how do we start recording this screen the first step of course is to look for the tab that the user is currently on to do that we just do Chrome the tabs the query huh odd sorry small recording issue there uh pain in mind to that uh so the first step as I was saying is Chrome the tabs.query and I want to query for the tab that is active this is where the active tab permission comes to play so I'll come in here and say active to true this is what exports is the active tab permission for us and then current window as well is true so the same window the user is in and the same tab the user is in it's going to query for that particular tab right and this is just like you know filter options you can get all the tabs you want to get without these options of of course well we need to get the active tab so when the active tab has been located we are exposed to the tab to this tabs functionality here um so we get all the tabs that are found by this and we're hoping for this one tab but we're gonna like get the first active tab we get from the tabs array so there's going to be an array this tab is going to be an array uh but we want to send a message to that particular tab which will then be sent by effects to this content script that we put this in this High I've injected will P um log there so want to send a message to that to the tab to start the recording process it starts the screen recording process so that'll to do that we need to do Chrome dot yet again the tabs API which is so important that send message I was going to send a message to taps the first tab right in the array dot ID you know the tabs has an ID property and this is how cinemessage works so we send a message according to what I described in the notes the txt we send a message from one file the pop-up and will listen for it on the content script and I'll show you exactly how that works in a little bit but for now I'm just going to send a message which goes to this particular tab ID and this next argument takes in the content of the message which is the action is open dialog box and the Callback function when this actually happens it takes in the response we get so uh of course we want to see if we get a proper response and so but first of all to check if there's an error so if um there is no error first of all just Chrome the runtime the last error if there is no error once you come to the log the response we get right and this open dialog box actually does something it it's it starts um the entire recording process right that's what it does it opens the dialog box of like making the recording request so that's why I call this open dialog box you can call it anything else really um okay let me just say call it request recording because the user needs to provide permission to your extension to record their screen so we need to request recording here um this you can call this literally anything you want to call it doesn't really matter I'm going to show you that you can literally call this whatever you want to in a little second uh but I just want to log the response I get from this and I'll do an else statements here and this L statement I'll just come to the log um the error then let's copy this paste here uh oops my bad little copying error there copy this and paste here yes perfect so let us call this error line 14. right perfect so this is what we want to do when the start video button is clicked we want to actually start the video right perfect so um on the start video like start with the recording but I just call this type it doesn't really matter um you can call it whatever you want to call it so what's going to be listing for this action now we need to be sure that we are listening properly for this action and this how do we actually consume and listen for this action right we do that by doing the same thing I showed you guys a second ago in the background of JS which is um Chrome dot runtime dot that's in the runtime of the entire Chrome extension process when it gets a message listen for that message right listen for that message and this takes in a function callback function that takes in a couple of arguments which is the message the sender and a function that sends back a response so an installation I'm gonna look listen for the recorder request here and say if message that action that when we write messages action here because we actually pass in an action property in the object for Senate so if messages action is equal to the market the content script here is equal to this request recording then want to like you know come to that log requesting recording right so we save this real quick and I really encourage you to code with me because it's the best way to fully you know understand the topic uh we will write the remainder of the code in a few minutes here but I I just want to be sure that this is actually properly connected so let's do a quick recap here so when the button is clicked we want to find all the um the tabs that is active to start recording for and when we get the tabs it really returns in an array but it's really just one tab if it's active so we get the first step with the zeroth index and we want to send a message using the tabs API to this particular ID of the first step and then we the message you want to send is request recording right and to send this message here we need to be listened for it in somewhere else either in the background no in this situation since we're sending to a tab we have to listen to the message in the content script which is going to be embedded in one of these tabs right it's a lot to take in for now just rewatch the video it'll all make sense uh so you watch it a couple of times so um yes so once the message is sent here you go to the content it basically just listens for the message and then logs back and then one final thing I wanted to do so that it doesn't throw an error it's under the center response back saying scene right um or I can hold this like processed I'll just write this in a in backticks Auto say processed and say message that action good okay so this sensor responds back to the sender right and then that's what we get here and in pop-up when we constantly log our response so this is the response we get from the content script perfect so that's a lot of talking and a lot of coding Let's test this and practice so let me go back to extensions here and you know reload the state and go to google.com again and go back to go to my uh inspect to my Dev tool to see if it gets injected properly so you can see it's been injected you can see that log there real quick I can scroll up to its high I have an adjustable P pretty cool then when I come here and I click on start video okay let me see if I actually get anything so you can see I get request and recording three times if I check the logs on the actual uh popup.js file I can see processed request recording because it sends this back it sent a message back to the pop-up.js file after it's since it's it's the pop of the JS file send a message to the content script so now we can see that there's this um bi-directional communication which is what I described a few minutes ago uh between the all of the scripts in the content script in the public of jscript and the background script is this like bi-directional communication between all of them so yeah it's pretty cool it's pretty cool stuff so yeah so that works so I think the next step right now is actually coding the um recording feature right and how do we do that we um need to first of all request we need the First full request our browser to grant us permission to record the device and I'm going to type that really quickly um it's just there's this um General object uh in our Chrome browser called Navigator and how we ask for permission is we say media devices right um navigate to the media devices that gets display media and then we want to pass in the audio as well as the video this video is going to have a width and a height and I'll notice that what worked is the passing this really huge number um to have like a proper you know resolution just passing a really huge number at least 10 lines or whatever you want to pass in there but it must be like a really huge number um for both the height and the width of the video you're requesting and then when giving granted access then we have access to the stream of the screen right the stream of the screen we have access and then this is also going to be a function you know the Callback function that has the stream as a parameter and then we want to uh run in particular the recording function which is going to be a bit of code um yeah it's going to be a bit of code uh so when the axis is actually approved we want to run a function that says on access approved and passing the string we haven't made this function yet right we want to make this function and to do that we say let's come at the top here and say function on access approved this takes in the Stream and then you know we can start writing the function in there so before we do that we want to assign a global variable here I'm using the VAR here because if I don't use far it's when I read a Chrome extension injects the scripts to the top to a new tab is going to reassign try to reassign this recorder variable and it's going to throw an error so to prevent that instead of using lets or const I'm going to use VAR because that's just how JavaScript Works bar can be used multiple times as opposed to let so this is how it's just going to be just take it like this for now uh so this is going to be Global recorder variable which we're going to access under um access approved so when the access has been approved for the user screen for the media devices user screen you know want to say recorder is equal to and I'm going to be some what they call the media recorder API to record our screen so we're going to define a new media recorder API that takes in the Stream So it records this train and then we're going to start that recording process we're saying recorder that starts and yeah this starts our recording but we want to be sure that we can actually listen for when we have to stop our recording you know what happens when it actually gets stopped so recorder dot on stop something should happen right and you say it should be equal to a function obviously that actually stops the recording but how does it stop the recording it's accesses the stream and accesses a method called get tracks and and just stay with me here there's going to be a lot of code but you know just follow along and type I can get these things from online too if you do some little research but just follow me here um you get the stream get get tracks and for every single track you get uh which basically the stream is right into different tracks different likes like just imagine it as it streaming dives into different parts of an image that make a video so these are the different tracks you get and for each you know track run a function before each function basically because it returns an array that gets a track and then if the track dot ready States is equal to live then we want to stop the track so this generally stops the recording and then uh you know it just stops the recording that's literally all it does but how do we access the recording right to access the recording we need to look for a recorder listen for recorded dot on data available which means there's some data to save that's available so this is the final huge function I believe I like to Hope but there's any other thing we need to add I will tell you but this is rumors the final stretch here so we just say um far in this case we want to save it this comes in as a blob basically the event comes in as a blob of of data basically a blob is a data type in JavaScript that like is like restoring files and stuff so I don't say um let's record it blob is equal to events.data right and after I get the data I can say Okay I want to create a URL to actually save this um recording so the URL will be let URL is equal to URL dot create object URL this actually creates a URL from the recorded blob that's what this URL the create object URL function does in JavaScript so it takes in the blob it's creates a Euro from The Blob so that we can download it to our system and then how do we download it to a system we need to do a little um Dom manipulation trick on our client side and note all this all this code we're writing are on the content script which is the web page we're going to be manipulating the web page basically which is one of the major functionalities of a Chrome extension to modify the web page and make things work for the user on the web page so how are we going to modify the web page to download this recorded block from the URL we're going to first of all create an a tag I've seen document.createelement attack so we're going to create an attack first of all and say okay we don't want to display this the a tag we want to make the display to be none right and we want to set the href of the a tag to be URL which is the URL that's been transformed from the recorded blob right and then you want to set the download file name to be and this is a very crucial warning um this media recorder only saves a file in webm uh which is a recording extension it doesn't say it's an mp4 so whatever you're recording on your um uh Chrome browser or literally anything like basically your Chrome browser uh it's gonna be recorded in the dot webm so we're going to save this as screen recording dot webm not got the MP4 because this will not work and this will be that webm very important so we set the download name as this and we then want to append the attack to the document body right this appends the eight out of the document body so all these a tags after I added a URL the href the download name made it invisible we then appended to the body of the tab um web page we currently are on so after doing that um the the next thing to do is a DOT click do then click the a tag you know to download it like a human would click it so this is the automation part of the description I gave to what a Chrome extension does you can use a criminal detection to automate certain tasks like clicking like hovering and other important tasks in um programming right cool so Ada click and document.body dot remove child after it's clicked want to remove the child so that it's as if it was never there and it doesn't clock the page and final thing I want to do is revoke objects URL which then like revokes according to what it says the object URL from the attack we just removed cool so this is what happens is a bit of a couple of lines of code but if you go go through it's perfectly understandable you are getting the blob of data that's been saved from the recording converting to a URL creating an a tag appended that URL to the a tag and then clicking on the on the attack to download the file to the user's computer and then removing the a tag all in one and revoking the URL simple well basically scramble that if you describe like that it's pretty simple right so um so yeah that's what on access approved does uh to reiterate it just takes in the Stream and then creates the recorder and sets up the listeners for the recorder that's pretty much all it does and then yeah uh before I deploy this I want to uh stop the video I want to write the code for stuff in the video and to write the code for stuff in the video I need to go to the pop of the JS file and do the add an event listener for stopping the video right so I'm just going to copy um this is gonna be like pretty much very very close to this I'm just going to copy this exact same thing here to save time and then what I'll call this one stop video instead and it's still going to look for look through look for the active tab but instead of requesting record it's going to stop video right and then it's going to do this the whole same stick uh I'll just call this error in line 27. supposed to 14. and then we need to listen for the Stop video action as well so I'm just going to save this and listen for the Stop video action and then uh maybe before I fully uh implements the stop video let me let's see whether what we have works on the ground right let's see it's better to just test it right now so I've reloaded my page a couple of times I want to reload this page as well since it has an updated script so that it can inject an updated script uh so we're just going to reload this page quickly and wait for it to be injected cool so I'll come here I'm going to click on start video and it brings out this pop-up you know we can record our video record window record the entire screen and literally you can do anything right so what I want to do is I just want to record a particular Chrome tab which is um this Chrome extension stab so we're going to click on share button and then you can it's currently recording this so the recording works right the recording works properly but what I'm not very sure of is I the list stop button doesn't work but let me see if stop sharing will actually download the recorded file so that didn't work let me show that there's an error there's no error so basically the stop edit note that it has been stopped so that's why we need to uh code the stop video because this is a stop video that actually sends the stop method that initiates this uh let me show you quickly that initiates this particular one second stop functionality and then when this when when the tracks are actually stopped it's also calls on the on data available functionality to actually download the um to download the the data available from the recording to a new file so let me show you how that works now I'm just going to go here and create a new message action I call this it message that action is equal to stop video do something so it's going to stop the video if that's the case and then how do we do that how do we make it stop the video right uh we do that by coming here and let's just leave a lock here comes to the log first of all let's say stop in video and then I want to send a response back to the sender let's copy this paste it here right so it's sending this action and then the next thing I want to do is if there is no recorder that means if this recorder variable has not been defined you know it's just going to return there's no recorder yet so this recorder variable right here if it hasn't been defined yet still null how to say if there's no recorder simply return console.log no recorder right else it's called recorder.stop it's going to call this recorded a stop functionality which in theory is supposed to listen for the unstopped variable here and stop this and once it's stopped it should have data available available here basically so yeah that's pretty much what should happen so let's see um let's see I'm just looking through the code real quick cool cool cool cool everything makes sense um so basically what's going on is after recording has been requested you know ask for permission set ask them to like select what the the media they want to record whatever the tab the window or the entire screen and then when the app is has been granted you run it on access approved functionality which then listens for um audience stop method and the um on data available method that then initiates automatically the download of the file so let's see if this finally works let me just quickly go up here and go here and try to reload the screen recorder and reload the page as well of google.com then I'm going to try to click on this and start the video and then I'm going to try to record the entire window right and then click on share so it's recording the entire window right now right uh can increase it decrease this see it moving and I can come here click on stop video and you can see it's telling me to save this video somewhere in the download folder because what happens is it saw that the video has stopped it stopped all the tracks and then so that a data was actually available after there's a stop of the video and then it made available in the downloads folder I'm going to click on Save I can click on recording I can see this is the recording playing right now you can see this is the recording playing right now this is not me this is the recording plane perfect so I can play this again perfect great so yeah that's pretty much it we've learned quite a lot today haven't we so uh just to do a quick quick recap we learned uh about um the bi-directional communication between the back between the content and the pop-up we don't really do much communication with the background but we can also do communication on the background as well we to store certain data in like local storage of the background we can do a lot of things here uh I'm gonna release some videos in the future going more in depth into Chrome extension development but for now this is uh it's pretty good so what we did here is we designed the HTML we added like certain listeners to each button in the HTML and we effectively just added a click listener and sent a message to the using the tabs API since they send a message to the active tab uh to request the recording and then this is listen for in the request.js which has been in the content the JS part of me which has been injected into the tabs by the background the JS and then when it listens for this for the request recording it's actually requests for the record inform the user and then the user provides a stream a particular media device whether it's the window the tabs or the entire screen to be recorded and then when the access is approved by the user it runs this on access approved functionality then it's record starts recording after instantiating the media recorder class and then it listens for the unstop uh command and this is for the on data available command once the data has been stopped by clicking on the install button that we added for here it sends stop video to the content JS which then looks for if the recorder has been already defined then it stops the recording and this top recording leads to a chain of events which starts by running this on stop function to actually stop the tracks of the recording and once the tracks have all been stopped all their live tracks have been stopped it's automatically automatically makes data available for download that's why this on data function runs once this unstop function has run its course so function runs we create a blob we convert The Blob to a URL that's downloadable by the user we create an a tag and append the URL to the hatred attributes of that ATAC and append that a tag to the document body we click on the a tag by some basic automation to download the video and then we remove the attack to do some cleanup and revoke the object URL and that's pretty much the end of this entire course so there are a lot of things more to learn about Chrome extensions which is just like a um you know a real world project to get you started on the idea of making a Chrome extension in general right so yeah if you loved this content you know leave a like remember to subscribe because that really helps and I will see you um another video also remember leave your questions in the comment section you know below and yeah that's pretty much it see you guys

Channel: Degraphe

Views: 6,149

Keywords: javascript, chrome extension, html, css, nodejs, design, software, software engineering, coding, programming, development, web development, web app, app, mobile first, chrome app, chrome design, chrome automation, chrome, chrome extension development, chrome design development, chrome video, screen recorder, media recorder

Id: XQxPnrOqffU

Length: 75min 18sec (4518 seconds)

Published: Mon Jul 10 2023