I Created A Chrome Extension In Less Than 30 minutes - NO CODING EXPERIENCE W/ GPT-4

I'm about to create my first Chrome extension from scratch in 30 minutes um with no technical coding knowledge I am gonna give it a go with chat gbt on my side let's see what we can create let's go prior knowledge I don't have technical skills I am very very basic knowing some HTML CSS I don't know anything else to be honest um I know how to read it I don't know how to write it so my idea is I need I realized I needed to keep something pretty simple um so I went with this Chrome extension allows you to write and say five articles and then if you want to add more bookmark more you have to read this first I'm calling it five head news I mean if I paid before we switch members out there so it's already created a description for me say how to Spotlight because it's highly prompted to really save articles for saving more stay focused the other you're reading this so pretty much the purpose of what I why I created this so you gave me the features and how to create become extension so it's essentially this first and then it said this response only provides an overview on how to create divide head used Chrome extension and eyewear no actually right order codes I can create a premise so it says I'll provide you a basic version of the Buy It remix so I'm seeing all this here all the code is right now but I know what to do potentially but I don't know what I'm doing to be honest so I asked it can I just create a folder on my Windows computer to run this do I just input everything in text folder and we're going to start from here um and see what we come up with so I'm going to save into my G Drive um you're probably gonna cringe because I don't know what the hell I'm doing but like I don't even know how to like someone Adventure mother Monitor and let's see so create a new folder on your computer and name it five head news so I'm gonna create five add news and so you can see here I've created it let's just mix a bit smaller so you can see my boom actually Okay so all right cool so um create inside a new solder using a text editor like notepad plus so I have notepad plus zero um provided save each file of the pasting each code so let's start off with number three so let's see so we got the Manifest Json here actually no it is copy code here how cool is that so save save as we will save it into my other news we got here um whatever you wanted me to call it manifest Jason all right sure let's just support that didn't be anything else oh we'll find out so we got that and then we'll go notepads plus again uh we're doing new one and then we'll copy the background uh background Jace JS JavaScript it's a novat one uh JS save new one and this one will be the pop-up HTML um style CSS screening Okay cool so pop.html save that save as HTML now I don't know if I need to save it in the format button text so we'll find out we'll definitely run some problems this isn't like you know hey just trying this out um so let's save this obviously we can change the CSS stuff like I know how to read the build CSS and stuff so we'll change it once we see what it looks like and finally create a new file called uh JS so this isn't fully linked so we'll just copy the code and we'll just do a hot pot okay yeah oh no no optic code here should as so Js and done alrighty so we've got all so Okay so we've done that now design create the icons [Music] 48 Dot all right so I'm assuming these are the thumbnails or something but let's just ask chat TBT so what are the two icons two icons icon 48 PNG and Nikon are the visual representations are your Chrome extension it will be displayed in various places such as the fixation system alright so it is what I assumed which is the thumbnail or whatever you want to pull it off just a little thing so size 48 by 48 so we're gonna go on camera we're gonna design something quickly [Music] um so I got canva here so let's just type in you know what let's just do news um SSC is this one you know it looks pretty good five add news and we get a five head uh let's just Chuck this in copy and paste this into the back [Music] and put it there all right that's looking pretty good let's make this a bit bigger and let's bring that up I reckon and let's bring that down let's actually put this in a different line so we'll just do that and let's do this I prefer actually the red so stickers [Music] alrighty it's the roughest thing I've ever created like it's this is so quick so normally I wouldn't be doing this but you know what this is how it is um actually this is like the icon here right I'm just looking at my ones over there you know what let's create a different one uh uh you know what I know the idea here we'll just do this then [Music] uh Civic um let's go back to it all right so we'll do this so that's the number two so we'll download this um I'll just download it for a second one done uh we'll call it um what are they asking you look at this icon 48 boom and we download it [Music] uh all right this down and we'll go back home and we'll create the second one we'll be asking for 128 pixel one so we'll do 120 so [Music] um so I'll actually take my other design I'm assuming this is a thumbnail so it can actually probably put a bit more INF into it let's do this let's make it a bit bigger five head here but I think we can just do this how about that that looks alright you know what like we're here to experiment we're not here to make we're not designers here like we're not trying to you know spend thousands of creating a good design we're literally here to have a bit of fun okay so it should be called icon g g look down actually I don't think we needed a PNG because we'll save his PG anyways anyway whatever way we have the climax we have the extensions where is this saving all two let's see let's see saving on to my document so I'll take this out actually where is for something you're not not say this I mean a lot so okay so we started again oh alrighty we got both done all right let's take a look at now what's asking us okay so I'll Chuck it into here for now before we figure out what's the next step uh let's go back to I think all right create two versions one side the blah save each version that PNG with respect to file names um Place both inside a 5k news folder okay these iPhone's now be even displaying you okay cool all right I've done all this what's next let's ask chapter gbt great now that you've created all the necessary files added icons you can see to learn to test your Chrome extension in Google Chrome here's how to do it open Google Chrome you just bar type Chrome extensions so let's just start doing it now in all right Amber impressive is open top Pride enabled development about topping the switch have we done that uh click the load unpack button which appears in the top left and uh afternoon load unpacked and here we go let's see what this would do uh if I paid new select folder not let icon in specified in icons will not load manifest okay so we've already running some issues Okay so we've ran into some issues here um let's just see let's just do this I didn't say um all right let's just do this again um actually sorry okay so let's see what it says manifest is missing oh manifest is missing okay let me just check I got the right folder let me just first check the instructions all right load hacked unpacked okay yeah so I so not load icon specified in icons all right so let's give the errors and see what it says I got these arrows so we'll do one and then we'll do two it might be an issue with the icon files or the Manifest file so don't be pleased to find ensure that the icon files icon PNG iPhone oh the edit in the 510 news order also the other sections um I think I've done that because of different names could importantly all right so let's just you know what let's just I don't think it will solve the issue but I will punch this into a standard PNG see if that does anything probably not I'm not gonna lie but this stage you never know right you said that the following files okay double check the content make sure that no syntax is just missing callers brackets content all right so at the verifying Child Learning Center all right cool so it's doing telling us to just ending so I've changed that um the Manifest is here Adobe after effect After Effects Json all right so delete this will rewrite our manifest Json so Chuck that in and we will uh uh follow this Zack's name as Json and say something here is let's do this so I was already open yeah okay no let's just get rid of it okay so we'll try this method um probably not actually no I'll say it'll like this again let's see if it'll work so once again same thing we try so not low manifest so okay we're getting somewhere with a load icon okay well you know what let's just load it again it's not a load specify it in like interesting so it's not giving me the 128 issue it's giving oh it's I'm silly it's all right that should solve this issue all right there you go um save up to five articles being posted okay arrows [Music] you know what that's fine we're here to test around okay so now we have this working um [Music] all right let's see uh if you try to say two minutes [Music] added to your saved article up to click on the browse to use article all right let's just go to a news article um you know SUV studies stuff right now so we'll go to news.com alrighty now probably need to find extension so it is here I'll pin it here it so how does this save click on the uh if under or to open up okay it's not adding anything yet so okay it's loading but when I tried to save an article it doesn't save and we also add a button to delete an article it's letting burner Tracy it doesn't say and we add okay you know what can we add two buttons can we add two buttons to delete an article and also save an article so when someone goes onto a news article foreign extension and then press save let's see what it does sure I can help you add the save article and delete buttons to extension for those steps you want to play existing code update the top.html include save article so so we've you know we've gotten somewhere the five Head News Artic Hot Head you know what this actually this logo doesn't actually look that bad funny enough um but obviously right now it's not saving articles it is just purely just sitting there as a fighthead thing um which isn't what we wanted to do we wanted to save articles um so let's just wait for it to come up with pop-up HTML pop-up Js see what it can come up with but as you can see how awesome is this like what we started at 340 I probably loaded these prompts in at 3 30. so it's less than half an hour and I'm already creating a working web extension um that doesn't really do anything yet but I think we'll do something quite soon so we've got to pop the HTML so let's uh alter it uh you know what which is Alter this be honest I think that will be fine um because what I'm assuming we can do is we can just press the update button here um using my very basic knowledge [Music] so yeah so we'll just wait for a bit but leave a comment below what are you going to try with chat gbd4 I know I'm going to try creating a bunch of excuse me Chrome extensions um I've always wanted to create climbing extensions but I'm not a techie but with this now like the power you can do is just so um update the pop object as well CBS this far which accidentally named objects which is why potentially why this isn't working so that's might be a silly mistake from my card uh I'll just quickly check the files I'll pop that's the HTML this should be the genius right okay so this could be save it and we'll actually rename it so this month is silly mistake for my problem you might pick it up in the video that I have not I did not do this correctly it's probably the best way to put it uh that's I don't want to do that so uh no hopefully it opens let's just open this into um open this that is not what I'm trying to do okay let's just open it here um pop up all right so it should be there and then let us now update the style CSS oh does that look right [Music] so I'm not sure okay let's go read the HTML a bit because I'm not sure if I meant to delete everything so pop-up HTML I kind of JS well let's just take a look at what this what it intuitive actually and then let's scroll down is it is it an update so it looks like this is definitely um I can update this looks like I believe or if I just supposed to add I'll click actually okay so update turnout save an article um yeah let's just open the uh popular.js actually this is the this is the new one right okay you know what let's just trust it let's just hopefully I just can tell that this style CSS is I'm not meant to replace this I meant to just add it here um so we'll just save that disable this disable this and then we'll update and see what weight loss I'm going to assume there's gonna be mistakes because I just did not do things correctly I think um but we'll see what it does it's just updated all right cool so let's see what it does save article and delete we did it we just said we created our first Chrome extension how about that um let's just you know checking your news article um so shot a bunch of news articles just you know chop this um save article save article I said the same article it can and boom oh that is not what I want to see it's because okay let's it might be because this is the same article it's doing that let's just make sure we're not uh in a phone call all right cool so [Music] um if I delete that delete that oh okay so it's the leading certain is it because of the same website all right so let's just go back okay you know what it's because these two the same websites anyway so let's just save these two and delete let's go to the same website right am I just dumb wait let's just let me just read it these two these four should all be the same I mean different articles I delete this is fine fine fine okay maybe I was deleting the same article I need to rewind and check it back I'll probably do the rewind again make sure I'm not you know foreign [Music] [Music] how fun is that um now I need to see if it's I can upload it into the Chrome extension store obviously if it's like speeds and stuff like that I'm not here to steal people's data um so I need to take a look at that but hopefully this video is interesting I just created with Chrome extension from scratch which is awesome um so yeah hopefully this video is interesting um but yeah I will probably mess around and do more clean this is fun but yeah hopefully you found this in videos interesting and I'll see you next one

Channel: Richard Fang - Travel and Life

Views: 2,437

Keywords: finance, marketing, tch, tech, technology, startups, personal finance, wealth, how to make money, side income, side hustle

Id: GdL4LeEe4tI

Length: 22min 19sec (1339 seconds)

Published: Sun Mar 19 2023