Modern Creator
Alex McFarland · YouTube

Claude Code Can Now Control Your Browser (Setup Guide)

A 15-minute walkthrough of how Claude Code gets eyes: setup, tab groups, permissions, and three real browser automation use cases with an honest speed warning.

Posted
6 months ago
Duration
Format
Tutorial
educational
Views
30.8K
438 likes
Big Idea

The argument in one line.

Claude's new Chrome extension gives your AI co-writer direct browser control for background tasks like scraping analytics without APIs and analyzing web pages, but it's deliberately slow and best suited for automating tedious work rather than speed-critical workflows.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You use Claude Code regularly and need it to interact with web pages, forms, or dashboards without manual screenshots or copy-pasting.
  • A founder or marketer running analytics workflows (like Substack scraping or landing page audits) who wants Claude to see and act on live browser data.
  • You're building internal tools or automations where Claude needs visual page context to complete tasks accurately.
SKIP IF…
  • You need fast, real-time automation — the video explicitly warns this is a background task tool, not optimized for speed.
  • You're looking for advanced browser automation beyond simple form fills and visual analysis, or you need to trigger actions across dozens of tabs simultaneously.
TL;DR

The full version, fast.

Anthropic's official Claude Chrome extension gives Claude Code direct browser control, eliminating the screenshot-and-paste workflow that previously connected your co-writer to live web pages. Setup runs through three steps: install the extension from claude.com/chrome, update Claude Code in the terminal, then run /chrome to connect and manage per-site permissions. Control is scoped by tab groups marked with an orange highlight, so Claude only touches the tabs you explicitly drag in, and approved sites are revocable. Treat it as a background-task tool, not a speed tool: delegate work that has no API or is tedious to do manually, like scraping Substack analytics, filling Tally forms, or running visual audits of landing pages and competitor thumbnails.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →
Chapters

Where the time goes.

00:0000:23

01 · Intro — Your Co-Writer Gets Eyes

Title card reveal, Claude Code series branding, promise stated.

00:2401:02

02 · What it does

Direct browser control, no extra MCPs. Before = manual screenshots; After = side-by-side live access.

01:0302:09

03 · Install the extension

claude.com/chrome, Add to Chrome, extension in toolbar, Claude panel opens.

02:1003:40

04 · Tab groups explained

Orange highlight = Claude-accessible. Drag tabs in/out. Claude is sandboxed to the group.

03:4104:28

05 · Connect to Claude Code

VS Code setup, run claude update, launch claude in fresh terminal.

04:2905:14

06 · /chrome command

Run /chrome inside Claude Code — Status: Enabled, Extension: Installed, reconnect if needed.

05:1506:06

07 · Permissions panel

Notifications, microphone (workflow recording dictation), approved sites list with per-site revoke.

06:0708:46

08 · 3 use cases overview

Substack analytics (no API), form-filling on Tally, visual page analysis. Limitations: slow, background only.

08:4711:12

09 · Live demo 1 — Substack notes analytics

Prompt structure: tell it to use Chrome extension + drop the link. Claude navigates autonomously. Do not touch the screen.

11:1312:37

10 · Parallel session demo

Opens second terminal, launches second Claude while first runs in background. Parallel multi-agent workflow.

12:3813:56

11 · Live demo 2 — Landing page analysis

Voice dictation prompt for second session. Analyze landing page, cross-reference writing system context.

13:5714:51

12 · Results breakdown

Substack notes: what works (numbered lists, social proof) vs what does not. Landing page: missing testimonials, price, urgency.

14:5215:36

13 · Honest limitations + CTA

Background task tool not a speed tool. Good fit: no-API scraping, visual analysis. Plug for Co-Writer Masterclass.

Atomic Insights

Lines worth screenshotting.

  • The official Claude Chrome extension gives Claude Code direct browser control without any MCP workaround — navigate, fill forms, capture screenshots, and debug from one interface.
  • Tab groups (orange-highlighted tabs) define the exact browser scope Claude can access — all other open tabs are invisible to Claude until manually dragged into the group.
  • Setup is one command in the terminal: install the Chrome extension, type /chrome in Claude Code, and click reconnect extension to enable the connection.
  • The Chrome extension enables a workflow recording feature: speak a workflow narration while performing it, and Claude documents it for future automation.
  • Browser automation with Claude Code is a background task tool, not a speed tool — it is slower than manual browsing but runs without requiring your attention.
  • Scraping Substack analytics without an API is a practical use case — Claude Code can navigate the page, extract the data, and return it in a structured format.
  • Building forms on Tally via browser control lets Claude Code handle the repetitive field-filling and configuration without a Tally API integration.
  • Visual landing page analysis (Claude reads what the browser renders) lets you prompt Claude to critique or compare pages it can actually see rather than pages you describe.
  • Permission management per site means Claude only has access to the domains you explicitly approve — every new site requires a one-time approval.
  • The before state (screenshot + paste workflow) versus the after state (direct browser access) eliminates the copy-paste bottleneck that slowed content extraction tasks.
  • The Chrome extension that runs inside the browser side panel (the non-code-editor version) is a separate use case from the Claude Code browser automation integration.
  • A Claude update check before enabling browser automation ensures the /chrome command is available — the feature requires version 200.73 or later.
