Build Your Own Chrome Extension
A website blocker and focus timer — described into existence, with no code to write or read.
Kevin Lenida
Welcome. Set expectations immediately: by the end of this session there will be a real extension installed in your Chrome, blocking real websites. Not a mockup, not a tutorial you will do later — a working thing. You will not write or read a single line of code.
You sit down to work. Forty minutes later you are on Instagram and you do not remember how you got there.
Ask for a show of hands. Everyone has this problem. The point: this is not a discipline failure, it is a design failure — the browser makes distraction one keystroke away and makes focus need willpower. We are going to flip that. Do not rush this slide; the pain is the motivation for the next 55 minutes.
Today's build
Two features, one extension
A website blocker — you keep a list; those sites simply do not open.Your own blocked screen — not an error, a reminder of your real task.A focus timer — pick 25, 50 or 90 minutes; the block runs until the time ends.Yours only — it lives in your browser, your list never leaves your machine.
Walk through each quickly. Emphasise the last one — this is not a service, there is no account, no subscription, no company that can shut it down or start charging. That is the quiet superpower of building your own tools.
A Chrome extension is just a folder of files you tell Chrome about.
THE takeaway of the session. If they forget everything else, this is what should survive. Say it slowly. Most people imagine an extension is some compiled, signed, app-store-blessed artifact made by a company. It is a folder. You can open it in Finder. You can rename it. Chrome just needs to be pointed at it.
Outcomes
What you will walk out able to do
Judge an idea — tell whether a thing you want is buildable as an extension.Build and install one — it runs in your own Chrome, today.Fix it when it breaks — because the first try will not be right.Decide: publish or not — know exactly what the Web Store asks of you.
Point at number three specifically. The first try will not be perfect — that is normal and expected, not a sign you did something wrong. The skill being taught here is not "get it right first time", it is "know what to say next". Most beginners quit at exactly this point, which is why it is a stated outcome rather than a footnote.
The prompt
This is the entire request
You
Build me a Chrome extension called Focus Guard. Start it with the usual time sinks already blocked — Facebook, X, Instagram, Reddit — and let me edit the list. I run focus sessions of 25, 50 or 90 minutes; opening a blocked site takes me to my own page that talks me out of it, not an error. If I insist, make me work for it: ten steps, each slower than the last. Quitting early must cost more.
Build me a Chrome extension called Focus Guard.
It blocks a list of websites I waste time on. Ship it with that list already filled in with the usual time sinks — Facebook, X, Instagram, LinkedIn, Reddit, YouTube, TikTok — so it is useful the moment I install it, and let me add or remove sites from there.
I start a focus session — 25, 50 or 90 minutes, or a number I type in. Remember whichever length I picked last time. Show me the countdown in a small popup, along with how much focus time I have done today.
While a session is running, trying to open one of those sites should not show me a browser error. Take me to my own full-screen page instead: near-black, with one large sentence talking me out of it.
If I insist on going through, make me work for it. Ten steps, each one waiting a little longer than the step before, so getting in takes about a minute of sitting there. The messages should escalate as I go — gentle at first, then blunt, then giving up on me. Write them with care; the words are the whole point.
If I make it all the way through, give me five minutes on that site and then block it again. When those five minutes run out, any tab I left sitting on that site should go back to the blocked page too.
Quitting the session early should be the hardest thing in the whole extension. It must always cost me more than pushing through a single blocked site — if quitting were cheaper, I'd just quit every time and never see the blocked screens at all. So make quitting its own longer run of steps, roughly twice as long, and have it argue with me about the promise I made when I started rather than about any particular website.
A few things that matter to me:
- Blocking reddit.com should also block old.reddit.com, but never something like notreddit.com.
- Remember my list after I close the browser, including anything I have added or removed.
- The countdown has to stay right even if I close the popup, or quit and reopen Chrome. Do not assume the extension stays awake.
- When a session ends, tell me — but never start a new one on its own. I should always have to click.
- If anything ever goes wrong, unblock everything rather than leave me stuck. Never trap me.
- No streaks, badges or scores. A broken streak just makes me feel worse.
Copy the full prompt
This is the short version, sized to be readable from the back of the room. The full prompt you actually paste is longer and lives in prompts.md beside the deck — same language, more detail. The teaching point is what neither version contains: no file names, no APIs, no code words. It describes the experience wanted, not the implementation. Every single line is something a non-programmer can judge for themselves.IF BUILDING LIVE: paste it, hit enter, then deliberately turn away from the screen and say out loud that watching it is the least useful thing we could do with the next few minutes — the following slides are designed to fill exactly that wait. Invite students building along to paste it too.
Notice what that prompt did not contain: no file names, no code words, no instructions on how.
The pivot into the concept section. Reread the prompt from the previous slide if it helps — it names a feeling ("takes me to my own blocked page instead of the normal Chrome error") rather than a mechanism. That is the entire skill. IF BUILDING LIVE: the build is running now, and the next eleven slides are sized to cover the wait. Glance back at the screen occasionally so students see that checking in is normal, but do not narrate it.
01
What an extension actually is
Enough to judge your own ideas — and no more than that.
The idea
A small program Chrome runs for you
It lives inside Chrome — not on a website, not on a server.It can watch and change pages as you browse them.It can ask Chrome for favours — block this, notify me, remember that.It only gets what you grant — it declares every power up front.
The mental model that matters: an extension is a guest living inside your browser with a specific, written-down set of permissions. That last bullet is why the permission list on the install screen matters, and it is what the Web Store reviewers spend most of their attention on later. Foreshadow that.
The idea
Where your extension sits
Both boxes live inside Chrome — that is the whole point of the dashed border. Your extension is not a website and it is not on the internet; it sits beside the pages, with a channel to them. This is why an extension can do things a website could never do to another website, and also why Chrome is careful about what it allows.
The idea
Good extension ideas vs. bad ones
Fits an extension
Change how sites look or behave
Block, hide, or redirect
Saving things from pages you visit
A button that acts on the current tab
Wants to be something else
Anything that must run while Chrome is shut
Share data between many people
Heavy number work
Anything outside the browser entirely
This is outcome one — judging your own ideas. The dividing line is simple: if it only makes sense while you are looking at a browser, it is an extension. If it needs to keep working at 3am with your laptop closed, it is a web app or a service and the extension is at most a front door to it. Invite one or two ideas from the room and sort them live if there is time.
02
Inside the folder
The four kinds of file that one prompt turns into.
Inside the folder
Four kinds of file, that is all
FOCUS-GUARD /
manifest
the ID card
rules
what to block
blocked page
what you see
instead
popup
your list and
the timer
Say plainly: you will never open any of these. This slide exists so that when the AI says "I have updated the manifest" you know what it is talking about and can nod instead of panicking. Only the manifest is mandatory — everything else depends on what the extension does. A folder with just a manifest is a valid, installable, completely useless extension.
Inside the folder
The manifest is the ID card
Name, description, icon — what shows in Chrome and in the store.Version number — how Chrome knows an update is an update.Permissions — every power the extension is asking for.Which file does what — where the popup and the rules live.
The manifest is the one file Chrome reads first, every time. If it is malformed, nothing loads at all — and that turns out to be the single most common reason a first try fails to install. Worth remembering when we get to debugging: "it will not load at all" almost always means the ID card, not the features.
Manifest V3 is not the new version. As of 2026 it is the only version.
Manifest V3 is simply the current rulebook for what extensions may do. The claim on this slide is concrete, not rhetorical: Chrome finished disabling Manifest V2 extensions in July 2025, with Chrome 138, and users cannot turn them back on. Even the enterprise policy that granted an extension ran out. Why this matters to a non-programmer: a lot of tutorials and blog posts still describe the old way, and if the AI copies an old pattern the extension silently will not work. Our prompt never mentions it, and does not need to — any current AI agent defaults to V3 on its own. But if you ever inherit a half-finished project or the build comes out strangely, "make sure this is Manifest V3" is a cheap thing to say.
Inside the folder
Permissions — what you are asking for
Chrome makes you declare them in advance, in writing.Users see them on the install screen, before you agree.Reviewers check them against what your extension actually does.Ask for less — every extra permission costs you trust and review time.
Our blocker needs permission to block requests and to remember a list. It does not need to read the contents of your pages, and should not ask to. Tell students to make "and only ask for the permissions it genuinely needs" a standing line in their prompts — it is one of the few things that measurably speeds up store review later.
The blocker
How the block actually happens
The important detail: Chrome does the blocking, not your extension. Your extension hands Chrome a list of rules and steps out of the way. This is a deliberate design of Manifest V3 — it means your extension never sees your browsing history, which is exactly why it can be trusted with this power. Say that out loud; it is reassuring and it is true.
The blocker
Why we asked for our own blocked page
Just block it
Chrome's generic error page
Looks like your internet is broken
Tells you nothing
Easy to assume it is a bug
Send it somewhere
A page you designed
Says why you are seeing it
Can show your timer
Reads as a choice, not a fault
The single most valuable design detail in the build, and it came from one clause in the prompt: "takes me to my own blocked page instead of the normal Chrome error." The framing that lands best: Chrome's version does not look worse — it SAYS THE WRONG THING. It reads as "something is broken" when the truth is "you chose this", so a user reasonably concludes the extension is buggy and switches it off. Note too that for a blocker this page is the only user-facing moment there is; everything else is invisible. So this is not polish, it is the feature. The lesson generalises: AI builds the default unless you describe what you want to SEE, and defaults are often technically correct and emotionally wrong.The honest tradeoff — say it, do not put it on a slide: Chrome grants extensions implicit permission to block, but redirecting is not part of that implicit grant — so a redirecting blocker asks for broader access to the sites on your list than a plain one. Nicer experience, scarier install screen, more for reviewers to scrutinise. This is the "ask for less" advice from the permissions slide turning into a judgment call rather than a rule: here you spend a permission on purpose, because the experience is worth it. Ties forward to review times in the publishing section.Two things the room will notice: the address bar shows a chrome-extension:// URL on the blocked page — that is just your own page, in your own folder, being served by Chrome; nothing is wrong. And the address they tried to visit can be handed to that page, so it can say "you tried to open instagram.com" instead of something generic — one more clause in the prompt if you want the demo to land harder.
03
Load it into Chrome
The moment it stops being a folder and starts being an extension.
Developer mode
Four steps, about thirty seconds
Open chrome://extensions in a new tab.Turn on Developer mode — the switch in the top right corner.Click Load unpacked and choose your extension's folder.Pin it to the toolbar so you can actually find it.
Show this on screen — it is four clicks and much clearer shown than described. Two things students always trip on: pick the folder that CONTAINS the manifest, not the folder above it — and if the AI reached for build tooling, that is a freshly generated folder inside the project, often called dist, rather than the one you have open in your editor. Still just a folder of files, just not the one you would guess. Second, "Developer mode" sounds alarming but only means "let me install things I made myself" — it grants nothing to anyone else. Chrome may show a warning banner about developer-mode extensions; that is expected and harmless. Also mention: it stays installed after you close Chrome. It is a real installation.
developer.chrome.com/docs/extensions/get-started
You extend software by asking for the next version — not by a restart.
Worth pausing on. Beginners treat each build as precious and each change as risk, so they hoard every requirement into one giant prompt and get a tangled result. The better instinct is the opposite: get something small working, then ask for one more thing, repeatedly. Each round is small enough to check, and a mistake only ever costs you one round. Do not just assert this — promise it: tell them the last slide of the session is where they pick the next thing and you build it in front of them. Then actually do it.
04
When it does not work
It will not, at some point. That is the job, not a setback.
How To Debug
Check these before you panic
Did you reload the extension? Changes need the reload icon clicked.Did you reload the page? Tabs already open keep the old behaviour.Is it switched on? Check the toggle on the extensions page.Right folder? Load the one with the manifest, nothing above it.
Genuinely most "it is broken" moments are the first two. Chrome does not watch your folder for changes — it loaded a snapshot and it keeps using it until you tell it otherwise. Make students say it back: change something, click reload, refresh the tab. Build the reflex now and you save them an hour of confusion later.
How To Debug
Where the error messages hide
A red "Errors" button on the extension's card — look here first."Inspect views" — where background and timer errors show up.The popup has its own errors — right-click the popup, then Inspect.Copy the message, do not read it — paste it straight to your AI.One problem at a time — fix, reload, retest, repeat.
Reassure them: you are not expected to understand these messages. You are expected to find them and hand them over. That is the whole skill. The copy-do not-read bullet is worth repeating — students who describe an error in their own words get much worse results than students who paste the exact text, because the exact text carries the file and line the AI needs.A trap worth naming , because it hits exactly the feature we built: the timer lives in the part of the extension Chrome shuts down when idle, and opening DevTools through "Inspect views" KEEPS IT AWAKE. So a broken timer can look perfectly healthy the whole time you are watching it, and misbehave the moment you close the tools. Google's own docs call this out. If a student reports "it only breaks when I am not looking", they are not imagining it — that is the shape of this bug, and the fix is to tell the AI the countdown must survive the extension being shut down.
How To Debug
How to report a problem well
Vague
It is not working. Fix it.
Useful
I reloaded the extension and the page. Facebook is on my list but it still opens normally. YouTube does get blocked. The errors button shows nothing.
Read both out loud — the contrast does the teaching. The good version contains three things: what you already tried, what you expected versus what happened, and what still works. That last one is the most overlooked and the most valuable: "YouTube blocks but Facebook does not" narrows the problem enormously, because it rules out everything the two have in common.
05
Put it in the store
What it would take — we are not doing it today.
Publication
First, be honest about whether you need to
For yourself? You are already done. Developer mode is a real install.For a few people? Send them the folder and these four steps.For a known group? The store can list you unlisted, or invite-only.For strangers? That is when the Web Store earns its paperwork.Publication is a commitment — updates, support, policy changes.
Push back gently on the instinct to publish everything. Most personal tools should never be published — the store adds review delays, policy obligations and an audience you now owe support to, in exchange for distribution you may not want. Publish when strangers need to find it, not as a trophy.The store is not all-or-nothing , which surprises people. Unlisted means there is no public listing at all, but anyone who has the link can install. Private limits installs to people you name — individual Google accounts, or a Google Group you manage — and is what you would use for testing before a launch. Two catches worth saying out loud: every visibility setting goes through the same review and the same policy requirements, so unlisted is not a shortcut past the paperwork, and all of them still need the paid developer account.
Publication
The account and the package
A one-time $5 developer fee — not for each extension, not a subscription.Up to 20 extensions under that single account.A checked email and a publisher name shown on every listing.A zip of your folder — with the manifest at the top level.
The fee exists to make bulk spam accounts costly; it is charged once, ever. The manifest-at-the-top-level rule catches people constantly: zipping the folder itself rather than its contents produces a rejected upload. Also worth knowing — some manifest details cannot be edited from the dashboard afterwards, so it is worth getting the name right before the first upload.Two things that bite later: the developer email cannot be changed once the account exists, so choose it deliberately rather than using whatever you happen to be signed in as — this is the single most annoying irreversible decision in the whole process. And the twenty-extension cap is not absolute; you can request an increase if you ever hit it, and themes do not count toward it at all.
developer.chrome.com/docs/webstore/register
Publication
The listing assets they need
An icon at 128 by 128 pixels.One to five screenshots at 1280 by 800, or 640 by 400.A small promo tile at 440 by 280 — a large one is optional.A 132-character description — the same one from your manifest.A category and language so people can find it.
These are the exact specifications as published by Google — worth a photo of this slide for anyone who gets serious. Tell them the good news: your AI can generate the icon and the promo tiles, and can write the descriptions from a paragraph about what the extension does. None of this is a reason to stop.Four details worth knowing: screenshots must be full bleed — square corners, no padding. The icon file is 128 by 128, but for a square icon the artwork itself should sit at 96 by 96 with transparent space around it. The small promo tile is genuinely needed, and Google says extensions without one are listed AFTER extensions that have one. And the 132-character limit belongs to the description in your manifest — the same field from the ID card slide — which does double duty on chrome://extensions and in the store. The long store description is a separate dashboard field with no published limit.
developer.chrome.com/docs/webstore/images
Publication
Privacy, justification, and the wait
State a single purpose — narrow, and easy to understand.Justify every permission — one written reason each.Declare what data you collect and certify how you will use it.A privacy policy — needed, and it must match those declarations.Review usually takes days — or weeks, if you asked for a lot.
Google's wording is that most extensions are reviewed within a few days, but it can take up to a few weeks. What pushes you into weeks: broad host permissions, sensitive permissions, large amounts of code, being a brand-new developer, or big changes to an existing extension. Obfuscated code is disallowed outright because it slows validation. So "ask for less" from the permissions slide turns into something concrete here. If you are still pending after three weeks, Google's guidance is to contact developer support. Practical advice: plan launches with slack and never announce a date you do not control.The single-purpose rule is worth dwelling on — and our own extension is a good test case. A blocker plus a timer sounds like two things. It passes because the timer exists to drive the blocking: one purpose, "help me focus", with two parts. That is the test students should apply to their own ideas — can you say what it is for in one plain sentence without using the word "and"? If not, it is two extensions, and the store will treat it that way.
developer.chrome.com/docs/webstore/review-process
Recap
What just happened
An extension is a folder of files, and the manifest is its ID card.
You describe the experience you want — never the files, never the code.
Developer mode installs it for real, in about thirty seconds.
When it breaks: reload, find the message, paste it, fix one thing.
Publication is a choice with a price tag, not a requirement.
Mirror this against the four outcomes from the start of the session and name which line covers which. Then hand it back to the room: the extension they now have installed is theirs, it keeps working after they leave, and nobody can take it away or start charging for it.
Next versions
Things worth asking for next
A schedule — block automatically between 9 and 5 on weekdays.Separate lists — one for deep work, a looser one for admin.A record — how many times you tried, and which site wins.Breaks — five minutes open, then the block returns.The same list everywhere — laptop and desktop in sync.
THIS IS THE LIVE MOMENT you promised earlier. Ask the room which one they want, then paste it into the same conversation and let it build while you close out. Each of these is genuinely one prompt away, and doing it in front of them is what proves the iteration point rather than asserting it. The sync one is the most interesting to pick, because it is the one that quietly turns a private tool into something with a server, an account and a privacy policy — the cost is not the feature, it is everything the feature drags in.Be straight about the gauntlet if someone pushes on it: an extension can refuse to switch its own blocking off, but nothing can stop a found out person opening chrome://extensions and removing it outright. No extension can prevent that, and any product claiming otherwise is lying to you. That is the honest ceiling of this kind of tool — it is built to beat the absent-minded reflex to open a site, not to beat you when you have genuinely decided to quit. Which, for actual focus, is the part that matters.
Your turn
Before the next session
Use your blocker for a full work day — with a real list.
Write down the one thing that annoyed you about it.
Ask for that one thing, in the same conversation.
Bring it back — it works or it does not. Both are useful.
The point: you now live downstream of your own decisions about how your browser behaves. Most people never do.
Insist on the real list — a blocker with a fake list teaches nothing, because the annoyances only show up when it actually gets in your way. And insist that broken results come back too; a room that only brings successes learns half as much.
You changed how your own browser behaves.
Most people never do.
Last slide. Say the line, let the confetti land, then take questions. Click the slide to set it off again.
