WEBVTT 00:00:00.240 --> 00:00:24.945 Anthropic just dropped the official Chrome extension for Claude Code. And in today's video, I'm gonna show you how to quickly set that up inside of Claude Code and why that is so important for any of us who use Claude Code as our co writer. Alright? So in other words, your co writer now gets eyes and now has direct access to your browser with this Chrome integration. Alright? 00:00:25.185 --> 00:00:36.210 Now how this works is it's getting direct browser control now. We don't have to deal with extra MCPs or workarounds, which you would have had to done do before if you wanted to give access 00:00:36.930 --> 00:00:41.410 if you wanted to give Claude code access to your browser. But now we can do this directly. 00:00:41.490 --> 00:00:42.530 It's a lot easier, 00:00:43.455 --> 00:00:51.535 and it makes a big difference now from the before and after. So before, if you wanted to give your co writer or Clog code access to your browser, 00:00:51.695 --> 00:01:20.765 it would be you know, you would be using a couple different separate tools or just workflows. For example, what I would do oftentimes is I would have to screenshot things on my browser, drop it into Claude code, and work with it that way. But now we don't really need to do that anymore. We can open it up here side by side like you're look like you can see that I'm doing now, and we can give it direct access so it can see everything we are seeing in our browser without having to deal with all this different copy and pasting that we might have had to do before. Right? 00:01:21.245 --> 00:01:31.790 Now to set this up, it's actually super simple. It's one of the easier things you can set up on Claude code. We're just gonna have to run a couple things. The first thing we're gonna do is go to claude.com/chrome, 00:01:31.790 --> 00:01:34.270 their official announcement page for this extension. 00:01:34.510 --> 00:01:37.390 And you're gonna see here that they talk about what you can do with it. 00:01:37.710 --> 00:01:45.865 Prior to this new release in Claude code, you are already able to to get this in your regular, uh, Chrome extension, and you can do things like, 00:01:46.025 --> 00:01:52.665 uh, interact with your Google Calendar or run background tasks and even schedule daily workflows right in your browser, 00:01:52.745 --> 00:02:15.615 uh, with this Claude agent, basically, this Claude browser agent. But today, we're just talking about, you know, mostly talking about Claude code. So you're gonna come here and you're gonna click add to Chrome if you don't have it already, and it's gonna take you to the official Chrome store extension store where you're gonna add this. And once you do, it's gonna be available here in your extensions. Okay? Now you're gonna click this, and what it's gonna open up here 00:02:16.015 --> 00:02:26.500 is you can see that Claude co or the Claude Chrome extension is now open, and you're gonna see these orange tabs here where you have the Claude name and you have this orange highlight. 00:02:26.660 --> 00:02:34.100 This is called a tab group. Alright? And what this means is everything you see highlighted in this group here of tabs, 00:02:34.420 --> 00:02:38.180 this is what Claude is restricted to. This is where Claude is active. 00:02:38.675 --> 00:02:50.035 So for example, right now you see this Chrome window open here, this Chrome tab, and this is the only one that Claude has access to right now. All these other ones that you see that I have open that don't have the orange highlight, 00:02:50.115 --> 00:03:16.565 these are not in the tab group. So Claude is not accessing these right now. If you wanna access it, you just for example, I have the Substack page of mine. I would just drag it into the tab group, and now you can see that it's orange. So it is now accessible by Claude in this tab group. Alright? And same thing, you can drag it out. So once you're in here, before we even look at Claude code, just to if you're not familiar with this at all because only some people had access to it before, 00:03:16.885 --> 00:03:34.280 this was already available. And this right here is basically have this has nothing to do with Claude code. This is just the regular the regular Chrome extension that opens up this side panel here, and you can interact directly in your browser with it. You can choose your model. You can ask it questions, and it's like a direct, 00:03:35.000 --> 00:03:40.355 you know, panel right inside of your browser. But that's not what we're gonna be using today, so we're gonna close that out. 00:03:41.315 --> 00:03:46.115 So now we're gonna talk about how to get it inside of your Claude code 00:03:46.515 --> 00:03:48.755 Claude code system or your co writer. 00:03:49.250 --> 00:03:57.090 And what you're gonna do here is on the right side, you can see I have my code editor open. I'm using Versus code, but you can be using whatever, maybe use cursor. 00:03:57.170 --> 00:04:11.155 Uh, but I use Versus code because what we can do here with any of these code editors is open up all of our folders here on the left, and I can see my full system here. And it just makes everything a lot easier. I'm gonna minimize that for now because I don't need it. 00:04:11.555 --> 00:04:28.260 Fresh terminal without ClotCode, just the fresh terminal, and you're gonna need need to do a couple things first. The first is you're gonna need to run a Cloud update in case it's not updated. So you're just gonna type out Cloud update in your terminal, enter. It's gonna check for the current version. You should be up to date with 2O0.73 00:04:28.260 --> 00:04:36.355 at the time of this video, and we know we're good now. Now after that, you need to launch Claude in your terminal. So just by typing Claude, 00:04:36.355 --> 00:04:39.635 we have Claude launched. Let me zoom in a little bit here. 00:04:40.035 --> 00:04:42.675 And now we have Claude code running in our terminal, 00:04:42.755 --> 00:04:44.620 and we're gonna do slash 00:04:44.620 --> 00:04:45.420 chrome. 00:04:45.500 --> 00:04:55.660 When you do slash chrome, it's already set up. You're gonna run that, and you can see that it's here. So we have Claude in Chrome works with the Chrome extension to let you control your browser directly 00:04:55.660 --> 00:05:00.085 from Claude code, navigate websites, fill forms, capture screenshots, 00:05:00.805 --> 00:05:08.405 record GIFs, and debug with console logs and network requests. Now you need to make sure that the status is enabled and the extension is installed. 00:05:08.820 --> 00:05:11.220 So to do that, you might have to 00:05:11.700 --> 00:05:13.940 first click this reconnect extension 00:05:13.940 --> 00:05:15.700 and it will enable everything. 00:05:15.940 --> 00:05:24.100 Now once you have it, it's already enabled and you can manage the permissions here. So if you click enter for manage permissions, it's gonna open up this tab here on the left. 00:05:24.745 --> 00:05:30.425 And what you can see here is we have all of our, uh, Claude code Chrome extension 00:05:30.505 --> 00:05:31.385 permissions, 00:05:31.385 --> 00:05:33.545 right, or just cladding from settings. 00:05:33.705 --> 00:05:35.305 We can enable notifications, 00:05:35.305 --> 00:05:48.510 so it'll tell us when things are complete. We can also give it microphone access. And what this will allow you to do is there's this new feature in the regular Chrome extension where you can record a workflow that you're doing and speak 00:05:48.590 --> 00:06:00.745 into the dictation, and you can document this workflow for for Claude to understand. Understand. Alright? Alright? And then also you're gonna have your approved sites here. You can see I've already been working on, like, Tally and Substack and my own website. 00:06:00.905 --> 00:06:25.155 You can revoke access to these at any point. These are the only sites that it has access to, and every time you access a new site, it's gonna ask for permission. Alright? And you're gonna see how that works. We can close those settings out for now. We don't need that. But what we wanna do now is just show you a couple couple ways that I've been using this. So what can you actually do? I'm gonna give you three examples. This is pretty new, and I've been trying out new things. 00:06:25.715 --> 00:06:30.675 You know, I do wanna mention that it doesn't work a 100% perfect. It's pretty slow, 00:06:30.995 --> 00:06:36.370 but it's getting better. It's a lot better than it was a couple months ago when I tried it on the regular extension, 00:06:36.690 --> 00:07:06.220 and it's really just, at this point, good for running background tasks or things that you don't you know, that are pretty easy, that you don't really need to waste time doing, and you can let it do it. But But we're gonna talk about some cool things. So what are the there's three things I've done over the past day or so in my own writing system. The first was I've been using it to track analytics on my Substack page, which I'm gonna show you here. And the reason for that is because Substack doesn't have an API. So unlike these other platforms, you know, other newsletter platforms or other, 00:07:06.460 --> 00:07:24.455 uh, let's say, social media platforms like LinkedIn or X, uh, Substack doesn't have an API. So it's very difficult to track all of your stats. You kinda have to do it manually. I track it all in an air table. But now what I can do is give Claude code or my co writer access to my substack to 00:07:24.615 --> 00:07:26.535 basically track all these analytics. 00:07:27.110 --> 00:07:32.390 So that's the first way I've been using it. The second way is I've been using it to fill out surveys. 00:07:32.550 --> 00:07:34.950 So on my own 00:07:35.350 --> 00:07:49.385 website here where I just launched my custom writing systems that you can apply for, I needed to fill out a survey for potential clients and people who were interested in doing this. So if you click here, you're gonna see I have a survey here, a cowriter application. 00:07:49.705 --> 00:07:56.840 And I literally used Claude code last night to my co writer to build this. So we planned it out inside of my 00:07:57.480 --> 00:08:03.640 in in my code editor with Claude code, and then I had it access and actually put together the application 00:08:04.225 --> 00:08:24.560 on Tally, which is just a a website for easily creating forms. Right? That's the second way I used it. And then the third way is, um, doing visual analysis. So I've asked it to go on, like, YouTube pages of people's thumbnails, also asked it for my landing page, which I'm gonna show you right now, to give a visual analysis of everything on there without having to really 00:08:25.040 --> 00:08:26.960 have an access, like, the HTML 00:08:26.960 --> 00:08:29.440 or take screenshots or or, you know, 00:08:30.095 --> 00:08:32.735 anything like that. So that that's a really 00:08:33.055 --> 00:08:47.080 good use case as well. You can analyze thumbnails, study competitor pages, debug your own sites. Right? But enough of that, let me just show you a couple couple ways now that I was using it. So we're gonna open up a new Claude code session here. 00:08:47.800 --> 00:08:54.280 And the first thing I did, which you can see here, which I'm gonna re rerun here, is look at my Substack notes. 00:08:54.440 --> 00:08:56.200 So here on Substack, 00:08:56.440 --> 00:08:57.320 we have 00:08:57.640 --> 00:09:15.695 my Substack notes for people who aren't familiar with Substack. It's just like any other social media. I have my Substack notes here, and I have my, you know, whole list of them with likes and comments and and all of that. There's no real easy way of pulling all that. So now what I'm gonna do is tell it to, you know, review all of that and 00:09:16.110 --> 00:09:47.590 track it. But before I tell it, a couple important points is you should always make sure to tell it to use the Chrome extension right now because I found that if you don't, it doesn't really know that autonomously to use it. And second, you should definitely drop the link of whatever page you wanted to access so you don't have to you're not making Claude go do all the work to try to find what you're talking about, and instead, you just give it direct access to the page you're looking at. So here's what we're gonna tell it. We're gonna tell it, take a look at my last 10 sub stack notes, find out what is working, what is not, and track the analytics. 00:09:47.910 --> 00:09:50.150 Use your Chrome extension to do this. 00:09:51.670 --> 00:10:01.415 And then just drop the link in there, and then we're just gonna let it let it do its work. So what it should do now is open up a tab group, ask us for our permission, 00:10:01.815 --> 00:10:08.215 and start doing the work there. So we're gonna see what it does. First, it reads my context profiles in my system, 00:10:08.615 --> 00:10:14.220 and then there it goes, opening up the new tab that you can see here, and it's gonna start navigating 00:10:14.220 --> 00:10:40.400 all by itself. Right? So after a second or two, it navigated to the page I told it to. And now on the left side of the screen, what you're looking at is Claude code, uh, controlling my browser. Right? And here in the on the right side in my code editor, you can see it made a to do list. So it's gonna navigate to my Substack profile and find my notes, review the last 10 notes and metrics, identify patterns and what's working and what's not, and then document findings with actionable insights. 00:10:40.640 --> 00:11:12.810 So it's doing that. Now an important point is don't touch the screen that it's working on. So, like, here in my on the left side here, you can see that it it's working here on my sub sec. Don't start scrolling or clicking on anything because I found that that just, like, screws everything up or at least slows it down because Claude is basically taking screenshots and navigating that way. So if you move the page, it's gonna take a screenshot and get lost. It's gonna lose itself. So don't really touch anything, but that's okay because now we can let this run-in the background. So as this is running in the background, 00:11:13.130 --> 00:11:15.050 we can open up another terminal, 00:11:16.010 --> 00:11:22.905 and we'll we'll we'll launch Cloud, and I can literally do multiple things at once now. So now while this is running, what I wanna do is 00:11:23.145 --> 00:11:25.945 I wanna come look at my landing page, 00:11:26.345 --> 00:11:28.905 alright, for my cowriting 00:11:28.985 --> 00:11:31.545 custom systems here, which you're looking at here. 00:11:32.025 --> 00:11:48.310 And maybe what I wanna do is ask my co writer as my co writer has access to everything about my business and writing, what I can do is ask it to, you know, analyze this landing page, maybe find, you know, what's working, what's not, what's making it converting. 00:11:48.470 --> 00:11:54.065 And if I'm missing any, you know, important aspects of my system that are not being, 00:11:54.305 --> 00:12:01.105 uh, shown on this landing page. So on my landing page here, we have your own AI co writer built for your business, apply now. 00:12:01.425 --> 00:12:03.985 We have the pricing or the the features breakdown, 00:12:04.600 --> 00:12:20.120 some of this other stuff, which side note, this landing page I built with my Claude code as well. So now what we're gonna do is we're gonna use voice dictation to talk to Claude, and we'll say, take a look at my custom writing system or my custom co writer 00:12:20.625 --> 00:12:34.705 landing page, find out what makes it converting, what's working, what might not be working, and also go through our entire writing system here in our environment and see if I'm missing anything that would be worth including. 00:12:35.105 --> 00:12:36.705 We're gonna tell it 00:12:37.040 --> 00:12:38.800 use your Chrome extension. 00:12:39.520 --> 00:12:59.475 Always make sure to tell it to use your Chrome extension and then drop the link as well. And now it's gonna do the same thing. It should open this up in the tabs where Claude is accessing. And while that's running, we go back here, we can see that the first one that is analyzing my substack notes is still running in the background. 00:12:59.715 --> 00:13:10.060 So before this video already started, I already did these same exact two, so we could take a look at what that output looked like starting with the sub stack notes. 00:13:10.460 --> 00:13:15.020 So the first thing I asked you to do, like you saw, was analyze my sub stack notes, 00:13:15.260 --> 00:13:21.815 and you can see after I completed it here on the right, what we got was an entire breakdown 00:13:22.695 --> 00:13:30.535 of my sub stack notes, my last 10 notes. I have the when it was published, the likes, the comments, the restacks. 00:13:30.535 --> 00:13:32.375 I have a breakdown of what's working, 00:13:33.110 --> 00:13:37.510 what's not working, you know, patterns to double down on, patterns to avoid. 00:13:37.910 --> 00:13:53.445 And what you're not seeing also at the same time is that it's doing this all in the context of my entire system here to the left. So the co writer, you know, it's just one big system working together here. And then for the second task we asked it to do, which was analyze my landing page here, 00:13:54.005 --> 00:13:57.445 what we got was let's take a look. Scrolling down. 00:13:57.925 --> 00:14:02.005 This is how long it takes. These are all screenshots and actions it's doing in the browser. 00:14:02.885 --> 00:14:11.280 And now it gives me a landing page analysis of what's working well. You know, it says the file structure visual at the top is brilliant. It immediately shows what they're getting, 00:14:11.680 --> 00:14:14.640 but we can see some opportunities here, like I'm missing price, 00:14:14.880 --> 00:14:19.345 which was purposeful, so that's okay. But what I am missing is testimonials and social proof. 00:14:19.585 --> 00:14:22.465 We're missing specific outcomes, urgency, 00:14:23.265 --> 00:14:28.065 and some other things there. So there, it's gonna help us analyze landing pages. 00:14:28.385 --> 00:14:52.605 It's gonna analyze landing pages and and maybe show us some things we can do. And just to finish off, like I said, let's be honest, it doesn't it's not super fast. This is not something that's gonna be like zip, zip, zip, doing a million things on on Chrome for you. It's a background task tool, not a speed tool. So make sure to delegate tasks that are not really worth your time, that might be annoying to be doing, that are very straightforward, 00:14:52.765 --> 00:14:55.885 and delegate those to Claude Chrome, 00:14:56.365 --> 00:14:59.725 you know, or use it as a visual analysis tool or 00:15:00.120 --> 00:15:19.435 to help you basically do things where maybe an API is not available or there are no available tools, for example, Substack Analytics. Alright? So go try it out now. Test it out. If you haven't checked out my quad code masterclass for building your AI co writer, check that out as well because this just always 00:15:19.515 --> 00:15:24.875 every new thing that comes out just builds on top of your co writing system and supercharges 00:15:24.875 --> 00:15:35.313 it. Drop a comment below if you've used this, if you tried it out. Let me know how you're using it, and if you've discovered any, uh, cool ways of of, uh, supercharging your systems with this new Chrome extension.