Create a Chrome Extension (Manifest V3) for ChatGPT

good morning everyone how is it going today today I'm going to show you how to build a Chrome extension for charger PT all right this is going to be a Project based tutorial so by the end of this video you will have this extension right here that I'm going to show you the extension has an icon right here if you click on it there is a pop-up that shows up and then you have two buttons inside the pop-up one of them prompt sends a prompt to charge upt there you go I just click the button and as you can see there is a prompt that was automatically sent and we're also add another button that will render mathematical equations automatically like this okay the main the main goal of the project is not to show you how to render the equations but basically how to create this kind of extension that interacts with rgbt so also this knowledge will not only be useful for chargept but you can apply this for pretty much any other website and any other Chrome extension idea that you have we are going to be using the latest technology of Chrome extensions which is Manifest V3 and yeah without further Ado let's get right into it [Music] thank you all right so the first thing that we're going to want to do is we're going to want to load a boilerplate okay of course you don't necessarily need a boilerplate already made in order to build your extension you can build your extension from scratch but this is just going to make it a little bit easier if you want to you can download the extension I mean the boilerplate the spoilerplate right here I will leave a link in the description so that you can clone it from GitHub okay so let me just throw you around the folder structure of the spoilerplate and how it works because it's a little bit different to other kinds of JavaScript applications so of course uh Chrome extensions run on JavaScript and here we have it so the folder structure pretty much looks like this we have our webpack configuration right here um I added a teraser plugin um right here it basically just allows us to load a production build to the extension because there was some problem with the encoding um so you I mean you should load that um we have like of course a redmi we have a package.json with as you can see we have only webpack and our encoder and of course we have Babel um to to make our JavaScript as compatible as possible um I get ignore our Babel configuration and here we have our source okay this is basically where we're going to be writing some of the code that will be I mean this is where we're going to be writing the code that will be loaded in the page that we want to to load it in but actually the extension itself the file that you're going to load into the Chrome browser is not all of this it's only this one right here extension and as you can see in our webcam webpack configuration the output of our source JavaScript is going to be content.js inside extension so here it is content.js and content.map if you don't see this of course that is going to happen when you just download it if you just downloaded boilerplate what you're going to want to do is going to do npm install to install all the packages that are in my package.json and once that is done you're going to want to run npm run if I'm not mistaken it's build diff there you go and now you should have content.js and content.js.map okay and so as you can see this is the actual file that you're going to be loading to Chrome inside of it you have a manifested Json we will take a look at it in a moment we have our content.js which is the file that is going to be loaded inside our page we have some I mean a folder for a pop-up but we haven't added anything there yet and we have our icons as you can see this is the icon that I had loaded here into my extension and there you go so this is pretty much the boilerplate let's take a look at these files and what they do all right [Music] all right so now what we're going to want to do actually first is to load our extension locally okay why so because I mean as you are developing your application you you're going to want to be able to test it of course um the problem is that the way that you usually install applications is you download them from the web Chrome web store the thing is that if you're developing it it's not there yet so you're gonna have to load it locally in order to continue improving it and testing it okay the boilerplate that I that I shared with you should be already should be all ready to to be loaded into Chrome and let me show you how to do that okay remember of course that I told you that the actual extension file that we're going to be loading is this one right here the extension directory not the entire project folder okay so there we go in order to do this I mean I had the icon here just a moment ago but I just deleted it to show you how to load it um from from zero so you're going to want to go to Chrome extensions like your extension manager and right here as you say you we have a developer mode toggle you're going to want to enable that one and then you will see you have more you have more more features and then what you're going to want to do is you're going to click here and load unpacked okay and then from here you're actually going to choose the extension folder all right remember that if we go One Directory up you have your entire project folder but you don't want to select all of it you only want the extension folder all right then you click on select and there you go the boilerplate was correctly red as you can see we have our we have our icon right here that we selected from here as you can see we have inside our extension we have our icon.png it's this one and it is the icon that has been showing here okay here you have the name of your extension the description of your extension and that is exactly what you see in the manifest.json okay so now that your extension is loaded um I'm actually just going to pin it up here just to show you how where is it um there you go now we have it pinned right here just to show you how it looks and now let's take a look at what each file in this extension does and how to use them okay there you go all right so now let's take a look at our file manifest.json this is the most important file in your extension as it basically tells the Chrome browser what your extension does what its name is and what permissions it has and also what other files it's going to be using okay so basically if you don't have this file your Chrome browser is not going to be able to read it your extension to show you very quick some of the some of the things that you have right here we have the manifested the Manifest version is the first the first element and here you're gonna write number three because that one is the latest version of um of the Chrome manifest okay this basically means that if you have like the number two um your extension is probably going to take longer to get accepted and validated in the Chrome web store and also the Manifest number three has like more secure features and it's going to I feel like it's a little bit easier to understand um so definitely go for number three if you're if you're watching this video um then you have the name the name of your extension as you can see right here um the name is the name of your extension and here you have the name of your extension but if I update it let's say oh once second um let's see let's update it to your awesome extension and let's update the description as well this is my awesome description there you go if and if we save it and remember that we had loaded it before so you're going to be seeing it here but as you can see it's not it hasn't changed yet and that's normal because we need to click right here in order to reload the extension okay so basically whenever you modify your extension be it just the manifest.json file or any other file inside your extension like a Javascript file or whatever you're going to have to come right here and click on reload right here in order to actually take your changes into account so this is basically just going to update our name and our description um what else do we have right here we have the version um you you're free to set it to whatever you want but of course this is useful to keep track of the development of your application here if I set it to 1 0.01 this is going to be updated to 10.01 um they don't have the icons right here and you have I mean you're able to choose different images for different sizes I just pretty much loaded the same image to the different sizes but just wrote them that um just included them so that you know that that it is possible to include them and also so that you know that you can like load different images like different sized images for different sizes um so there you go of course the whatever what you pass right here is the location of your image so as you can see um I'm going to a directory called icons and then inside of it I'm going I'm looking for icon.png which is basically since my manifested Json right here it's going uh Manifesto Json is right here it's going to look into icons and then to icon.png and this is my icon and as you can see right here this is the icon that is being loaded so there you go for that what else do we have right here um we have the background and the service worker I'm going to explain this a little bit more in detail when I go through the background.js but this basically is the file that is going to be running on the back end of your extension okay this the JavaScript that you that you write right here is not going to have access to either any of the pages of your I mean of the current tabs that are open in the browser or the pop-up this is basically just to handle API calls or whatever I mean it's I mean you can think of it as a back end of your extension um then you have um the action element right here and of course if you if you add the option default icon it basically means that there is going to be an action Associated to the icon this basically means that when if you come right here I mean this is not a feature in the current application I mean in the current extension that I showed you but I imagine you might have seen some extensions that just by clicking them they do something that's exactly what this what this action action feature does that means that I mean you're just going to pass the the icons is this exactly the same object as this one right here and basically means that you're going to be able to tell your extension what it wants to do when you click on those icons coming on that icon and this is something that we can set up in the background.js I can show you how to edit that in a moment and also the permissions this is very very important because this is a crucial part in your validation procedure of your extension and it basically tells Chrome what permissions your extension has um about your user data and your users like whatever they have open um so in this boilerplate for example we are requesting access to the tabs API which basically gives you access to all of the open tabs in your all of the open tabs in your in the Chrome browser and that of course is a little bit a lot of permission so just by adding this API right here you're probably going to be asked to to write a personalized message to the Chrome developer team to tell them why you required that API and why it's essential for the use of your application okay I mean most extensions use it but yeah I mean as you're gonna have to take care of the permissions and the active tab basically it's pretty much the same but it just gives you access to the current tab so there you go actually since I'm running tabs I can just ditch current active Tab and that's basically the same thing and then finally we have the content scripts this right here is not um all right so remember that the background dot JS which is the service worker right here did not have access to the page that we are loading that is normal because it's the the one that is going to have the handling the API calls and all that but if you want to run some JavaScript inside the page that the user has opened you're going to have to write it in I mean you're gonna have to create that file inside of content scripts right here and as you can see each element in this content scripts array is going to have like the Javascript file as you can see this one coming in our case it's content.js which is right here and as I showed you before is built I mean it's bundled from index.js right here and you're going to tell it as well when I mean in which Pages you want this file to be loaded so I mean if your extension only use is only meant for chat GPT you're only going to write right here um you're only going to write right here chat.openai.com of course because otherwise your your JavaScript file is going to be injected into every single file every single page that the user opens and you probably don't want that so yeah basically just have to say in which in which in which Pages you want it to be open and the Asterix right here just means that what um anything can come before fit and anything can come after this so This basically means that it can be HTTP or https and this right here basically means that it can be like whichever sub directory of chat.openai.com and last but not least we have run at which is the location where you want your script to be injected so as you can see right here we have our chat GPT um application and if you write down that you want your script to be loaded at the document end it's going to be loaded right here right off the body okay that's just a standard procedure if you're running a JavaScript that modifies the the elements of the page you want to run them you want to run them at the end of the document so that when you I mean so that they will have access to all of the elements that have already been loaded okay I mean that's just like standard web development so yeah document 10 where you want your your file to be loaded the name I mean the location of your file and all the rest I think it's pretty pretty clear so let's go to the next file all right so now what you're going to want to do is to create a pop-up all right remember that what we said is that our extension when we click on the icon right here it's supposed to display a pop-up okay and that's actually super easy to do um what we're going to do is we're going to come right here to our Manifesto Json and we're going to add another line it's going to be inside the action object okay so right here we're going to add default default pop-up like that because remember you have to bind the pop-up to an action in order for it to work okay and here you're just going to say the location of your pop-up okay I'm going to say that it's inside of a folder called pop-up and inside of it it's going to be popup.html there you go now let's create this file right here and we're going to do it like this so we're in manifest there you go we're going to create pop-up um wait I think I already have yeah I had already created the file the folder now I'm just going to create the file popup.html there you and something that you have to know is that the pop-up is actually in a way some sort of its own application okay so in right here it actually you just write your HTML as if it was a regular website and right here you can just add the title let's say chat GPT extension like that there you go and now inside of the body let's just say H1 and let's just write hello world and then just write a paragraph We are inside the pop-up there you go now we're going to have to come back here to our extensions and we're probably gonna have to reload it and then let's just click on this part right here and here we have it our beautiful pop-up which is not extremely beautiful at this at this point we still have to style it and Injustice any other application you can take some CSS or JavaScript for it and that's exactly what we are going to be doing right now okay so um you can follow me let's first of all let's add a couple of buttons how about that instead of hello world let's just write buttons these are the buttons that are going to be used to create to trigger actions inside of our our page okay so these buttons we're just going to give it an ID of button prompt because this is the one that is going to send the prompt to chargept and let's say prompt chat GPT or let's say send prompt there you go and then let's create another one and let's call it render because I mean the idea behind this app is to render mathematical equations but I mean you can do whatever you want with with these buttons render math let's say there you go um all right so there you have it now you have a beautiful a beautiful pop-up working with two very beautiful buttons um actually let me show you we can just add some styling to it so let's do that I'm gonna do that right here beneath um beneath the head and I'm just going to follow the regular styles the regular like the regular CSS that you would use in a regular front-end application okay so first of all what I'm going to do is I'm just going to add I'm just going to um standardize the dough in with a box sizing of border books there you go what else we can add a margin of zero just to standardize it all and then the padding of zero as well there you go now for the budding let's say that we want a background color um um I think default is wide but let's just add it right here and all right so now um we have let's just say that we want to add all of this inside of an native called app like this there you go and then the buttons are going to be inside the app like like there you go so the app oops the app element is supposed to have let's say we're just going to say it's going to have a display uh display Flex um in order to show the ball to show all right we're just going to add a little title right here let's say uh H1 [Music] um beautiful extension like this there you go and all right so what we're going to be doing right now is all right so we have a beautiful extension right here and let's add some more Styles let's add let's let's make it a flex Direction uh column so that we have like our H1 and our bottoms afterwards um so let's do that um Flex that nope not fun display Flex Direction [Music] um let's say column then we're going to say that we're going to align the items to the center and we're going to justify the content to the center um just as a reminder if you don't know what are these like um like shortcuts it's just emit abbreviations okay um usually I don't remember but I think it comes by default with um vs code so you should have it um then we're gonna set a minimum width to 300 pixels and let's add a little bit of padding of one REM remember to use REM uh prefer the use of REM to pixels whenever it's possible unless you set a default color to Black and let's see how that looks like so far all right it's looking a little bit better but it's still not um great okay so what we're going to be doing right now is let's add some more elements here right here um all right we're gonna add it we're gonna update a little bit our skeleton right here let's say this one's going to be a section and this one's going to be the um let's say the class is going to be header like like and our our our header is going to be there and then we're going to add another section with the class buttons and our buttons are going to be inside of here oops there you go there you go now there are buttons and there is a section and now it should now this in the buttons are displayed one beside the other because they're inside one single section I mean html element um all right what else can we do this is going to be a very very very quick uh CSS thing so let's say section the header um it's going to be let's say [Music] um what do we have all right let's say font size oops let's say font size let's set it to 1.5 RM let's see how that looks all right well that's probably a little bit too big let's say 1.3 all right there you go then let's style the buttons a little bit okay um the section 40 buttons we're going to say that it's going to have a width of 100 first of all and then for each button let's just add some margin right here let's say 0.2 um top and bottom and say zero for the rest I mean for for the sides and one just add some padding as well let's say one or am on top and two two REM on the sides the width is going to be a hundred percent of the available space border none let's add a border radius nope that background repeat for the radius there you go of half an REM then the courser of course we want it to be a pointer the background color let's set it to I have the color right here so that you can copy it and then the color of the text is going to be white there you go let's see how that looks like there you go it's looking a little bit better uh maybe the header wanted to send it um text align Center nope Center like that let's see how that looks like my beautiful extension let's just add a little bit of margin to the bottom here margin oops margin but um let's say 0.5 Rems there you go oh it's looking a little bit better and now we have our two buttons let's add just a little bit of a hover effect on this button and that should be all button dot nope hover like this and let's say let's add box Shadow an unbox sizing but box shadow box shadow um it's going to be 0.5 Rems and let's add this call right here up like that like that there you go let's see how that looks like and now there you go now you have your beautiful styles right here and it looks pretty good and just to show you how I mean to what extent this is it itself it's actual application we can right click on it and we can click on inspect right here and it opened on the other screen but what you have right here is actually pretty much its own inspector and it's all developer tools for the pop-up as if it was its own application you have a console right here because you can add some script some JavaScript to it um yeah I mean basically you can do what it's your own mini application inside a pop-up okay so that's the way to see it um we will live we will leave the Styles and they pop up like this right for for now but um yeah next step will be to add some actions to this to these buttons okay and for that we're going to be using JavaScript so let's do that now all right so now that we have our beautiful extension pop-up right here it's got the right HTML structure very beautiful CSS styling it's time to add some JavaScript to it okay and before showing you what actually is going to be doing with the JavaScript I want to show you a little schema right here a little graphic that I made for you so that you can see what x what is actually going on with each of our JavaScript files okay so right now we're going to be editing a JavaScript for the pop-up and that file is actually only going to have access to the pop-up itself as you can see if we come back here and we click on our pop-up and we right click inspect we have our own console here I mean it's just as if it was its own application this console is not the console for the website for for the page this is only for the pop-up okay and that is why we considered this to be like its own application and then content.js is going to be the one that is going to be running in the in the page itself and then background.js is the one that is we're going to use to to organize our tabs and our API with chrome okay so there you go let me just show you real quick how it works um so to make it a little bit easier by doing okay so let's go back to our code right here and this is the HTML of our pop-up and right here before the closing body tag we're going to oh actually let's add it right here we're going to add a script tag and we're going to say that the source not the area the source is going to be popup.js this is basically just a path to the file where you have the JavaScript for your pop-up and here of course we are referencing a file that doesn't exist yet and since we're inside of popup.html and we're just adding the name we have to add the popup.js inside the same directory like this there you go so now that we have imported it right here and right here we have the actual JavaScript we can just do a console.log and do hello from pop-up.js all right I'm going to get rid of um co-pilot just so that you can code along um so there you go let's just close this and reopen this I mean as you can see in the console for this coming for charger PT for the website we don't have anything and that is normal we are supposed to have it in the console for our pop-up as I showed you before if we come right here to console we see hello from Papa PS okay um now what we can do is we can start getting our button so let's say our button prompt is going to be equal to document dot query select or and let's do what was the ID I think it was button from prompt like that honestly the same but what the other one which is going to be render and we will do just button render like that I suppose that's the actual ideas that I gave it yeah there you go and now we can actually start adding um event listeners to this and it's very simple all that we're going to do is I mean basically just to as you would in any other in any other in any other application you can just do different listener and then we're just going to listen for a click and basically we're going to console log um prompting because this is the button that is going to prompt to to charge your PT prompting to chat to charge GPT like that and let's do the same thing for the other one which is button prompt but render we're going to say rendering math in chat GPT there you go now if we save this um if I'm not mistaken if we reload the pop-up and we click on inspect we come right here to console of course we don't see anything else anything yet because we deleted the first console log but if we let me just bring this to the side like this there you go if we click on send prompt we see prompting to charge upd and render math also control logs so we see that our JavaScript is working correctly now remember I cannot State this enough um this is not the console for the website this is just the console for the pop-up if we see the console for the website you can see it right here I'm just going to put it down here this is the console forgept okay there is nothing of what we're doing going on in the console yet that is because as you can see in this diagram right here all of what we're doing is on I mean so far it's only involving um pop-up.js and then it's only interacting with the pop-up what we're going to want to do now is we're going to want to send [Music] um a request to the Chrome API so that the Chrome API can send it to content.js so that's exactly what we're going to be doing now we're going to be seeing how to catch a request from content.js um like how to catch a request on content.js from the pop-up.js all right so let's let's do that all right so the objective for this section is basically just to do exactly what we did before but instead instead of console logging while we were console logging in popup.js I mean in the console from popup from our pop-up we're going to console log it in the console from our website and in order to do that we're going to send we're going to have to interact with the Chrome API and send a request from the popup.js and then we're going to catch it with content.js and that is actually very simple to do in our Chrome in the Chrome API basically it works you can basically see it as an HTTP request the only difference is that it I mean you're more free to do whatever you want because you send a message and you can catch it wherever you want okay so basically if you send a message or a request from here you can catch it anywhere else and then see you send if you send it here you can catch it anywhere else Etc um so there you go in order to send a message we're going to be using this function right here Chrome runtime send message and in order to catch it we're going to I'm going to we're going to I think it's this one yeah Chrome runtime on message as listener and this is the one that we're going to be using on on the content.js site um but in the meantime before doing that we'll I mean this kind of sends a message to all of to like to everywhere I'm going to have to Target it to our open tab just to make it a little bit more concise and more robust so let's do that um so right here we're going to first of all get the current Tab and to do that we're going to use this function right here I'm just going to code it myself just so that you can code along and this is what we're going to be sending and let's say um first of all we're going to do const and the current tab and this is going to be this is going to be Chrome dot tabs dot query and then you're going to say active equals true and then we're going to say current window to true as well there you go so now this one right here is going to contain our current tab information um let me um all right so um and now let's just send the message to our to this tab itself and to do that we do as well Chrome dot tabs dot send message like this and the first parameter that we're going to say is the tab where we want to send it to and our object current tab contains an ID which is the argument that we have to pass right here and then we're gonna basically just send our date and we can say we can say hello world [Music] hello world hello world like this and then also let's send our message or yeah our message which is going to be from [Music] a prompting from I mean to chat GPT there you go um one uh kind of important thing is that this is not going to work if you had just done it like this because we're interacting with an API and that basically means that we need to use an asynchronous function because we need to wait until Chrome actually responds with the current tab um and in order to actually use it so we're going to have to add a weight right here and also we're going to have to add and a weight right here and of course if we're using a weight we are going to have to make our function asynchronous so let's do async like this and just delete it the event because we were not using it and there you go let me just show you real quick the current tab object now this is going to show in our in the pop-up in the pop-up console like here inspect there you go let's see the console and let's oops let's click on send prompt and there you have it this is our tab and there you go it has active Audible and as you can see it has our index which is the one that we are sending in the message something important as well as I I just noticed right here and this is not only an object but it is an array with one object inside because what this function does is it returns an array with all the tabs that that satisfy this this uh this options and since there is only one tab that is active and one tab in the current window this is going to return an array with only one tab so I mean in order to select it you can either do like this just select the first element or in order to make it a little bit more readable and More Beautiful You can just add it like this which is exactly the same thing and now when we click on this button it is actually going to be sending our message right here so there you go but now we have to catch it on content.js and in order to catch it in content.js we're going to have to come right here to source um of course this is only because we're using a boilerplate with a builder which is webpack and of course this is going to be bundled up into this content.js right here whenever we do npm run build okay so let's first of all let's do um in order to catch it which was the function to catch it the [Music] just one second term there we go it's all in order to catch it we had to do Chrome runtime and then on message like this um and then add listener if I'm not mistaken there you go add listener and then you just add your listener it basically takes um we're going to take in a synchronous function as well um actually I'm not sure if we need a synchronous function let's just leave it like that for now and we're going to take the first is the request that we're going to be that we're going to be receiving then the sender and then the response I mean this is just a standard this is not um we that our that are creating it this just comes from the documentation as you can see it right here request sender and response and then you can do whichever whatever you want with your request okay so right here if I just do console log my request [Music] there you go and of course I am just writing this in index.js so in order to build it I will have to I will have to actually run build so in the boilerplate that you have I mean if you downloaded the one that that I published in on GitHub what you're going to want to do is npm run actually yes you can run watch if I'm not mistaken yeah there you go it works and this basically I mean the watch is a watcher so basically every time you save it's going to regenerate the content.js file and now as you can see our function is in there so let's come right here I think that this time we will have to up up um update our our our extension and now let's just show this to the right like this there you go and let's see if this is working so we're going to click on send prompt and it is not working for some reason maybe we're supposed to actually use a hmm maybe we're supposed to actually use an asynchronous function if I'm not mistaken let's see okay let's say we refresh this right here we reload this there we go send prompt yep all right so apparently we had to do a synchronous so every time we click on it there you go now we have our message that we were sending and we have hello world and our message which is prompting from chat GPT to chargept and this comes from this pop-up which is itself its own application okay so yeah I mean basically what we have managed to do is to communicate between our pop-up and our content.js and now I mean if you see the power that you have right now you can basically modify I mean run JavaScript in your in your page as much JavaScript as you want uh just from your from your pop-up okay so all right let's just finish this this extension real quick and let's get on with it all right so now what we're going to want to do in this section is basically to just send the right messages from our pop-up to our content.js okay but first of all I just wanted to clarify something real quick is that I had uh mentioned before that you had to add async here in order for it to work and the problem is not actually the async thing um I mean of course you're gonna need an ace to make it an asynchronous function in your content dot JS if you're making an um a call to the Chrome API or to any other API but in this case the problem why it was not loading is that actually you need to reload the extension and also refresh charger PT I mean your your website in order for this to work um so let me show you real quick what what is actually happening so if I do console log hello my friend right here and I save it as you can see it's already here in my content.js it's all right but if I come right here to my Chrome um I mean to my to my website and if I refresh it I'm not going to see anything and the problem is that I haven't refreshed the application the extension now if I come back I'm still not going to see anything because I need it to I need to refresh the page as well in order for it to work because I need to refresh the extension and then the page so that my JavaScript is inserted at the bottom of the page okay remember that what we're doing here is basically just inserting this JavaScript at the bottom of our website so you're gonna need to reload the website for the for your new JavaScript to be included um so all right um what we're going to do now is we're going to send the right messages um and to do that um first of all I'm just going to take this current tab declaration and bring it up out here and send this a message as well on the button render click as well and of course I'm going to have to make this function as synchronous as well there you go so which messages do I want to send I'm going to say that this is going to be an action and I'm going to call it prompt okay remember that when we are catching this information in the content.js this is basically just whatever information you send it so this is totally arbitrary that means that I can call this message or or something whatever and just catch it on the other side with that keyword but since I am performing an action I'm just going to call it action and same with the value I'm just calling it prompt because it makes sense to me because I am sending a prompt to charge up team but I can just call it action one action 2 Etc okay this is completely arbitrary and it is you who chooses this um and I'm going to do the same thing with the second one right here I'm going to do action and the action for this one is going to be um render like that okay all right so this is an interesting thing to show you because this is not going to work um if I just run this um it's actually going to not be able to detect my current tab right here because I'm using a weight and a weight is of course an asynchronous an asynchronous function an asynchronous functionality and I am just importing my pop-up my pop-up script like a thing like a simple default script and in order for my script to have a asynchronous capabilities outside of a regular fan asynchronous function because I mean as you see I am using a weight here but it's not inside a phantasynchronous function so if I want this to actually work I'm going to have to come to my script declaration and say that the type um I'm just going to say that it's a module because modules have an intrinsic um support for asynchronous code and now if I save this right here and I just save this right here um I'm going to be able to let's just come back to my content.js um to my content and let's just log the request so there you go now remember that we have to reload the extension and also reload the page so that our JavaScript is inserted at the bottom of our document and then if I come right here and I click here and I click on send prompt I can see that I have receiving a request um in the content.js with the action prompt and then for render I have the action render and this I can basically use it to trigger different different functions in my content.js okay all right so now it is time to actually subscribe to the channel if you're enjoying this video and you are finding it useful um just give it a thumbs up and subscribe because it helps me a lot and um so that you can also see more videos like this alright so what we are going to do now is we're actually going to build the functions for prompt and for render and we're going to do something some object oriented programming right here for that all right there we go for the for the object-oriented programming right here what we're going to do we're going to be creating a class um but first of all um all right now let's create the class first so our class is going to be called um uh chat GP team charging PT extension just like that and we're going to make a Constructor right here and then after the Constructor we're going to have we're going to have a Handler okay so first of all we're going to have a handle request and it is right here where we're going to include our listener all right so our handle request right here and let's just include our listener inside this handle request thing and of course we're going to have to call it inside of our Constructor for it to actually work so let's do that this dot handle request there you go there you go so basically I mean if you're not familiar with uh object oriented programming in JavaScript this basically is just creating a class um with our Constructor we have our method which is handle request and every time the class is initiated it's going to it's going to run this handle request and it's going to keep it so I mean just help us to keep our code more more organized um so right here we have created our very simple class now we're gonna have to just run it let's do new let's just say const extension chat GPT extension and we're going to say that we have a new if I'm not mistake and I have to say new yep GPT extension like that oops there we go now it has compiled let's see if it's still working again I have to reload refresh and it's still working all right so now inside our handle request we can actually start checking what we want to do so first of all if I like to use if statements instead of case statements I just I mean if I'm going to I mean if you're using several like too many request types you can use a case statement but for Just Two I guess just if if statement is right I'm going to say that the request if the request action oops action equals to prompt I am going to I'm going to execute this other function called this um prompt to chat GPT there you go the problem is that I still don't have this function that is called prompt to charge epd so let's create that one and right here let's say prompt to charge GPT and it is right here that we're going to be saying console.log we are prompting to chat GPT let's just see if that this is working so far um there you go we're prompting to judge PT all right it seems to be working so now basically all that we need to do is to finish this prompt to chargeptee function let's see how to do that right so in order to do this um basically I mean this is the the most fun part I think of of developing something for AI or for like yeah especially a language model um is that part of your code I mean it's basically programming but it you're actually programming in simple English English as you as if you were telling instructions to a person okay so here we're just going to create our prompt and here I'm just going to say my prompt let me just copy it here my prompt is this right here just so there you go so my prompt is basically the text that I want to tell that I'm going to send charging PT every time I click on this button and it is right here so from now on if you need to write a mathematical expression use K-Tech notation and follow the following rules if a block if it's a block equation etc etc okay so this is basically the text that we're going to send to charge upd whenever we click on the button okay all right so now what we're going to want to do is we're going to we're going to want to fill that text into this input field right here and then once that is done we're going to want to click on this button right here or just trigger the submit option okay let's see how it can do that first of all we're going to have to to find this element right here and the problem with chart GPT I have um what I've found is that the classes are not super intuitive in order to actually modify it with with JavaScript or where yeah so what I'm going to do is basically I'm just going to say that I want this text area right here and if I'm not mistaken there is only one text area in the entire page so if I say text area I should be getting this one or I can also say um copy copy selector let's see how that works okay so let's say const input and we're going to say document that query selector and we're going to paste it here all right that is um that's probably too specific I'm not sure it's going to work with every with everyone but I don't know I'm just going to say text area let's say let's hope that works um um yeah I'm just going to leave text area let's see how that works I'm just going to console log our input let's see how that works refresh refresh now if I click on send prompt I should get it right here nope I am not getting it what is the problem so far hope it's not an ID it's just an element okay [Music] there we go Cent prompt we have our text area all right so basically we have it now what we're going to want to do is we're going to say that inside that input we're gonna want to say that it's value is going to be our prompt and then we're going to want to click on the button that is right here let's see can we click on submit let's say input Dot sub MIT does that work not sure that works nope uh submit is not a method for it I'm basically just going to click on the on the button beside it I'm going to do query selector and let's say that it is our text area text area oops text area and I want the button that is beside it in CSS this this um this symbol right here basically just means that you want the element that is at the same level but um not inside of it if I'm not mistaken let's see where it is so here's the text area and the button is just beside it it's not inside so this is basically just CSS and then we're going to check the button and then we're just going to click on click there you go um of course we're gonna have to refresh refresh right here let's let's see what happens so if we click on send prompt um all right there's brawling cannot read properties of null reading click um all right sure because I'm reading this from the query selector I needed to read it from the document alright so that was dump um just gonna reload this right here reload this right here and there we go the ascent prompt should work now but let's hope for charge reputation not break down right now and let's say send prompt and there you have it we have our custom prompt that is exactly the text that we were storing right here um yeah so I mean basically now you know how to store a prompt in your JavaScript and to automatically send it in from from a pop-up that is that's quite useful I mean you can from from with this knowledge what you can do is basically you can um make I don't know a library of prompts or or get prompts from an API or whatever and then just automatically send them to Chachi PT just by clicking a button right so now you know how to do that um and yeah so let's see what else we have here let's see it is time now to just enable the function for render math I'm going to go a little bit faster on that one because that is not the main objective of this tutorial but um let's just finish the extension real quick all right let's go all right so in this section we're basically just going to add more functionality to the other buttons in our pop-up okay um in the meantime while I was making this video actually I found out that actually charging now has a default um support for mathematical equations so now the extension that I was applying you to build is kind of like not super useful like I like the extension is also already in in the web apps in the Chrome App Store but um now apparently it's already inserted into latex so I mean that's good but I'm going to show you how to do something just a little bit different then because now it's not super useful to make it able to to display equations because apparently if you just if you just send this prompt like this you will have your your mathematical Expressions as they are supposed to to be so what we can do now is instead of adding instead of having another button called render let's just say that this one is prompt hmm prompt one and this one is going to be prompt prompt two there you go um there you go and then so this this one is going to be prompt one this one's going to be my button of prompt oops prompt two there you go and this one of course is going to call bit button prompt two and this one is going to call Button prompt one all right um and now basically [Music] um yeah I'm just going to leave the IDS like that I mean it's just just to show you real quick how this works um and now what we can do here is that we can call this prompt one if I'm not mistaken and then let's just create another I mean another case for prompt two um and in this case let's just say we're not going to use from we're going to take out prompt from here we're going to we're going to put it right here like this so this one's going to be our prompt one basically right now I'm just creating a property of this object which is which has one prompt which is right here and let's just create the second prompt like this okay prompt two and we're just going to say hi but in French why not now let's say say something smart but in French there you go um and basically I just modified our prompt hrgpt function to take any prompt that we want and we're just going to pass in the prompt okay so in this case if it is the prompt number one we're just going to say this prompt one and this is going to pass this um this prompt to all right so just to show you real quick what we did here I mean just to explain a little bit more in detail what we did here um here we had Crea we had previously created a case in which if a request action was equal to prompt one um we're going to call this function which is a method in our object which is prompt to chargept and we're going to pass in um a parameter this parameter is supposed to be the prompt and it is the prompt that is inserted into the input value and then send to chargept and of course this makes it that you can use any prompt that you want a higher just created prompt 1 and prompt 2 but you have you can create as many as you want here basically you have um this is basically just gonna send different prompts depending on which action you send so here of course the first button is going to send the action prompt one and the button 2 is going to send the action prompt to so let's see how that works um of course remember reload the extension reload refresh the page and now these buttons are supposed to send this to different prompts okay now let's test the first one uh it seems to be working it sends the prompt that we previously told it to prompt it is sending um this right here the first one and for the second one let's see how that looks I'm just going to say I'm just going to ask it to stop because it seems to be a little bit too too slow Let's test the second one all right the second one all right the button is titled render map but let's just change the titles of the button so that it's easier send prompt one and here we're going to say send prompt two there you go now send prompt one and send prompt two let's send prompt two then say something smart but in French let's see what it brings and yeah I mean this has been pretty much how to build a charger PT extension right now basically you know the very Basics on how to create your own extension and how to communicate between your pop-up and your website and how to actually trigger actions in your in your active tab um so now basically you're ready to to build your own projects don't forget to subscribe if you enjoyed it and like please and yeah just uh was hoping that we could wait to see what it generated no network error all right so let's try next time but I hope you enjoyed the video and I hope to see you next time um see you and cheers [Music] [Music] thank you [Music] [Music]

Channel: Alejandro AO - Software & Ai

Views: 1,889

Keywords: chatgpt chrome extensions, chat gpt, chatgpt, best chatgpt chrome extensions, chrome extension development, chrome extension tutorial, chrome extension v3, chrome extension tutorial for beginners, chrome extension, manifest v3, chrome, manifest chrome, chrome chatgpt extension, chatgpt api, chat gpt app, chatgpt developers, chat gpt javascript, chatgpt 4, traversy media, web dev simplified, developed by ed, net ninja

Id: nviEA5chYA8

Length: 69min 54sec (4194 seconds)

Published: Sun Mar 26 2023