How to build a Chrome Extension using ChatGPT

yo Spencer here and in this video I'm going to show you how to build your own Chrome extension using chat GPT by open AI if you take a look at my screen real quick uh in this example I built a buddy of mine Ben tassel a Chrome extension you can actually see it right up here in the corner the Benz bytes Chrome extension and in the video following this little clip this little hype clip if you will I break down exactly how to do it in my thought process as doing it so let's Jump Right In enjoy what up anyone who might be watching this my name is Spencer and recently I built a Chrome extension entirely using chat GPT to write the code I posted it on Twitter the extension is actually this extension right here it's called easy paste you can find it live on the Chrome web store it basically is a Chrome extension that adds a button to the sub menu or contacts menu of chrome uh what that basically means is we added another cut and paste button so if you come here to Google and you want to cut and paste for example a calendly link We Built This little app that allows you to paste whatever you want in here and so posted this on Twitter and my buddy Ben tassel hit me up in the DMS and said he would love to see a video or understand what prompts I used to build the Chrome extension so in this video hopefully it does doesn't go too long I'm going to show you how to build a Chrome extension using chat GPT so let's Jump Right In so first things first we need a Chrome extension we can probably start off with chat GPT just 3.5 because we get a couple extra requests in here and what we're going to say is build a Chrome extension with a pop-up build me a Chrome extension that when SEO selected shows a pop [Music] wow check this out please make sure the Chrome extension uses manifest version three and there we go so just for a little bit of context I own two software companies one of them has over 100 Chrome extensions under management and then the other one is a screen share tool and so I do have a little bit of context on how to build Chrome extensions but from right in here this just explained exactly how to build a Chrome extension create a new folder for your extension so we're going to pop this open I'm on my other screen right now I'll just go to the downloads menu we're going to say new folder and we're going to call this Benz fights we'll go ahead and slide this over here Ben's bites so we pop this open Ben's bites now we have the folder inside the folder it's asking for three files a manifest file a pop-up file HTML pop-up file on them JavaScript it looks like so to do that we're just going to check this out open up notepad because you know we're hardcore coders over here and we're going to open the Manifest Json file and add the following code we're going to copy this coming back into our new file and notepad here check this out paste file save as we're going to call this manifest uh dot Json I think it was is that what it said and we're going to since you know it's a notepad we'll click downloads bench bytes because that's the folder that we created and we're going to click save so that's the first one first one done manifest Json file I'm going to move a little bit quicker uh just because I've been through this with a recent Chrome extension that I just made um and so now it says build to popup.html file it explains what's happening in the Manifest if you want to read it pop up HTML we're going to click copy right we're going to click in here we're going to try and do a new one we're going to click paste we're going to click file uh save as Ben's bytes we're going to call this one pop-up dot HTML hopefully none of this is confusing I'm sure some of it is just because you know I don't know uh and then the third follow uh third menu is pop-up JS and this basically if again I'm not a coder but I think what this is saying is um pop-up loaded and I don't really know what that means so we're going to copy this again I'm not a coder uh I just am good at I think I'm good at asking this to do a ton of different props so we're gonna come in here and click save as this one was called pop up dot JS we don't want it as a text file if you're an actual developer watching this I want to I want to apologize because I don't know anything I know writing code and notepad is insane I know I don't know what I'm looking at I'm just cutting it I'm just a cut and paste guy [Music] so we're going to close that and check this out now we have a Chrome extension that easy uh it really is that easy we just have this folder called Ben's bytes with three things in here reading these directions open up Chrome and go to the extensions add in the address bar so check this out we're going to click Chrome we're going to click manage extensions this will probably tell us enable developer mode coming into extensions developer mode is on okay click unload package I'm going to show you a little hack here you don't have to click on little package you can actually just drag and drop your file in here so here's the folder of Ben's bytes right here with our three things that we just created we're just going to drag this and drop it and boom now we have a Chrome extension uh that just got installed and it's going to be called my Chrome extension because if you look at the code this thing named it my Chrome extension a version one [Music] um and so now we've added it click up unload your extension is now loaded and you should be able to see the extensions page click the extension icon pop-up window up here ready here we go boom there we go Ben's bites version one we're there all right check this out now we're gonna have some fun um uh here's what I want to do let's do this here's Ben's website Ben's bites website we're going to go ahead and this is where you can subscribe to his newsletter so we're gonna go ahead and copy this and check this out please add to this website I don't know why I'm a terrible typer um this website we're gonna go ahead and put brackets in it there we go as an iframe inside the pop-up code alrighty so looking at this it's not ethical reproduce entire sensitive iframe without the website's permission and also may it be against terms of service all right instead I can provide you an example of how to display a different website and an iframe with your pop-up here's how you can modify okay so they won't do it for us but we can do it ourselves so it says modify the popup.html to display the website in an iframe so check this out and I'm going to click copy we're going to come back into the Benz bytes folder here pop up open with notepad because we're not coders and we're going to paste this in here and now it has the iframe but it says example.com that's ridiculous so we're going to add then then we're going to add your stuff in here if you're watching this uh we're gonna say boom a hundred percent is What's this called 400 by 400. um 100 I think would be the whole screen I'm not totally sure so check this out I just hit Ctrl s which should save this we're going to go ahead and hide this come back to the extension and we're going to click refresh boom and now boom now you can subscribe to Ben's bites right here uh inside of the Chrome extension how freaking great is that now that I'm looking at this Ben I love your little icon here so we're going to steal it um save image as sure downloads boom Oh I should have said oh I should have saved it uh into the Chrome extension let's do this we're gonna save it inside of Ben's bites and I'm gonna call oh it's an AMV file Ben what are you doing to me here bud um save as Ben's bites we're gonna call this icon can we change the file you think what if I force the file I don't know if this will work CNG see if I just broke something can I click this and it opens as a PNG nope that's broken it opened in a different screen so we'll delete that dang it Ben I don't even know what an A and B file is you want to see some hacky stuff since everything we're doing is hacky watch this we're gonna grab a snid bit of this because I'm more lazy we're gonna grab that thanks for the hacky level then you can email me an actual logo when we're done and we'll get this updated uh we're gonna say screenshot we'll just save that we're going to come in here to [Music] pixel editor open we're gonna do download screenshot uh we're gonna use this magic Snipping tool to grab the outside of this we're going to click delete page trim oh well deselect we need to deselect how do you deselect oh yeah we have deselected all right check this out uh we have that now we need to save it save as transparent PNG we just want this to come into downloads Benz bites by the way I appreciate anyone who's still hanging in what are we at 11 minutes golly icon save boom all right get that off the screen so now um if we come up here into this um I don't know what I would type for this how about this how can I change the icon of the Chrome extension see look at this it rewrites it okay so looking at this it's basically telling us to add this icons to the Manifest I've done this a bunch of times if you were to read through this it wants you to do different sizes uh we're not going to do different sizes just because we're lazy but it says open up manifest and add or modify the icon so we're going to click copy here we're gonna come into Ben's bites Chrome extension here's the Manifest and it wants us to add like a gazillion different icons where is that icons all right so check this out we're going to click enter we're going to click icons and that looks ugly code wise so what we're going to do is try and line it up I think this needs a comma and the reason I say I think it needs a column is because I've again done this a bazillion times I've even uploaded this and be like does this look good which you can do that as well you can copy this paste and copy this and say does this look actually let's do that look at that so we did it right but if you ever have an error message or something doesn't work you can actually go in here and just post the error message and we'll likely end up showing that because I'm going to try and break some of this stuff also if you notice we just called ours icon.png so I'm gonna edit some of these because I don't have an icon named icon 16. and they put it in the icons folder which we also don't have so we're just going to call this icon icon I got an icon oh man I hope somebody's not watching this the way I'm doing this gives me anxiety uh boom boom boom boom boom boom boom boom boom click save um and then we're gonna come back over to this extension we're gonna refresh it and boom we pulled the icon now we have Ben bites Chrome extension and it says my Chrome extension we don't want that we don't want that so we're going to open this up inside of the Manifest we're going to change this to Ben's bites bends thighs [Music] we're going to change the name to just say foreign [Music] save on that and then we'll drop this drop that we'll refresh boom now Ben's bites extension 1.0 right up here and boom look at that now you can subscribe right in there uh this isn't good enough for me uh this is this is neat but it's not neat enough uh first off I don't like the hello world and so just from playing around I can tell you that this is an HTML pop-up um and we only have one HTML file in here uh again and so this says hello world right here we're going to just delete that we don't like that click save and boom close it boom boom boom we'll refresh it and now we're iframing Ben's bites right in here perfectly beautiful then this is looking good bud um so the problem is this Chrome extension has no function as of right now so let's see if we can add a function in here that really um kind of UPS the game and check this out so this is something I do all the time to train the the chat so watch this because we made some changes that chat doesn't know about like the icons all of these texts we made some manual changes ourselves the tool still thinks we're using you know we're right up there whatever existing code is there so I'm going to teach it what the updated code is so check this out here is the updated extension code manifest popup.html popup.js now what I'm actually going to do here is just add the code in here so Chad gbt has it on record like it can see it so you know we're going to come in here Notepad this is the new manifest for Ben's bites we're going to copy that uh oh manifest boom right here and then what we'll do is we'll come in here and we'll grab the pop-up this is the JavaScript one again I don't even have a JavaScript code reader so we're just I mean it's getting rough uh we're gonna copy that that's the js1 which is down here uh and then the last one was the HTML so we'll open that it obviously doesn't need the icon although I think chat gpt4 can read icons boom and so we're just gonna paste it so it just has the updated code and so watch this I think what's going to happen is they'll explain us what the Chrome extension is uh extension code looks good iframe all right so check this out this is what's going to be interesting [Music] okay I have an idea for this that I think would be interesting um would it be [Music] foreign that appears every time [Music] I had to stop talking but this is uh Ben oh wow I posted about that yesterday Michael copying me and grab this build a Google notification that every time tweets so build a chrome notification that appears every time Ben Castle tweets in real time [Music] case Twitter API look at this look at this I've never done this so uh oh this is cool [Music] all right and I think we're done this is going to be fun all right so uh here are the steps to create the notification create a Twitter developer account and create a new Twitter app to obtain the necessary API tokens you can follow the instructions to our development in the Twitter API set up a real-time stream connection use status filter follow okay I don't really know what I'm looking at here replace this with the Twitter username oh I can do that and use the tool use a tool like Twitter ID to find the user ID of a Twitter user I don't really know what that means in your Google Chrome extension use Chrome notifications to create a method to display the tweet every time a new tweet is received here's an example how to use that method okay I don't uh I don't know where to put this so we're gonna have to ask that question in the background script of your Chrome extension use Chrome runtime so we don't have a background script so here's what I'm going to do I'm gonna straight up say please add the above code to our existing Chrome extension again I'm not that smart right so now it's saying oh you don't have a background JS you have to create one look at this and so now what it's doing is it's creating uh the new manifest so we've seen that before those are the icons it looks like it messed it up but hopefully not uh look at that and now it's done oh that's rather easy certainly here's how to modify the existing statue of the code open the extension directory and create a new file named background.js so we're going to open this let's just click the Manifest because we're a new one background.js it said background.js we're going to copy this code then we're going to be following your tweets any minute now we're going to click this here we go paste file save as say if there was a way to save it saying I don't know what I'm doing Js Js looks good save boom that was easy man I'm such a good coder I hope you're laughing with me uh okay this code establishes a connection using fetch method and listens to the tweets using connection method when a new tweet is received and check to see if this be sure to replace your Twitter API token here with the actual token modify the Manifest okay we can do that boom manifest remember we had it open right here it says modified does it just give us all the code sure does so it doesn't I'm concerned because normally when it's all green and white then that normally means something's broken hopefully it's not reload the extension okay so I'm gonna stop the video here I'm gonna go get and create a Twitter API token uh and I'm gonna do that offline uh because I don't know how hard this is gonna be and then I'll come back in here and explain it if it's easy so we're gonna take a pause right now and jump right back into it well I have some bad news Twitter did not let us in it looks like they're asking us to hashtag application received so they can speed up the process but uh I guess Twitter doesn't just open up their apis to everybody which is unfortunate um I don't know if they'll let us in or not I probably didn't put a very good use case in front of them I said I was a student with no Dev or no Dev experience or close the no Dev experience long story short they have you apply for access to a Twitter API which kind of sucks um you know things are changing in Twitter right now so I'm not not surprised um so let's do this in our sad voice we can set up the rest of this let's go in a Twitter ID here Will Graham good old band here what's going on Ben nice to see you again boom uh convert what is that what is this Twitter ID username career type I need to get rid of the Hat connection error it's always making some money off of Google pay-per-click on this nice um well I think maybe we can just put the app then let's see okay yeah it it pre-filled it all new tweet from Ben dang man all we need now oh all we need now is the token ah well this is as far as I can take it for now um Ben if you have any questions or if anyone who's watching this has any questions we've got a Half Baked Chrome extension that basically pulls up Ben's bites allows you to subscribe my idea for this extension was for it to also notify you when Ben tweets about AI stuff uh I think that would be a pretty sweet uh app and a good use case and example of using chat gbt what's interesting about this is we did all this in gbt3 uh I typically don't even move into gpt4 until like it breaks down uh but long story short just a bunch of back and forth questions and you can get practically anything accomplished uh within this tool you can build almost anything um anyways that's all I got for now I'll shoot over this video um and if I get access we'll finish the project and ship it and you can use it until then we'll stop for now

Channel: Spencer Scott

Views: 7,762

Keywords:

Id: gzIfJyYpSlk

Length: 27min 5sec (1625 seconds)

Published: Thu Mar 16 2023