Takeaway

Claude Code's Browser Access Is a Background Task Tool, Not a Speed Tool

Claude Code workflows

Alex McFarland's honest setup guide shows that the Chrome extension gives Claude Code eyes without extra MCPs — and that the workflows it unlocks (no-API scraping, visual analysis) are genuinely useful when treated as background tasks running in parallel with other work, not as real-time automation.

02What it does
  • Direct browser control without extra MCPs — the before state required manual screenshots; the after state gives Claude live side-by-side access
  • The elimination of copy-paste workarounds is the main quality-of-life improvement over previous browser integration approaches
03Install the extension
  • One install step: claude.com/chrome → Add to Chrome → Claude panel opens in toolbar
  • The extension appears as a sidebar panel in the browser — no configuration beyond installation
04Tab groups explained
  • Orange highlight indicates Claude-accessible tabs — drag tabs in or out of the group to control what Claude can reach
  • The sandbox boundary is the tab group — Claude cannot navigate to tabs outside the highlighted group
06/chrome command
  • Run /chrome inside Claude Code to confirm status: Enabled, Extension: Installed — reconnect if the extension disconnects between sessions
  • The /chrome command is the verification step — always confirm connection before starting a browser automation task
083 use cases overview
  • Three valid use cases: no-API analytics scraping, form-filling automation, visual page analysis
  • Honest limitation stated upfront: slow and background-only — not a tool for tasks where you need real-time speed
09Live demo 1 — Substack notes analytics
  • Prompt structure: tell Claude to use the Chrome extension and drop the URL — specificity about which tool to use prevents the agent from defaulting to a different approach
  • Do not touch the screen after submitting — uninterrupted browser control is required for the navigation to complete
10Parallel session demo
  • Open a second terminal and launch a second Claude instance while the first runs the browser task — parallel sessions are the workflow that makes the speed limitation irrelevant
  • One agent handles the slow browser task; the other continues normal work — the background task pattern is the unlock
Glossary

Terms worth knowing.

Claude Chrome extension
An official browser extension from Anthropic that connects Claude Code directly to your Chrome browser, giving the AI the ability to read pages, interact with forms, and observe what you see without additional tools.
browser automation
Programmatically controlling a web browser to perform tasks like navigating pages, clicking buttons, reading content, and filling forms — commonly used to replace repetitive manual workflows.
MCP (Model Context Protocol)
An open standard that lets AI models connect to external tools and data sources through a unified interface — used before the Chrome extension existed to give Claude browser access.
/chrome command
A Claude Code slash command that activates the Chrome extension integration, allowing the AI to connect to and control your open browser tabs.
tab group
A Chrome browser feature that lets you organize multiple related tabs under a labeled, color-coded group — used here to scope which tabs Claude Code is allowed to access.
Tally
A no-code form builder that lets users create and publish web forms without writing code, integrated here via browser automation to build forms using Claude.
Substack analytics
Subscriber and engagement data provided by the Substack newsletter platform — accessible in the browser but not via a public API, making browser automation the only way to extract it programmatically.
co-writer
A Claude Code session configured with persistent context, skills, and instructions so it can function as an AI writing assistant that knows your voice, audience, and content.
Resources

Things they pointed at.

Quotables

Lines you could clip.

