Building a Loom like chrome extension with React by Aakash Sharma

I work as a I'm myself a Founder I'm working on my own startup right now so this is something that I quite experienced in my last startup where the idea was that we will uh you know build up Loom like extension and using that extension we will we had our own react app let's say and that app basically uh creates branded videos so in my last talk public Iran would know I basically presented how you can create your own custom branded videos which means custom branded videos as in you will have your own canvas you will have your own brand design and on top of that you can present your own screen and act and actually record the entire canvas so if we are let's say doing this talk for O's life you can give o slash branding in the background and then on top of that share our screen and get the entire recording so we can basically get and create branded videos so there I got to learn how to build you know your own Chrome extensions but if you go the vanilla way the main problem is again what Akash also told about that you you cannot basically reuse the components right so it's it gets really tough to you know create extensions with plain uh JavaScript so my idea and the problem was same that how do I you know bring react to the context and you know use the powers of react like States and context stores all of those things and create an extension using react so that is what we are going to learn here so before you know moving ahead I would really want to ask you like how many of you have like basic idea of react like very basic okay cool and how many of you have previously worked on any sort of extensions I mean heads up to you and I good so uh so there are two ways of me teaching I wanted this to be you know a kind of an interaction where you really get to take something home so there are two ways of doing this one is where I just show my code right and I just explain you what that code is actually doing and the second one is I basically create a new project and uh you know uh create a live extension in front of you uh though I only have half an hour so we have a time constraint so if we do the second approach uh you know we might not be able to complete the entire extension but if we do the first approach we will be able to I'll be at least able to tell you the entire process of what's going on so it's up to you guys like which approach we want to go anyone sure okay so in that case I'd just uh show my code and I'll just explain you what all it's doing right okay so extension most of us know most of us have used it so it's basically you can consider it as a utility for your browser and it has access to all of your tabs all the actions you're doing on your browser and you can basically consume all your browser apis using an extension and make out a similar utility for your users right now how does this differ so most of you would have seen whenever you build your react application it basically generates a folder which have HTML CSS and there is also one manifest file which you can add so if you go to your react app I'll just show it to you there is this public how do I share this cool yeah yeah sure thank you yeah so I'll just zoom in so you will see that in our react app simple react app we have this public folder here and the public folder contains a manifest file so ideally this manifest file will contain the link to yours have icons and other stuff which basically used by your web app to display the icon in the tab header and things like that so there is only one difference on how your browser treats a particular web app as an extension versus as an Excel website is that here you basically Define this manifest and you basically uh give it a manifest version and using this context whatever is provided by you know Google Chrome uh we we will just put that manifest and your browser your Google Chrome browser will automatically consider this app or consider this set of HTML CSS and JavaScript code as a Chrome extension now all we need to do is when we basically build so if I go to the build and I go I will see that the same manifest is there it's just minified so the same manifest is there and with this manifest now our browser will know that I have to treat this chunk of chunks of file as a browser extension and not as a web app cool so we will now first see how exactly a Chrome extension works so there is something called as message passing API which I'll talk about later but all in all the idea is that extension has something called as content scripts and something called as background scripts so you can consider so from manifest version there were two versions of manifest which Chrome supports one is two when and one is three three works on service workers while two is a simple or globally shared background script so the idea of this background script is to manage everything you can consider me as the background script and you can consider you as any client or any particular web page that is trying to load that extension right so we have one at one place we have our background service file background Javascript file and on the other hand we have the content script file which will load the extension and do stuff there and how do we basically talk to each other okay this particular tab you know try to do something try to click somewhere or whatever right then I will send some message to you you listen to that message and then again you will reply okay this message is done so that is exactly the main idea of Chrome extension is so what we will do is whenever our Chrome extension is installed on a browser we will just install that content script to each tab that is already existing and it's Chrome's job to automatically insert that script to all the new tabs that we create from the non tool so I'll just show you how we can uh create uh we we can set up our extension uh in the act so all I did it till this point let's assume all I did till now is creating a simple react app right and after creating that app I just changed this manifest to this so if you look closely here I just give my extension a name a description the Manifest version It's using the version that I want to publish it to and these are other couple of things which I will discuss later in the session right so using this manifest file my browser will know that this application is a Chrome extension so this is this is like what I have changed and if you'll go and just do this and so basically to load your extension in your browser all you need to do is let me just go to Chrome so you can go to Chrome extensions and here you will see this developer mode in the right I don't know if you guys can see it yeah so you you can you can just enable this developer mode and once you do that you will see these three buttons in the bottom so here you will have this option to load and pack so when you click this all you need to do is so when you click on load and tag you just need to import or upload that build folder which is generated by your react app and that's it using that manifest file now your browser will install that as an extension to your browser so let me just do that for you and just to remove this and I'll do that again so I did load and then I went to my documents sorry sorry you basically have to select the build folder it's just clicking twice yeah so whenever you basically put that build folder or upload that build folder it will automatically install your application as an extension now once it your browser knows that okay this is going to be the extension file there are couple of problems here one problem is whenever you basically build your app your react app what it does is it basically uh puts some code AS inline JavaScript code directly into your HTML page which is not supported in Chrome extensions so to remove that you can go to your packages on file and all you need to do is in your build script you have to set that as inline runtime chunk as false so I don't know if you guys can see this or not so all you need to do is you can just set that this inline runtime chunk as false and this way your react app when it builds it won't basically generate that inline JavaScript instead it will keep it as a separate file which is exactly what we want now there is another problem also I if you if you would have looked at reacts build more closely react only generates one Javascript file but here in our extension we want to JavaScript files one is for the background JavaScript and one is the injected script that we want to use so to do that there are multiple ways you can do uh you've all heard of webpack config right so to get your webpack config you can do npm run eject and it will generate a webpack configure for you which you can modify or you can use other JavaScript Builders like I am using Cracker here so if you go I've installed cracker here and I'll just show you so here you'll see I have write two files here in my entry one is content and one is background which is pointing to my uh so this content file is pointing to my main app code which is which I will be injecting to each tab in my browser and the background file is the background file which will be handling everything from the top right so if I do this now let me just run build for you right so now if you'll go to bid go to static and JS now you'll see it has generated two files one is your content JS and one is your background in JS so this solves our problem of creating two files out of your R build right now there is another problem so how many of you folks have heard of Shadow root Shadow Dom right so basically when you want to have a separate context from your main app so what we want here is let's say you created some Styles in your extension we want to decouple them from the main absence we are going to inject our script into the current tab let's say that particular app is using some class name called hello right and v in our extension also used hello so there will be config conflict of classes and my Styles like extension styles are going to apply to that or vice versa so we want to basically decouple that from our main extension code right so basically uh what will happen now is every time you generate your build you can go to the CSS folder and you can see it basically generates some random string right uh Main and some random string will be there so it every end it changes every time so every time I generate a new build this string is going to change and in your Chrome extension manifest file file just go yeah so you have something called is web accessible resources which means these are the resources that your extension will share as a file to that particular page which is trying to load the extension otherwise so what we try what we want to do here is we want to load that particular style CSS file into our extension so to load that into our extension we basically want that particular website to load our extension file right but now here the problem is that every time our you know build is getting generated every time I do yarn build or npm build I basically have to go to this manifest file and go to this web accessible resources and write my write the path to my CSS file here so this is like a small hack which I did so I created this simple script file and what this basically does is it basically goes to that manifest file go to that WebEx uh pass that as a Json takes that web accessible resources key and when my build is generated when my build is completed I run a post build script you guys know what post build script are right so that will run after your build is completed so in that I basically passed this script and automatically it's going to take that CSS new generated CSS file and change that string in my path in my manifest so this way I don't have to manually do the write the path of the CSS file every time I generate a new build right now let's yes so we are here we have set up a basic Chrome extension now where we basically now know that every time our CSS or our style file is generated we now are able to specify in our web accessible resources so whenever any website is trying to load our extension it also have the filed to style our extension accordingly right now we'll talk about message passing API so Chrome basically introduced this message passing API through which you can basically talk between your background script in the script which is running on the client on that particular web page so the idea here is let's say I want that whenever some user clicks on the icon extension I want to load a pop-up which is exactly what Loom does right so in that case what my content script will do content script will say he uh my background script will know key that the equivalent is clicked over there right so it will send a message to the content script saying that the icon is being clicked and my content script will listen to that message and will try to load that pop-up because the icon is clicked so that is exactly Sim it is very similar to how you write node right so you just have to basically tell to send a particular message with a particular payload and then that end will receive that and you can have a switch case or whatever to render different different cases of each message and for each particular case you can run your own Handler function to basically do whatever you want right and you can do vice versa so my content script also can send some message to the background script and ask it to do some stuff right cool so let's get a basic architecture or of what we want to do here we want that the user will go and click on the extension it will load a particular pop-up that will have some sort of CTO to start our recording and it will basically record our entire screen that is the idea here right so let me first try to show you how it looks in action so see when I clicked my extension it automatically loaded that pop-up right there and it also loaded a loom like Dom here which is my media stream right and now when I basically go and click on start recording it basically asks me to share my entire screen or window or whatever and I can start my screen recording now so I can do blah blah blah and then when I'll go scroll down and then when I stop my screen recording I have the generated video so this is I think yeah so you guys can see that this generated a video of me doing that exact recording so this is the idea of this creating this extension we want to build that whenever the user clicks on that button on the pop-up it basically start recording my entire screen and convert that to a blob and further convert it to a video and show that video to us so this is what we will be building so I'll just go to code again so let's divide this two few steps our first idea is to get that pop-up whenever that icon is clicked right so I'll just show you that part okay so before talking about that there are two ways of uh opening an extension so there is something called as action key in your manifest file this one so here you can basically uh Define the path of the file which should run right after uh user clicks on the extension or whenever your extension is installed in a particular script so there are two ways so one is when you basically Define that file path in that case it'll inject that particular file to every tab that is going to load that extension the other way is you just Define the action and you just Define the title and then you have your own Handler in your background script file which will manually inject that file to that particular tab that's what we want to do here because we don't want this pop-up to show up every time we open a new uh tab right you only want to show this pop-up only when that particular icon is clicked so just go to my background sorry so this is basically an event which fires whenever your extension is installed on any particle any particular browser so here the idea of running this function is uh you've seen all the extension how the work is whenever you install the extension for every new tab or every new website that you go it will load the scripts automatically there but all for all the previous scripts or all the previous tabs or websites which are there it won't inject that content script to those so here the idea is we are running this Handler and we are uh yeah right so Chrome extension it's limited on Chrome so you you can the only thing you can do is uh the one which I have done that creating a post build script which automatically injects your newly created CSS every time in your manifest file other than that every time you basically build or make any changes to your file you can also create a vs code script which automatically generates the build on every save that is you can do but apart from that on your Chrome browser you actually have to go and reload the extension every time you make any changes so that is the part where they uh you know Chrome which Chrome has to implement so there is nothing we can do about it I think okay sure so the idea of this function over here is to basically take all the previous websites which are or all the previous tabs that are open and inject our script to that to those particular pages so here it basically takes all the windows of your Chrome and for each of those windows it will take that window ID and try to get all the tabs in that particular window and then for each tab it will basically inject our script and if I go to this inject script function it basically takes all the scripts from my manifest file and you have so all these apis which I am using here are all listed on Chrome docs so you can go and check them out later so Chrome API has this uh drone has this API Chrome extension as this API execute script which will execute any particular script so it will execute if any particular script onto that particular tab right so here I am just executing that script to my particular targeted tab so this is what it's doing and I am also inserting my CSS file to that particular tab also so that can also be done so up till this point what we have achieved is whenever our Chrome extension is installed it has taken all the tabs which were already there and it has injected all the content script to each of those tabs and it has also injected all the styles to each of those tabs so that whenever our extension load it has all the necessary files to open that pop-up now this is this chrome dot action is the same action which was listed in our manifest file in our manifest file we have the key called EXT action right so here we are doing the same we are saying key whenever that action is clicked so whenever our Chrome I our extension icon is clicked on that we have to basically listen and whenever that happens we have to we are sending a message to that particular tab that the icon is clicked so here if we'll go and see this function we are doing chrome.tabs Dot send message and then we are passing in the tab ID so it will have the access that on what was the active active tab when you basically clicked on that particular extension and using that tab ID we are basically passing this message to to that particular tab right now all all of the tabs which were there already have our content script right so they will know what to do with this particular message right so it will listen to that message and it will basically uh no key okay icon is clicked now now I basically have to load the pop up so if I go back again to my main content script file yeah so I have a use effect here and on my use effect I have on message listener so this on message listener what it will do is it will listen to all the messages that are coming to this particular tab right and it will run a message Handler on this which is nothing but a switch case function which looks for all kinds of messages that are coming and based on what type of message it is or what message it is it will basically run some function so if I go to this message Handler yeah you will see that one of the case here is when message type is icon clicked so in that case what we are doing is if recording is already going on that we want to stop the recording so this is basically an accessibility thing that whenever you are recording you can click the icon again to stop the recording and otherwise if recording is not there you basically have to show the pop-up right and uh the the other function is start stream which basically will try to get your camera stream and load that particular uh camera or div that we rendered okay cool so up to up until this point what we have done is we have basically loaded all the CSS files loaded all the Javascript file to all the tabs which were there then we calculated a function we are we calculated and I I conclude function that basically uh sent a message to our content script to basically tell it to load the pop-up and our content script basically listened to that message and loaded that pop-up and then again use this function to basically render the string right cool so now the next step is whenever our button on the pop-up is clicked we again want to uh you know uh create uh we want to ask user for the screen permission and then we want to start capturing the stream right so if you'll go and see here uh I have this button here and this button have this handle record listener so again what this will do is it will create here it's creating a message and the message type is to get the stream and it's sending uh I am told that it can happen both the ways okay so the background script can also send the message to the content script and vice versa the content script can also send the message to the background script so now here whenever I am clicking that button it's sending a message to the background script that you please try to get the stream right now I've sent the message Chrome dot runtime dot send message and here my message type is get stream right now let's go back again to our background file and see the part where we are you know rendering the get stream so here again we have this message Handler and here you have the get stream function get stream case so whenever a request comes from content script to get a particular stream we will run this function handle start recording what this will do is so how many of you folks have used of or hired of Navigator apis Okay cool so most of them you most of you know so basically to access your camera or microphone or a screen uh streams you basically have a navigator API from chrome which will basically uh request automatically request for permission from the user and if the user allows it will return a promise which will hold your stream so here we are doing the exact same thing so we are so for that particular tab we are trying to do a desktop capture this is again a chrome API which Chrome has given for extensions where you can basically uh choose a particular desktop media so we have given them given them options for screen or window or Tab and then based on whatever option they will select we will just go and uh take that stream ID it will return as a stream ID and we pass back the stream ID to our content script so here there is one point that we have to notice we cannot there are certain limitations to background script and to content script background script cannot get your access to your stream directly because it's a background script and since after manifest uh after manifest version three it's a service worker so which means it will automatically get deleted after some time right it will keep rein instantiating uh based on your usage so there are certain limitations to your background scripts and there are certain limitations uh to your content script so our content script cannot ask for user or to basically have the ability to choose a particular screen or tab to basically select which screen or tab they want to record but uh your content script have the ability to get that stream so that's why we are doing this go back flow where first your content script sent a message to your background script to know which stream ID it has to record then it basically send back a stream ID back to the content script and with that stream ID or content script is taking the stream from and starting the recording so it is this is exactly what this did it basically uh give user the option to basically choose any particular uh screen either screen or window or Tab and based on that is it basically uh now uh gave us a stream ID in a callback and we again sent a message created a message with the stream ID in the payload and again passed a message pass this message message to that particular tab which is trying to record or on which your extension is loaded right so here it passed the message and in this message particularly holds the stream ID for which we have to start recording right now if we look closely here the message type is start recording so again we will have a Handler here which will solve for when a request comes for start recording message type so here the first use case is same whenever a message whenever a message comes with a type of start recording we will see uh if it has a payload or not if it doesn't has a payload we will return an error otherwise we call our function handle recording so our handle recording function will take stream ID from our payload and here this is the part where it's trying to get the string from that particular uh particular stream ID so if you look closely you can Define the media source as desktop or whatever and here the you can see that the media Source ID is the stream ID which is come through which has come through our payload right so now it will try to record that exact particular stream which is coming through our with whichever selection the user has made right now if the stream is not coming we'll again throw an error and otherwise we will call our function start which will basically uh get this stream and get this local stream so I have also I'll just show you so I have created two custom hooks here just a second yeah so I have created two custom hooks here one is use recorder and one is use media stream the job of fuse recorder is basically to take that stream and start recording have you guys heard of media recorder apis so basically there is two things one is your stream and then your stream you can convert your stream to blob data right so basically to store or to record any sort of stream your Chrome has given your media recorder API what it will do it will take that stream and whenever the stream starts coming the chunks of data starts coming to it it'll basically try to record it and try to store that in forms of small small blobs right and once you are strong stream stops coming it will return you a one final blob that will hold your entire recording data so the idea of this Hook is to do the same that whenever we basically uh call the start function it will start taking that stream into account and start you know record that start is to so consider it like this you have a current of electricity right so basically now you have a listener you have a whatever diode or something attached to it that basically checks how much of current is flowing through that wire and it basically tries to record that data so this is exactly how media recorder API works so you have the stream flowing on going on whenever you attach that particular media recorder it will try to record all the blob data all the stream that is going through it convert those small small chunks of blobs into one single block and then return that blob and once we have the blob we can just generate a URL out of it and show it to our user the second Hook is the use media Stream hook which has nothing which is nothing but basically it will try to get your camera and your microphone stream and return that to us I'll just go to their implementation also yeah so use media stream what it will do it has a media stream straight and I state to basically tell us if your media stream is or your camera stream is coming or not right how many of you know about uh uh this type of syntax where you return a function in your use effect so this is basically done to avoid memory leaks in react where whenever our component unmounts we want to clear all our states so this is exactly what we are doing here that whenever whichever component is calling this particular hook whenever that unmounts it automatically tries to stop listening to that stream and here we have our start stream function all this does is again do the same get the Navigator media devices API and using our particular constraints I have defined constraints here where I have turned on Echo cancellation noise operations and for video I have defined the resolution so using those constraints it will try to get that particular stream out of users camera device and microphone device and basically I am setting that stream to my media stream and here I have stop stream function which will try to close all these streams which are coming through this camera and microphone device and it basically returns all of these functions and States as an object then here you have your use recorder function so this is a little bit tricky where here the idea of this Hook is basically to have a state which will hold all your small chunks of blob data and then in the end what we are going to do is we are going to convert all this blob data into one single URL which will be your video right so there is one thing here different types of browsers use different types of encoding format when they try to record a particular blob right so here are the major types or the most supported types of encoding formats which most of the browsers support so we will need this to create a final blob so if you know uh about the blob API you basically have to pass a mime type to it which is basically uh telling your Chrome or your browser to a way to basically uh you know concatenate or basically convert them to a single blob right so here I have this type state which will basically tell me the supported type of or the encoding formats my particular browser supports right then uh you have a recorder which is a ref how many of you are known to the concepts of ref I think most of you know right so refs are can you any one of you tell me the difference between ref and a state Yeah so basically your state every time your state changes your entire component is going to re-render but it's not the case with refs so you can consider F says normal variables and in any case you don't want your component to re-render whenever you want to store any value or to a particular ref in that case you will use refs reps also have other applications like forwarding reps and stuff where you can use them so react is basically uh uh react is only one way binding right so parent can send data to the child but the child cannot control the parent this is how react works right you've always pass data down to the child elements but it has never been the opposite you can do that using forwarding riffs in react but anyways so we have also created an audio context here so uh audio context is nothing but creating a context out of all the audio streams that are coming assume there are multiple audio streams which are coming right here in our case it's only one but assume uh you are trying to record a particular let's say you are trying to record Google meet you have multiple audio streams or you're trying to create your own application you're trying to create your own Google meet where you will have audio streams coming from all the participants so in that case you will have multiple streams of audios so you can create a context out of it that will hold all of those audio streams and you can control that as a as one single object so this is what audio context is for and then you have this destination node which will again be used by this audio context uh 2.2 I'll just quickly go and we'll start from how this Hook is going to be used and will accordingly cover the rest of the hook so this hook gives me a function start and if I go to my start function yeah it basically accepts a stream and a local stream by string my meaning is to yeah sure it's almost there so stream uh will take the screen capture screen or the desktop stream which is coming and local stream is basically the camera in the micros microphone stream which is coming right it will take that stream here it is basically trying to check which particular type of video encoding is supported in our particular browser so to do that I am just uh Chrome gives you this is supported uh API media recorder dot is support is type supported and I can basically check for each type which I've created in my array to check if that particular uh if any of them is supported in my browser or not if none of them is supported and throwing an error otherwise I am setting my type to that particular type now if I have my local stream coming which means if I have my camera or audio recording or audio stream coming in that case I am creating my audio context and this audio context will do nothing but just take that stream uh get the tracks out of it and take all the audio stream and put that to our audio context next up here we have our so recorder is a ref and not a state so we are doing recorder.current and we are creating a new media recorder this is exactly where your media recording or you can say that the diode is attached to your electricity wire so your string is there this is exactly where your media recorder will will start listening to this media stream so this is how you basically combine multiple streams together so here I am combining all these streams that are coming from my desktop Media or the entire screen and next I have all these streams which are coming through my local streams right I'm converting them to one string and when all the wires are connected to one particular main wire we are attaching our diode which is basically uh which will basically start listening to that stream and start recording it right here I can Define the Mind type which will try to which will use the same type which we calculated just now that whatever type our browser supported based on that it will try to use this particular mime type to record our video and you can also Define with video bits per second which is exactly what it names right so once you do that it will start listening to your stream now media recorder API gives you couple of functions one of them is on data available what this callback will do is whenever whenever any data it will start to record so assume it like this Akash is here right I am the Stream Akash is listening to me whatever I am blabbering here right so whenever he starts whenever the recording starts he will start to collect all the words which I am talking here right and whenever he has I can Define so if I'll go here I have defined 100 uh as the size here so whenever the size of my blob exceeds 100 millisecond it will convert that to one block and I'll send that blob to my own data available callback and that callback will store it right and I'll I'll keep sending my 100 millisecond chunks to Akash and he will keep you know storing all those small small chunks of blob to one particular array right so I have this add listener functions it basically again here here is our data available uh listener so this is exactly what it's doing it's calling this handle data available function and on top we had the handle data available so see if event is coming here event has data in the data size is greater than zero right in that case we are just pushing the data to our particular blob right so this is nothing but an array so here we defined our blobs array right so it is just storing pushing you know small small chunks of blob data into our array right now after your add data available function we also have this event listener whenever you are whenever the diode is detached from the stream this uh event listener will run so whenever you stop your stream recording it will try to find out the particular duration that has been passed till now and then uh it will try to take so stream is nothing but a combination of tracks right so stream can have multiple tracks it can be a video it can be audio right and multiple streams can also generate one single stream and any particular stream you can basically record it so this is how this is organized so it is trying to get all the tracks in that particular stream and for each track it is basically going to run track dot stop which will stop that which will uh tell the browser to stop listening to those tracks so it'll eventually close your camera stream close your microphone stream close your screen capturing stream right and then uh we have the start function which is nothing which will be called whenever you basically whenever your media recorder will start listening to your API so this is how this Hook is structured for the I so what this Hook is doing this Hook is attaching a media recorder to the string which is coming taking the audio stream also into the account and then converting a final media stream out of it and then to that media stream it is attaching a media recorder it is generating 100 milliseconds blobs and for all the blobs I'll just show you this part also yeah so we have this function get blobs what it does is so we have blob API also from chrome you can create blog from multiple chunks of blobs so it is very similar to stream right you can from multiple streams you can create one stream similarly from multiple blocks you can create one single block so here I am doing the same I am passing all my blobs to it and I'm passing the mine type and I'm generating a super blob here this function is doing nothing so if you'll see if you look more closely all the video which we are generating all the data of the video which we are generating has no metadata attached to it so the use of this function is just to attach metadata to it so that whenever any player tries to load this video it already has the information of the duration of the videos uh how it can be saved and all those stuff right and then it's returning the super blob which is nothing but the video so when I go back to my just a second so when I go back to my content script and I'll go back to the case where your icon is clicked again right so if your icon is just a second yeah so if it's already recording it'll basically call stop and stop stream function whenever you call the stop function from that hook what it will do it will try it will stop listening to all these streams stop stream function will close off the camera and microphone streams right and whenever this stops I will run the get blobs function to generate the blob of video and I will call uh uh call them in us I'll convert that to a URL and basically open that URL so I'll just show you get blocks yeah so here I have a use effect which basically listens to the state of my recorder so whenever my recorder State changes to stop from recording I am getting the blobs and if I basically get the blog I am again passing a message with the URL of my generated blog so this will essentially convert this to a URL which can be accessed or you can use this blob data to upload also to your S3 or whatever right so it's again passing this as a payload URL to back again back to my background script and what my background script is going to do it's basically going to open a new tab with this particular URL that's it so whenever we basically stop our extension it automatically takes that blob and opens it in a new tab so I'll just show you the demo once again so now whenever I refresh this page or for all the previous tab let's go let's uh again recall everything what we have done so far so here whenever this window this particular window is there for all the old tabs as well as for all the new tabs it has already injected because whenever we installed our extension it has already injected all the CSS files in the content script files required and background script file is already sitting with our extension so now it's it's only a game of message passing apis right now whenever I click on this particular icon I basically run that particular listener function which basically listens whenever my icon is clicked and it will send that message to the content script content script will load this pop-up right and again whenever your use effect mounts whenever your component mounts it will start taking the camera stream and will load this div so I'll share the the public link of this repo so you can see how I made this draggable and all those things those are pretty easy like so uh yeah so whenever I clicked on the icon it basically render it basically took the camera in microphone stream render that particular div and then it also opened the pop-up now whenever I when I hit start recording start recording it again sent a message to the background script saying you please try to find which particular stream ID or which particular screen the user wants to record now I let's say selected entire screen and I press share so whatever the stream ID of this particular this particular window will be there it is send it back to the content script now content script will start capturing the stream for this particular stream ID now whenever it starts capturing this stream I'll basically run my start recording function which will start listening to those particular stream both the stream from my desktop device and the stream coming from my camera my audio right and then again the same process whenever basically I click on the icon again or I click stop recording it basically generates a video uh which is generated using all those blobs which I've just explained in my hook so yeah this is how you basically create a very very small version of a loom like extension uh if you are eager to learn more about extensions you can always reach out to me I'll just share my link free here yeah so you can just scan this with your phones to connect with me so we can most probably catch up later for any extensions or react or next anything web right cool thank you guys

Channel: reactify

Views: 4,409

Keywords:

Id: HZt8VHa4mpM

Length: 56min 47sec (3407 seconds)

Published: Sun Dec 11 2022