Use Claude Cowork To Build Chrome Extensions (Zero Coding Skills Needed)

A few weeks ago, I made this Chrome extension using Claude Co-work. And I've never coded anything in my entire life. But Claude Co-work just makes it so simple to use for something like a Chrome extension that even someone who's not very technical can easily make the same thing. So, first, let me show you what this Chrome extension does, and then I'll show you how you can use Claude Co-work to make any Chrome extension that you want. Now, I'm a big

fan of Google Gemini, but it lacks some features that I really want. Specifically, more than anything, I want some kind of folder system to be able to organize all of my different chats. But Gemini doesn't have that. So, I decided to create a Chrome extension that adds folders to Gemini. The one I created is called Gemini Architect. I will turn it on and show you what it does. All I have to do is refresh Gemini. And now over here on the left, you see this folder system. So, I can add in a new folder. I'll call this one folder one. We'll add in a folder two as well. And now I can take any of my chats and drag them into these folders and then expand them to see all the chats inside that folder. And I ended up having so much fun making this that I added all these other features as well. So now anytime you come into a chat at the bottom I created this button right here that not only copies the last response but actually copies the entire conversation. I also did other things like if you come up to the Chrome extension itself you can download a backup or restore a backup from a file. I created all these keyboard shortcuts and there's even this fun theme changer. So let's change it to terminal for instance and it changes the whole look of Gemini. Now I actually

created the first version of Gemini architect directly here inside of Gemini the app and it did a pretty good job but there were some UI issues that it couldn't quite get right. So ultimately I did switch to Claude Co-work for two main reasons. First, I found that Claude was just the best at coding, but also because the way Claude Co-work functions makes it really easy for creating Chrome extensions. Let's make one together, and you'll see why that is. Start by opening

up the Claude desktop app. Make sure at the top you have Co-work selected. Now, Co-work is going to create files for the Chrome extension directly on our own computer, but we need a place to store them. I'll come in here and select the folder icon and select choose a different folder. Click on new folder and give it a name. I'm going to call this Chrome extension GPT focus. Then click on open. This message is asking you if you want CLA to have access to all the files inside of that folder. So I'm going to click on always allow. Now let me explain to you what I want this Chrome extension to do. Sometimes when I'm using Chat GBT, I just want to focus on the chat. I don't want to see this menu on the left. picker at the top or these words right here or an advertisement. I just want the chat and nothing else. So, I'm hoping that a Chrome extension will be able to remove all of the distractions. I have no idea if this is going to work, but that's half the fun. Let's give it a

shot. Back inside Claude, let's first talk about the model that you should be using. For most of my Chrome development work, I use Sonnet. Opus is a better model, but it burns through usage much faster. I only switch to Opus when Sonnet isn't able to handle a task or things aren't quite working out the way that I want. I'll switch to Opus, have it fix it up, and then switch back to Sonnet. Next, in the description of this video is a prompt that you can copy and paste into Claude Co-work. It basically tells Claude that you are working on a Chrome extension and you wanted to create for you a subfolder that is going to have all the files in it that are part of that Chrome extension. Then after that, you can just describe what you're looking for. I'm going to use Whisper Flow to dictate my idea to Claude Co-work. I like doing it this way so I can just speak naturally and switch from Claude Co-work over to ChatGpt to be able to talk about what I want changed. So, let me activate Whisper Flow and start describing what I want. The Chrome extension I want you to build for me is for chatgpt. com. And I want it to act as a focus mode where it eliminates all the distractions on the page. I don't want the menu bar on the left. model picker at the top. Sometimes there's an ad asking you to upgrade to plus or a higher plan at the top. I don't want that. There's a menu on the top right. Get rid of that. And there's always a message that says something like, "What are you working on? " or something like that above the chat. I don't want that either. I literally just want the chat area, the chat box. Perfect. Now I will submit that. Now, a lot of times Claude Co-work is just going to get to work. Sometimes though, it asks you some questions to make sure it's doing it the right way. So, let's see what this one does. But this time, it looks like it's just getting to work without any further questions. So, let's skip forward and we'll look at the finished product. All