00:05
Your co-writer now gets eyes and now has direct access to your browser with this Chrome integration.
Tight value prop, complete thought, zero context neededTikTok hook↗ Tweet quote
07:06
Substack does not have an API. So it is very difficult to track all of your stats. You kinda have to do it manually.
Names a real pain point creators feel dailyIG reel cold open↗ Tweet quote
10:40
Do not touch the screen that it is working on. Claude is basically taking screenshots and navigating that way. So if you move the page, it is gonna get lost.
Unexpected UX rule that surprises first-time usersTikTok educational tip↗ Tweet quote
14:52
It is a background task tool, not a speed tool.
Perfect six-word quotable, honest, contrarian to hypenewsletter pull-quote↗ Tweet quote
The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy
00:00Anthropic 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?
00:15So in other words, your co writer now gets eyes and now has direct access to your browser with this Chrome integration. Alright? Now how this works is it's getting direct browser control now.
00:28We 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 if you wanted to give Claude code access to your browser. But now we can do this directly.
00:41It's a lot easier, 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, it would be you know, you would be using a couple different separate tools or just workflows.
00:56For 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.
01:20Right? Now to set this up, it's actually super simple. It's one of the easier things you can set up on Claude code.
01:26We're just gonna have to run a couple things. The first thing we're gonna do is go to claude.com/chrome, their official announcement page for this extension.
01:34And you're gonna see here that they talk about what you can do with it. 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, uh, interact with your Google Calendar or run background tasks and even schedule daily workflows right in your browser, uh, with this Claude agent, basically, this Claude browser agent.
01:56But 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.
02:12Okay? Now you're gonna click this, and what it's gonna open up here 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.
02:26This is called a tab group. Alright? And what this means is everything you see highlighted in this group here of tabs, this is what Claude is restricted to.
02:36This is where Claude is active. 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, these are not in the tab group.
02:51So 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.
03:03So it is now accessible by Claude in this tab group. Alright? And same thing, you can drag it out.
03:08So 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, this was already available. And this right here is basically have this has nothing to do with Claude code.
03:22This 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, you know, panel right inside of your browser.
03:37But that's not what we're gonna be using today, so we're gonna close that out. So now we're gonna talk about how to get it inside of your Claude code Claude code system or your co writer.
03:49And 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. 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.
04:06And it just makes everything a lot easier. I'm gonna minimize that for now because I don't need it. Fresh terminal without ClotCode, just the fresh terminal, and you're gonna need need to do a couple things first.
04:16The 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.
04:25You should be up to date with 2O0.73 at the time of this video, and we know we're good now. Now after that, you need to launch Claude in your terminal.
04:34So just by typing Claude, we have Claude launched. Let me zoom in a little bit here.
04:40And now we have Claude code running in our terminal, and we're gonna do slash chrome.
04:45When 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 from Claude code, navigate websites, fill forms, capture screenshots, record GIFs, and debug with console logs and network requests.
05:04Now you need to make sure that the status is enabled and the extension is installed. So to do that, you might have to first click this reconnect extension and it will enable everything.
05:15Now 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. And what you can see here is we have all of our, uh, Claude code Chrome extension permissions, right, or just cladding from settings.
05:33We can enable notifications, so it'll tell us when things are complete. We can also give it microphone access.
05:39And 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 into the dictation, and you can document this workflow for for Claude to understand. Understand.
05:53Alright? Alright? And then also you're gonna have your approved sites here.
05:56You can see I've already been working on, like, Tally and Substack and my own website. 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.
06:08Alright? And you're gonna see how that works. We can close those settings out for now.
06:13We 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?
06:20I'm gonna give you three examples. This is pretty new, and I've been trying out new things. You know, I do wanna mention that it doesn't work a 100% perfect.
06:29It's pretty slow, 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, 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.
06:46But 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.
06:59And the reason for that is because Substack doesn't have an API. So unlike these other platforms, you know, other newsletter platforms or other, uh, let's say, social media platforms like LinkedIn or X, uh, Substack doesn't have an API.
07:12So 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.
07:18But now what I can do is give Claude code or my co writer access to my substack to basically track all these analytics. So that's the first way I've been using it.
07:28The second way is I've been using it to fill out surveys. So on my own 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.
07:44So if you click here, you're gonna see I have a survey here, a cowriter application. And I literally used Claude code last night to my co writer to build this. So we planned it out inside of my in in my code editor with Claude code, and then I had it access and actually put together the application on Tally, which is just a a website for easily creating forms.
08:08Right? That's the second way I used it. And then the third way is, um, doing visual analysis.
08:14So 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 have an access, like, the HTML or take screenshots or or, you know, anything like that.
08:31So that that's a really good use case as well. You can analyze thumbnails, study competitor pages, debug your own sites.
08:38Right? 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.
08:47And the first thing I did, which you can see here, which I'm gonna re rerun here, is look at my Substack notes. So here on Substack, we have my Substack notes for people who aren't familiar with Substack.
09:00It'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.
09:11So now what I'm gonna do is tell it to, you know, review all of that and 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.
09:26And 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.
09:47Use your Chrome extension to do this. 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, and start doing the work there.
10:03So we're gonna see what it does. First, it reads my context profiles in my system, and then there it goes, opening up the new tab that you can see here, and it's gonna start navigating all by itself.
10:15Right? 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.
10:24Right? 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.
10:40So 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.
10:50Don'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.
11:05So 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, we can open up another terminal, and we'll we'll we'll launch Cloud, and I can literally do multiple things at once now.
11:20So now while this is running, what I wanna do is I wanna come look at my landing page, alright, for my cowriting custom systems here, which you're looking at here.
11:32And 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. And if I'm missing any, you know, important aspects of my system that are not being, uh, shown on this landing page.
11:56So on my landing page here, we have your own AI co writer built for your business, apply now. We have the pricing or the the features breakdown, some of this other stuff, which side note, this landing page I built with my Claude code as well.
12:11So 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 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.
12:35We're gonna tell it use your Chrome extension. Always make sure to tell it to use your Chrome extension and then drop the link as well.
12:44And 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.
12:59So 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. So the first thing I asked you to do, like you saw, was analyze my sub stack notes, and you can see after I completed it here on the right, what we got was an entire breakdown of my sub stack notes, my last 10 notes.
13:25I have the when it was published, the likes, the comments, the restacks. I have a breakdown of what's working, what's not working, you know, patterns to double down on, patterns to avoid.
13:37And 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, what we got was let's take a look.
13:56Scrolling down. This is how long it takes. These are all screenshots and actions it's doing in the browser.
14:02And 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, but we can see some opportunities here, like I'm missing price, which was purposeful, so that's okay.
14:16But what I am missing is testimonials and social proof. We're missing specific outcomes, urgency, and some other things there.
14:24So there, it's gonna help us analyze landing pages. 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.
14:37This 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, and delegate those to Claude Chrome, you know, or use it as a visual analysis tool or to help you basically do things where maybe an API is not available or there are no available tools, for example, Substack Analytics.
15:09Alright? So go try it out now. Test it out.
15:12If you haven't checked out my quad code masterclass for building your AI co writer, check that out as well because this just always every new thing that comes out just builds on top of your co writing system and supercharges it.
15:25Drop 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.
The Hook

