Create a Chrome Extension with OpenAI GPT Integration | CodeChit Tutorial

okay so hi everybody welcome back with another video by chord and I know it's been a long time but now I'm here with a really new and very awesome tutorial which is like a as you as you might have seen on uh thumbnail it's a Chrome extension that we are going to build and we will integrate a chat GPD not a chargpt butler model behind it and most probably like a text DaVinci model we are going to use it we will be using like text DaVinci and we'll integrate it without Chrome extension and uh after that whenever whenever we will go and search something on you know Google then it will basically take this uh query parameter or search parameter whatever you can say and it will pass that data to char GPD I mean GPT and we'll get response and will return basically and we'll basically show this here somewhere here okay so that's the basic thing that we are going to do uh if this sounds interesting to you then watch this video till the end and you will have a better understanding and yeah without a further Ado let's just let's start this video but before this uh let me tell you uh like the from the reference that I would like oh which I would mention in the video as which which I would mention in description as well okay so you can go and check them out and as well as uh we are going to use a little bit of chat GPT in this video to generate some boilerplate or not because you know it can really help with that as well so I think we should like literally utilize this thing and uh I also took like a charge APD plus and a subscription like that so I think we can choose it to make most out of it okay and don't worry about that like I'll explain you uh the code base uh like how it works although it does very well but believe me uh I can also so don't worry about that uh so yeah if this sounds interesting to you then please watch this video till the end and you will have and by the and by the end of this video you will have a better understand not a better understanding but a basic understanding of how to build a Chrome extension and how to use any apis of open EI okay so these are the two things that we are going to do in this video okay so let's start with creating a very basic project a basic project I mean like let's create a folder that's all and inside that basically we will create and Define our extension okay and we set up our extension uh so let me go inside uh tutorials and here I'll be here uh let's make Chrome GPT I think yeah this is better and once you have done that like go inside on this directory and open it inside any Chrome uh yeah any IDE that you have okay uh I have PS code so I'm going to use that and here one of the most important files that you need is a manifest audition okay so basically this is the entry point you can see yeah it can be considered as a entry point because here this is the this is the file where you will Define uh theme description and what kind of permission this extension is going to access these kind of stuffs okay and also you will mention here like uh where your content description will be located and where it will run and things like that I know it sounds a little bit confusing like what content descriptors and what background descriptors uh right now don't get into that depth uh just stick to the video and learn what I'm teaching you right now and after that you can literally like go and explore whatever you want but for for this video we just we are just going to uh build uh to get things done okay so that's our main purpose and I I personally believe like you learned a lot by doing things then just like a learning bunch of art like reading bunch of Articles and all so we will be experimenting and learning okay in that case that's how we will learn that's how we learn basically uh that's how basically I learn okay so let's generate a very manifest audition file uh let me yes uh say create manifest .json pole MV 3 Chrome extension okay so now what does it mean by mv3 so mv3 is like a version 3 because uh Chrome extension uh the way we develop our extension uh it has two version as of now if you will go on Chrome developer Chrome docs it's official added official documentation here you can see the manifest.json file requires a slightly different format for V3 than for v2 it simply means like a V2 is like a older version and V3 is like the latest latest one so here in this video we are going to use latest one uh that's what we are saying here like a create a manifest.json fold mv3 with basic details details and content script I'll I'll basically explain like what this content script is but first of all let's just okay so it is creating okay so we don't need this icons and all but yeah okay yeah that's it that's all we need let's copy this code and paste it here here you can see uh the first thing is uh that you need to do is like you have to define the version of uh your extension like a what on which version you're going to develop this extension and we are going to use a very latest version of manifest which is a three okay so that's a two and three I don't know like if there is a any one sort of thing but as per my understanding there is only two version two and three I hope there would be version one as well but listen not talk about that okay so after that here uh you can Define the name of it like what will be the name of your extension and here is a version It's a version of your application you can change it like however you want okay however you want like according to the you know according to how you release it okay so so that uh and here's a description little description of uh what this extension will do description of your extension and we don't need this actually right now because we are not going to add icon uh we are just going to meet the purpose that that's why we are here it's clear going to just like build the extension that does the task that to the talk that we haven't identified okay so this is the main thing which is a Content script uh let me explain you this uh what it is so inside that content script whatever you define so it takes three parameters first of all uh first parameter that it takes like a although you can avoid this one okay so this is this is uh I don't know why it gave it but you can avoid it literally at least X for my understanding I have tried it yeah you only need these two things uh the first one is matches matches is basically this thing basically tells like where this content descript will get executed okay so this is the file this will this will be your this will be your file name and inside that whatever JavaScript code you will write okay so that JavaScript code will get executed uh inside this website okay so whatever website you have mentioned here so here it is saying like uh uh any URL that starts with this https download.example.com and following anything like after that okay if there if it starts with this thing then just execute this content script on that page okay so this is for like whenever you visit different sort of URL it is for that so if if here if we have defined something like google.com let's say okay and here our in here uh this is our content script.js and let's just create okay one one file content script dot JS and if I do like console.log and hello world okay and now let's add this uh in our browser how you can do that like I'll go inside Chrome extension and here click on load unpacked here what you can do oh here we'll be go inside with learning and inside learning this should be our Chrome now where it is where it is okay so so it's not learning uh it should be tutorials and here we have our Chrome GPT and just select this folder make sure you select the you make sure you select a folder where your manifest.json file exists or else it's not going to load that again here you can see it's called my extension let me just rename it to something uh let's say Google GPT okay and now if I refresh this here you can see it's a Google GPD and now let's search something on Google okay like uh hello and here you can see like it has printed this hello world and ignore this one there should be something because I is probably coming from like uh maybe from this extension that I developed but yeah let's not talk about this one and here you can see like it is printing this hello world so it simply means like this uh script file is getting executed here okay in this case or here if I go on like let's say on my website you will see here you will here you will not see any such message like a hello world because we haven't I didn't we haven't mentioned it like uh here that it should be should get executed on these sort of website we have already mentioned like it should only get executed I had like https google.com and the following urls uh so that's why and yeah that's pretty much it like what we need okay but let's say in any other case Okay in any other use cases uh if you want uh your content script to get executed uh at uh almost all of the sites uh then you can Define it like if I'm not wrong then you can Define it like literally all urls thus and after that it will get executed at each and every website you visit okay so that's how you can Define your content script and now let's do the second task which is uh uh taking this parameter and sending this to open AI but before that uh you need an open AI key okay so that you can take that key take that take that API key and make a request to a CPS service to get the response to get response back okay so how you can get that uh just go inside just go platform Dot openai.com Login and here if you haven't catered in an account then just create one I'm going to create I'm just going to log in with my account existing one and after that uh here is click on this icon profile icon and here click on this view apis Keys API keys and here I have already created like five different DPS I'm going to delete one because the max he can create like a five apis and after that like you have to rebook one in order to get new one uh okay so uh once you would be here then you would see nothing here initially if you haven't used uh open AI before okay so just click on the create new secret key and save this somewhere okay because after that once you click on uh one should click ok uh you will not get this API key again okay uh so only way to retrieve that API key is to delete this API key and then generate new one just copy and save it somewhere uh after this video I'm going to delete this API key so there is no problem even if you say this okay so just last so just uh let's uh paste it here for now okay because after all I'm going to delete it after this video and uh what else do we need is like a fetch method which will make a request to open a service open yet text completion uh thing and we'll be using the text DaVinci model uh let me explain you what it is uh here if you will go in an API reference I don't know I'll be able to find it here yeah so this is the model that we are going to use so this is the test tab in g003 and it's uh so far one of the most advanced model out there okay and there's a recent one which is a gpt4 but uh I haven't got an access of that so right now so that's why so you can use it and apart from that there is one more model which is really efficient this is called GPD 3.5 Turbo you can use that as well but in this video uh we're just going to use this one test five and g03 remember uh if you know how to use one then you can you know almost learn then you can like easily use another other one as well so let's see how it how to do that although I can like write a fetch request here but as I said we're going to utilize our GPT here so what I'll say here uh right fetch request uh at open AI text completion text completion using patch method and add text DaVinci model DaVinci model I hope it writes the way I want it to okay so yeah this is pretty much it this is the exact form which I wanted okay so let's just copy here and we are going to just paste it here uh replace this API key uh with this one okay here I think it has made one mistake uh maybe it's not the right API endpoint that is it's a hitting right now so let me show you what I'm talking about like a open AI open a API reference and here basically we are going to use our text completion uh API reference uh okay yeah so here uh it is called completion and yeah so this is the one we are we'll be using https CPI https uh opi.openei.com V1 completion and here you can see like what are the parameters okay so just let's let's let's just copy this and watch this here okay so model would be like text DaVinci The Prompt will be whatever uh we will you know basically for now let's just keep it like who is Elon Musk okay we would be we will change this uh to our uh query parameter whatever we get from the search but for now just to test let's let's keep it who is Elon Musk in Max tokens what does it mean so here uh when you use APS in this API uh you are going to get you will be charged for it okay initially you have a 18 18 something like that credits for you you get like 18 trades for free but uh once you have uh once you have like a used all of that after that you have to pay for it okay so here uh match tokens is uh here you can consider token as a word so you will be charged according to your tokens like uh depending on how much uh token you have generated so far uh you can see uh the pricing of these two cons at like a pricing model of a new plane uh I'll put a link of that in the description as well but yeah that's what it means and let's keep it 100 for now our temperature by temperature mean like how creative it can give you an answer okay and let's uh just ignore this one for now these are as well this uh let's say node these for now okay so temperature is basically means how creative it can be you know how experiment it can uh do with its result uh if you set it to one then it will uh be more creative and it will return a very different answer every time okay so that's what I heard and I've read so far and yeah also tested that as well but yeah that's what it means okay so uh now let's uh copy this and I hope this is this should be logging our response now this data.choices zero dot text why it's like that because if you go here here you can see what kind of response we get so we get a response uh here we have a choices inside choices we have uh array of responses and so basically what we do we take our response choices and the first element of it like this one and then dot text okay so that's how we do and now let's try to see if it works or not if I search something Google and so here you can see like it has a given an answer Elon Musk is an entrepreneurial and innovator best known for founding SpaceX Tesla and people and yeah it is correct right we all know that so yeah our script is working perfect fine perfectly fine the one thing that we need to do is here the one thing the one and only thing that we need to do here is uh we have to get this query parameter and then we will uh be basically uh are sending that as a prompt instead of this uh who is Elon Musk okay so let's uh uh okay what we need to find here uh we have to basically extract this query parameter okay so one of one way to do this is like we can use uh reg X for it but believe me if there will be any a special character and all in that case it will be a little bit harder to extract uh it's not like a super hard but like a silver it will be a little bit harder to extract this uh qaddy parameter but in JavaScript there is a better way of doing this so it's called like you can like pass this entire URL if I'm not wrong let me just test it here uh URL equal to new URL um it's I'm saying this because like I literally learned it from like that GPD as well so I think this one should give you yeah and here URL dot if I see url.search where you can see it is giving us a this query parameters query parameters yeah every parameters whatever in your search are okay and so once you have that like uh what you can do you can pass this uh query parameters inside a new object let's say params equal to new URL search params okay inside that you can basically pass this URL dot search and here you will have and here you'll be left with params and I hope I did right let me see parents dot get and Q yeah so you can see like it has successfully extracted exact word that we have searched okay so that's how we can do this so let me just uh say what to say this okay so what we are going to do we are going to basically take URL and basically we'll uh form or URL object by using new URL and inside that will be passing our window dot location uh location Dot href so if you don't know like what it does it basically gives you uh current URL whatever the current URL is okay and once you have that after that what we can do what you can do uh every other saw basically as we see as we saw sorry let's extract search from it you order dot search okay let's create a new pattern oh search param equal to new URL search patterns and inside that list boss let's pause this search okay and now we can get like our queue parameter yeah that we want basically okay so we want this uh thing here okay so const Q and it should be like search pattern dot get inside that queue and we will pause this thing here instead queue and I hope this one should work let's let's test this out and here if I refresh this and now let's get back to here and here if I see if I search something like a who is and who is a unsafe bezels okay basically that's what I meant uh who is FB Zeus and I hope yeah here you can see like it's episode with an American Technology entrepreneur investor and philanthropist so here you go also you are basically getting a response from this uh open AI as well uh so the now one and only thing that the only thing that we have left uh to do is uh that we have left it that we have left to do is we have to integrate not integrate like we have to like insert it somewhere on UI okay although I can literally waste like a lot of time designing uh how it should look but I'm just going to introduce anywhere okay anywhere like anywhere wherever it comes to wherever I can so let's uh try to create uh UI limit but I hope you get an idea of how to do how to do these things so far Okay so but yeah let's try to do this I don't know how much time so that's that is going to take but yeah oh we have to design a UI basically first of all so we are going to do this uh okay so what we will do we will do this inside uh this once we got our response uh here we will store this response inside variable answer equal to this and here we will create a new document dot create element or yeah I forgot like why the hell we are doing it we can just ask jpd to do this okay so I want you to create a document element div and paste or hello board or text inside that and set all those properties that app Style to five sets set its position to be fixed or like a absolute you can see and bottom us don't focus on like how I how I writing this thing please okay so here we are getting our answer Also let's say okay so I think according to this on CPT this one should do the magic right and yeah it's pretty much like that's how even I'm going to I was about to write so the only thing we need to do here is like we have to replace this with this okay and once you have done that uh style bottom zero I think this should work and let me rephrase this and let me ask again with Z pesos again the same question but yeah okay so here you can see like uh is an American technology entrepreneur investor here you can clearly see like it is showing you although you can like style it accordingly like however you want like a div dot style dot width that you can keep it like a 10 or something okay it looks like I'm wasting my uh responses but yeah let's just keep it for now okay so I hope you get an idea like how to do this right hello okay so I'm going to meet you once I design it okay okay so I made little bit changes uh like uh I added like a little bit uh width padding margin border radiation off and now you can see uh here is our response jabuzzles is an American Technology entrepreneur and something like that let's search something else uh how to update how to load on AWS uh here you will not get like a good response right now here you can see like it has only give it has only given a one and two only two options because the reason is that I have limited uh the amount of uh words that it can generate so if you will increase it it will accordingly like it will give you very

Channel: CodeChit

Views: 912

Keywords: OpenAI, GPT, Chrome Extension, Google Search, AI Integration, Web Development, Tutorial, Artificial Intelligence

Id: fuZoSUmgFeI

Length: 30min 12sec (1812 seconds)

Published: Sun Mar 26 2023