right, so it is now finished and it says that it built the entire thing out for me and created all these different files for me as well. Let's actually take a look at that so you understand how this works. I've opened up the folder that I created at the beginning called GPD focus. And inside of this, Claude Co-work created a subfolder called GPD Focus V1. And inside of that are all the files for the Chrome extension. And again, all this is on your computer. So now let's test this out. I will come over to Chrome. And you want to come to this website right here. It's chrome colon slash slashextensions and I'll have a link for that down below. Just copy it, paste it into Chrome, and you'll land on a page that looks like this. If you already have Chrome extensions added, you'll see all of them here. But what you want to do is on the top right, make sure you toggle on developer mode. After that, come to the left and click where it says load unpacked. Now, find the folder that Claude made for you that ends in V1. So, here is GPT Focus V1. Select the folder itself and click on the bottom right where it says select. Now, you should see the Chrome extension right here. You can turn it on or off. We're going to leave it on. And then return to the website that you created it for and refresh that page. So, now I've done that and notice that it's not doing anything. So, let's see here. So, there's a toggle. It says it is off. So, I need to turn it on, but it won't let me turn it on. So, let me go ahead and try refreshing again. And no, nothing. So, let's tell Claude it's not working. I'll return back to Claude and just tell it I added the Chrome extension, but it is not working. It says I have to go to chatgbt. com to activate it. And it is on chatgbt. com, but the toggle is grayed out. We'll send that along. And here you can see that it was clearly able to identify what the bug was and it now fixed it. Now, this is a chance for me

to show you why Claude Co-work is so awesome for creating Chrome extensions because now it updated the appropriate files that had the bug in them. And I can return back to Chrome, click on extensions, and just click on refresh here. and then it now has the latest version. So, previously when I was using Gemini to create a Chrome extension, Gemini would create the files that I would then have to download and put all of them into a folder myself. And anytime I change one of these files, I had to download it again, delete the old one, and put the new one in. And it was a huge pain. It actually takes a lot of time, and things can get messed up if you don't have the right programs on your computer. So, the fact that it all just lives right here and Claude Co can update them exactly where they are, it makes it a lot easier for developing and testing one of these Chrome extensions. So, let's see if that fixed the issue. I will refresh the page again, and this time I will toggle it on. And okay, a little bit of success. It successfully got rid of a couple of things up here, but not everything. So, what I'm going to do now is I'm going to take a screenshot and I'll send that to Claude so we can see exactly what is still showing up. So, screenshot, save that, open up Claude, and upload it. And I'll say it's working now, but it's not removing everything. See the screenshot for what's still there. So, we'll try that first. I know a couple other tricks if this doesn't work and then if it doesn't, we'll switch over to Opus. All right, so a little bit of an

update. I was not expecting this, but it actually wants to navigate on Chrome for me to help troubleshoot this. And I don't have the Claude Chrome extension added to this login on Chrome or yeah, on Chrome. So, I have to add it. So, basically what this is this is a Chrome extension. I'm just going to search for Claude Chrome extension. And this is it right here. And by adding this and signing into this with the same account that you have for Claude desktop, Claude Co can actually go to Chrome for you and browse the internet. It's really cool. So, I'll just go ahead and authorize this and then we'll see what it's able to do with that. So, here you can see it opened up chat GPT. You can tell that because it's surrounded by this brown glow. And using that, it's actually inspecting the website and reading the page structure to be able to implement this Chrome extension. And you can see here it pulled in the exact IDs and classes that it needs. Again, if this is something you don't understand, that's okay because it understands what it's doing. All right, so it says it finished. Let's see how good of a job it did. I'll return back to the extensions again. Don't need to actually re-upload it myself. Just click on refresh. Come back to chat GBT. Refresh it again. And I think it nailed it. That looks great. So, we didn't even need to use clawed opus. Everything is now gone. And we have focus mode on. And if I want to, I can click on this and turn off focus mode. And refreshing it does work. So that's a little bit of a change I would want to make. Tell it that when I toggle on or I guess when I toggle off focus mode, I want it to actually work. It's a little bit buggy toggling it off. So that's another change I would ask Claw to make for me. But the initial implementation after a couple of back and forths, perfect. Now once I have a Chrome

extension doing exactly what I want it to do, I like to have a little bit of fun with it and to see what this can do. So, I'll activate Whisper Flow and start listing off my ideas. First of all, it now works, but the problem is when I toggle off focus mode, it doesn't really work unless I refresh the page. So, that needs to be fixed. Other than that though, it's great. The other thing that would be cool is if around the chat, it can sort of have like this glowing effect when it's in dark mode and when it's in light mode, sort of like this shadow effect that surrounds it just to kind of make it pop up and pop out and look cool. And switching back over to Claw Co-work, I will throw that in there. No idea if it's going to be able to do that, but let's just see. Now, it says it is complete. Taking a look at it. Let's try the toggle first. Toggling it on works. Toggling it off works. So, that is now fixed. However, I don't really love the glow effect. I don't think it really looks all that nice. So, I'm just going to tell it that the toggle now works perfect, but I don't like the glow effect or the shadow effect. Just get rid of that. And once it makes those changes, it will now be ready to be published. Now, at this point, you have