The bait, then the rug-pull.

Three words on a dark slide — Your Co-Writer Gets Eyes — and the entire value prop is delivered before Alex says a word. The spoken hook lands the payload: Claude Code now has direct browser access, no MCP workarounds, no manual screenshotting. A capability unlock framed as a persona upgrade.

Frameworks

Named ideas worth stealing.

02:10concept

Tab Group Sandboxing

Claude Chrome only accesses tabs in the orange-highlighted group. Drag in to grant, drag out to revoke. Sandboxed per session.

Steal forAny product explaining permission scoping to non-technical users
14:52concept

Background Task vs Speed Tool

Browser automation is a background delegation tool for no-API tasks. Not suited for real-time or complex multi-step flows.

Steal forHonest positioning for any AI automation product
09:27model

Prompt Formula for Chrome Tasks

  1. Tell it to use the Chrome extension explicitly
  2. Drop the direct URL
  3. State the exact output you want
  4. Do not touch the browser while it works

Four-part prompt pattern that makes Chrome-based Claude tasks reliable.

Steal forAny tutorial on AI browser agents
06:07list

No-API Automation Use Cases

  1. Scraping analytics from walled-garden platforms (Substack)
  2. Filling out forms (Tally, Typeform)
  3. Visual analysis of pages without needing HTML access

Three categories where browser-based Claude automation wins because the APIs do not exist.

Steal forMCN/JoeFlow — any feature pitch for dashboards or forms that lack API access
CTA Breakdown

How they asked for the click.

VERBAL ASK
15:14product
If you have not checked out my Claude Code masterclass for building your AI co writer, check that out as well because every new thing that comes out just builds on top of your co writing system and supercharges it.

Soft, organic — positioned as additive context not a hard sell. Framed as the system this feature plugs into.

FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

open
hookopen00:00
what it does
promisewhat it does00:24
install
valueinstall01:21
two steps
valuetwo steps03:40
/chrome command
value/chrome command04:29
use cases
valueuse cases06:07
live demo 1
valuelive demo 108:47
parallel sessions
valueparallel sessions11:13
honest limits
valuehonest limits14:52
try it now / CTA
ctatry it now / CTA15:14
Frame Gallery

Visual moments.

Chat about this