a choice. If you're just using this for yourself, then it's good to go. You don't have to do anything else. The only thing you have to keep in mind is don't move the folder. If you move the folder, then the Chrome extension won't work unless you come back over to Chrome: SLextensions and load unpacked again. So, it's basically linked up with the folder on your computer. But if you do want to publish this to the Chrome store, you can do that as well. So, what you want to do is come to this website, again linked up down below. This is the Chrome web store for developers. And come down here to where it says developer dashboard, and click go to dashboard. And if it's your first time using it, you will have to set up an account. It's going to ask you a bunch of questions, and you have to pay a fee. I think it's only $5, maybe it's $10, but it's not that much. Once you have access to the dashboard, you can click on the top right here where it says new item. Then it says you have to select your zip file. So coming back to your finder where you have the Chrome extension V1, you want to right click on it or in a MacBook hold down control and click where it says compress. That will create a zip file. Now from there you can go back and select that zip file you just created. And then it's going to ask you for the Chrome extension details. And you can have Claude write all of this for you. So you can just come over here and say to it something as simple as I'm publishing this to the Chrome store. Let me know what I should put in each field like the description here. It's giving me everything. So I'm just going to copy it all and paste it in here. Now there are some other things you have to upload as well like a store icon that was actually created for you as well. So click on drop icon here. Open up the folder that Co-work made for you and you'll see the icons right here. Select one of them. Click on open. And you also need to upload screenshots as well. And this is the only difficult part of this entire process because it has to be exactly 1280 by 800 and it's just going to give you a lot of issues. So, this is what I suggest you do. Take the screenshot that you want. So, I'm just going to take a screenshot of the entire screen and I'll save that one. And I'll take one more, but this time with the Chrome extension open again, capture the screen. And then I suggest you go over to Canva, create a new design. And by the way, I'm doing this on a free account. Click where it says custom size. And we'll do 1280 by 800. Create new design. And then for each of those, we'll just drag in the screenshots. So, here's the screenshot. I can now just expand this to fill up as much as I want. Then share and export it or download it, I should say. And then I'll just delete the image, bring in the other one, and do the same thing. Now we have both our images. They are the correct size. So, returning back here, we can upload those and paste in everything else. Once you think you've

submitted everything right, click on save draft up here. And then you'll see that the submit for review should now be enabled. If it's not, click where it says why can't I submit and it'll tell you what you need to do. So it's very common to get messages like this because this is basically asking you to justify why the Chrome extension needs access to certain things. So just go ahead and copy that down. Click on okay. And then come over on the left here to where it says privacy. And here it is asking you to put in your justification for all of those. And again, I will return back to Claude and just paste in what you copied. It knows what that means. Here it will give you all the responses and just copy and paste them over. Make sure you're putting them in the right place. So this one says single purpose description. I will copy that one down and come over to where it says single purpose and paste it in. The next one I need is storage justification. And that one isn't the next one on the list here. It is down here. So just make sure you're matching these up correctly. Further down, it's going to ask what user data you plan to collect. Read through all these, but I'm not collecting any user data. So I'm not going to select any of these. And I will check off where it says I do not sell or transfer data. I do not use data. And I do not do it for any sort of creditworthiness. So I checked off all those. It also asks for your privacy policy URL. So you will need that. You can put that anywhere. So I'll return back to Claude and tell it to create a privacy policy for me. There we go. So now I'll just copy this down and I'll just put this into a Google document. Just came over to Google Drive and started a new Google document. I will paste that in. And at the top I'm going to call this privacy policy for GPT focus. Now I will click on share. I will change the access to anyone with the link. Copy the link and paste it in there as my privacy policy. So all that is complete. I will click on save draft. And now I can submit it for review. So I will do that. And because it needed all these additional permissions, it's going to take a little bit longer for the review process. So, I've now submitted that. And there we go. As soon as that extension is approved, it will automatically be published to the Chrome store. And I'll put a link for it in the description down below. There's a lot of stuff Make sure to check it out. All the resources from this video can be found down there. And while you're down there, if you enjoyed this video, let me know that in the comment section down below. I still personally read every single comment. And certainly, if you're struggling, if you're getting stuck anywhere, I know there were a lot of steps. Let me know that in the comment section as well, and I will do my best to help you out. Otherwise, if you enjoy

the video, give it a thumbs up, subscribe to the channel. I'm constantly making tutorials just like this one to show you real ways that you can use AI in your life. And if you want to watch one of those videos, it's right here. This is like my complete course on how to use Claude Co-work. If you're a complete beginner, even if you're a little bit more advanced, I think you can still get a tremendous amount of value out of this. So, definitely click on this if you want to learn more about Claude Co-work. And I'll see you over there in just one second. Bye for now.