01 / 15

A workshop · Maryville College

Vibe Code Live

Walk in with a laptop.
Walk out with a Chrome extension built by you.

Browse resources

This site was built with vibe coding

Scan to follow along QR code linking to vibe.bardsec.com

vibe.bardsec.com

About the presenter

Andy Lombardo

K12 Tech Director · SupportStudioK12 Founder · Security Awareness Content Creator. I publish at these sites — pick whichever matches your interest.

02 / 16

What's possible

What can you actually build with this?

Anything you can describe in plain English — for yourself, for your team, for your day job. Before we narrow in on Chrome extensions, two quick stops to show what "a tool you'd actually use" can look like.

↪ Two quick demos. Exiting presentation — we'll come right back.

03 / 16

Today's medium

Why Chrome extensions?

Because I want you to ship something real before lunch — not fight tooling.

The case

i
No hosting. Your extension runs from a folder on your laptop. No server, no domain, no DNS.
ii
No build step. No CI/CD. No Webpack, no Vite, no GitHub Actions. Save the file, reload the extension, see the change.
iii
Predictable structure. Manifest, service worker, content script, popup. Four files, every time. The AI knows the shape.
iv
Working tool in 60 seconds. From "load unpacked" to icon-in-toolbar is faster than any other software target.

Five I've shipped

TempPad productivity

A clean in-browser notepad. Nothing persists when you close the tab — on purpose.
FilterTrace it · networking

Real-time monitor of every background request a website makes. Built for IT pros chasing content-filter issues.
WebLoad Troubleshooter devtools

A DevTools panel that surfaces blocked requests, CSP violations, and JS errors when a page won't load right.
RecordKeeper dns · email auth

Instant DNS records for any site you visit, with email authentication records (SPF/DKIM/DMARC) front and center.
TerminalTab power user

A side-panel xterm.js terminal that pipes the active tab's URL, title, and cookies into a real PTY shell on macOS.

↪ Let me show you. Exiting presentation for a quick demo.

02 / 15

The premise

What if you could build software by describing what you want?

Not by learning syntax. Not by hunting through Stack Overflow. By telling a chatbot what the thing should do — and watching it appear.

03 / 15

The itch

Have you ever wished…

I want to see the reading level of any article — Lexile, Flesch-Kincaid — so I can match it to my students.

ii.

I want a button that strips the ads and sidebars before I project a webpage on the smartboard.

iii.

I want a privacy meter showing what data each EdTech tool sends back to its company.

iv.

I want a popup that converts citations between APA, MLA, and Chicago as I read.

I want a one-click reading mode that respects dyslexia-friendly fonts and spacing.

vi.

I want a button that generates discussion questions from any article I'm reading.

04 / 15

The shift

~~We're going to Google how to do this.~~

We're going to describe it.

05 / 16

Show, don't tell

Let me actually do it — start to finish.

Before we get into the definition, here's what we're building toward: a working Chrome extension, prompt to icon-in-toolbar, in one continuous shot.

What you're about to watch

i
Describe it. A few sentences to the chatbot — what the extension should do, what page it runs on, how it looks.
ii
Save the files. The chatbot writes the manifest and the scripts. We drop them into a folder.
iii
Load unpacked. chrome://extensions → Developer mode on → Load unpacked → pick the folder.
iv
Icon in the toolbar. Working tool, running in our own browser, a few minutes after the first prompt.

↪ Exiting presentation. Watch the chat. Watch Chrome.

06 / 16

Definition

Vibe coding is not magic.

It's a precise stack of four things working together.

i
Prompt engineering Describing intent in language the model can act on.
ii
Iterative debugging Running, breaking, telling the model what broke, repeating.
iii
Architectural delegation Letting the AI decide how the pieces fit together.
iv
Assisted scaffolding Boilerplate, file layouts, configs — the tedious parts.

06 / 15

Division of labor

Who does what?

The AI is your scaffolder. You are the architect.

The AI generates

The boilerplate, the wiring, the configs.

Boilerplate code
API wiring
manifest.json files
File structure & layout
Repetitive patterns

You define

The intent, the behavior, the line in the sand.

What it should do
What "correct" looks like
What's in scope, what isn't
Whether the output actually works
What's safe to ship

07 / 15

Anatomy

The four files that make a Chrome extension.

Five minutes here prevents an hour of confusion later.

my-extension/

my-extension/ manifest.json — identity card background.js — service worker content.js — page interactor popup.html — the UI popup.js — popup logic icons/ icon-16.png icon-48.png icon-128.png

manifest.json

The identity card.

Declares the extension's name, version, what permissions it needs, and which files do what. Manifest V3 is the only flavor Chrome accepts now — if your AI generates Manifest V2, push back.

background.js

The service worker.

Runs invisibly in the background. Handles events that aren't tied to a specific page — clicks on the extension icon, alarms, fetches to external APIs.

content.js

The page interactor.

Injected into the actual web pages you visit. Reads the DOM, modifies elements, highlights text. This is where most "do something to the current page" features live.

popup.html + popup.js

The UI.

The little window that opens when you click your extension's icon in the toolbar. Just HTML, CSS, and JS — like a tiny webpage.

08 / 15

The build

Four moves, in order.

This sequence won't implode mid-session. We'll do each one together.

Describe the extension clearly.

One paragraph. What it does, what page it operates on, what the user sees. We'll use a template prompt — coming up next.

~3 min

Ask the LLM for the full file structure.

Have it name files, output complete code blocks for each, and tell you where each file goes. Demand specificity.

~5 min

Copy the code into folders.

This is where workshops derail. Slow down. Make the folder. Save each file with the correct name. Don't trust autocorrect with file extensions.

~10 min

Load the unpacked extension in Chrome.

chrome://extensions → toggle Developer Mode → "Load unpacked" → pick your folder. The moment your icon appears in the toolbar is the dopamine hit.

~2 min

09 / 15

Move 01 · Your starting prompt

The template you'll actually use.

Clarity beats verbosity. Replace the bracketed parts and send.

prompt.txt

# Vibe-coded Chrome extension — starter prompt

Build a minimal Chrome extension using Manifest V3 that
[describe what the extension does in one sentence].

The extension should:
  • [behavior 1 — when does it activate?]
  • [behavior 2 — what does the user see?]
  • [behavior 3 — what data does it touch?]

For your output, give me:
  1. The complete file structure (folder + filenames).
  2. The full code for every file, in separate code blocks.
  3. A note next to each file explaining where it goes.
  4. The exact permissions needed in manifest.json, and why.
  5. Step-by-step instructions to load it in Chrome.

Use only Manifest V3 APIs. Do not reference deprecated APIs.
Keep external dependencies to zero.

Copy this. Fill in the brackets. Send. Then read what comes back like you'd review a junior engineer's PR.

10 / 15

Reality check

The AI will be confidently wrong.

This is normal. Pause and debug with the room. This is where the learning actually happens.

⚠

It generates Manifest V2 even though Chrome retired it.

"Use Manifest V3 only. Update the manifest_version and any deprecated APIs."
⚠

It references APIs that no longer exist.

Paste the exact console error back into chat. The model corrects itself remarkably fast.
⚠

It hallucinates permissions you don't actually need.

"Trim the permissions array to only what's strictly required for the behavior above."
⚠

Function names don't match across files (popup.js calls a function background.js doesn't expose).

"Audit message-passing between popup, content, and background. List every send/receive pair."
⚠

It silently drops your features when you ask for fixes.

Always test the full feature list after each round of changes. Don't trust the diff in your head.

11 / 15

Gravity

Extensions are powerful. Power requires care.

Before you load anything — especially something an AI just wrote — understand what you're letting into your browser.

Extensions can read and modify the content of every page they have access to.
They can quietly send the data they read to anywhere on the internet.
The "permissions" array in manifest.json is the contract. Read it.
An LLM might over-request permissions just to be safe. Trim aggressively.
AI-generated code must be reviewed before it touches your data.

We're not just teaching tool usage today. We're teaching responsibility.

12 / 15

The bigger shift

What we used to teach. What we teach now.

Before

syntax

Now

specification

Before

loops & variables

Now

constraint definition

Before

memorizing APIs

Now

iterative refinement

Before

writing code

Now

designing behavior

This isn't the death of programming. It's the elevation of programming.

13 / 15

Today's exercise

Build something useful. Build something ethical.

Good ideas

Productivity tools tab counters, focus timers, save-for-later
Research aids citation extractors, summary buttons
Bias detectors flag loaded language in news
Accessibility helpers font swappers, contrast boosters
Study companions flashcard generators, term highlighters

Steer clear

Anything that scrapes login sessions or cookies
Anything that bypasses paywalls or DRM
Tools that automate clicks on platforms that forbid it
Anything that reads private data without obvious consent
Manipulation of protected institutional systems

14 / 15

If you want to ship it

The Chrome Web Store, in five facts.

There's a one-time $5 developer registration fee.

paid to Google

A privacy policy is required for any extension that handles user data.

link in your listing

iii

Reviews typically take 1–3 days, sometimes longer for sensitive permissions.

be patient

You'll need icons at 16, 32, 48, 128 px. Sharp and on-brand.

PNG, transparent

Your listing needs at least one screenshot and a clear description of every permission you request.

don't be vague

15 / 15

End

If you can describe behavior clearly,
you can build software.

That sentence wasn't true for most of human history. It is now. Use the power well.

Resources & reference

Idea hub

Stuck for an idea?

Pick one from the menu of 30 below. If nothing clicks, scroll down and use a brainstorm prompt to think out loud with an LLM until something does.

§ 30 starting points

Each is one sentence on purpose — specific enough to start, vague enough to make your own.

Productivity

Tab Inventory — snapshot all open tabs to a saved list; restore a session later.
Focus Mute — one click hides YouTube comments, recommendations, and the autoplay sidebar.
Doom-Scroll Timer — track minutes spent on chosen sites today; warn at a daily limit.
Reading Queue — save articles to a popup list with one click; mark read; clear weekly.
Pomodoro Overlay — a 25-minute countdown floating over any tab.

Reading & writing

Reading Level — show the Lexile or Flesch-Kincaid score of the current article.
Article TLDR — generate a three-bullet summary of the page via an LLM API.
Citation Converter — toggle a selected reference between APA, MLA, and Chicago.
Passive Voice Highlighter — mark passive-voice sentences in any article.
Selection Stats — highlight text and see word count, reading time, and avg. sentence length.

Research & source evaluation

Publication Date Reveal — surface the article's actual publish date when it's hidden.
Author Lookup — show a quick panel with the author's bio and other recent work.
Source Triangulator — compare claims in the article against three other sources.
Loaded Language Detector — flag emotionally-charged words for media literacy lessons.
Quote Origin — highlight a quoted passage and search for its original source.

Accessibility

Reader-Mode Plus — strip the page to clean text in a dyslexia-friendly font.
Contrast Booster — cycle through high-contrast color schemes with one click.
Read Aloud — have the browser speak any selected text using the Web Speech API.
Big-Cursor for Screenshare — enlarge the cursor and add a click ripple for projection.

Privacy & student safety

Tracker Counter — badge shows how many third-party trackers loaded on the current page.
Permission Inspector — reveal what permissions this page has (camera, mic, location).
Data Flow Map — visualize what domains the page sent data to.
Form Domain Warning — alert before submitting a form to a third-party domain.

Classroom & teaching

Smartboard Strip — one click removes ads, sidebars, and comments for projection.
LMS Paywall Flag — mark links in your LMS that lead behind paywalls.
Discussion Generator — generate five discussion questions from the current article.
Anonymized Browser — hide history, bookmarks, and profile name during screenshare.
Citation Capture — one-click save a formatted citation with URL and access date.

§ Brainstorm with AI

Three prompts to get unstuck. Copy any of them and paste into Claude or ChatGPT — fill in the placeholders, and it'll pitch you ideas.

brainstorm-A.txt — start from your daily friction

I'm a [YOUR ROLE — e.g., "middle-school English teacher"] who uses
Chrome about [N] hours a day.

Here are three small frustrations I have with how websites work for me:

  1. [frustration #1]
  2. [frustration #2]
  3. [frustration #3]

Suggest five Chrome extension ideas — one short paragraph each — that
would solve any of these. Constraints: Manifest V3 APIs only, no
external services or paid APIs. Rank them from easiest to hardest
to build.

brainstorm-B.txt — turn a repeated task into an extension

I keep doing this manual task in my browser every day or week:

[Describe the task — be specific. Example: "I open three news sites,
scan headlines, copy the ones I want to assign into a Google Doc
with the date, source, and a brief note about why I'd assign it."]

Could a Chrome extension automate or streamline this? Before you
suggest a solution, ask me three clarifying questions about what
makes the current process annoying or where the friction really is.

brainstorm-C.txt — what I wish webpages told me

Generate 10 "I wish this webpage would tell me X" wishes that
[DESCRIBE YOURSELF — e.g., "a high-school history teacher researching
primary sources"] would realistically have while reading articles
online.

For each wish, sketch a one-sentence Chrome extension that would
deliver it. Mark the three you'd build first if you were me, and
explain why those three.

A tip when the LLM responds with five ideas you don't love: pick the closest one and reply "go deeper on #3 — what would it take to build, and what would it look like in 30 seconds of use?" The good idea usually shows up on the second turn.

For after the workshop

Take this with you.

Bookmark this page. Everything you need to keep going is here.

§ Prompts you can copy

starter-prompt.txt — the workshop template

Build a minimal Chrome extension using Manifest V3 that [DESCRIBE WHAT IT DOES].

The extension should:
  • [behavior 1]
  • [behavior 2]
  • [behavior 3]

Output:
  1. Complete file structure (folder + filenames).
  2. Full code for every file, in separate code blocks.
  3. Note next to each file explaining where it goes.
  4. Exact permissions needed in manifest.json, and why.
  5. Step-by-step instructions to load it in Chrome.

Use only Manifest V3 APIs. Do not reference deprecated APIs.
Keep external dependencies to zero.

debug-prompt.txt — when something breaks

My extension is throwing this error when I [WHAT YOU DID]:

[PASTE THE EXACT CONSOLE ERROR]

Here is the relevant file:

[PASTE THE FILE]

Don't rewrite everything. Identify the specific cause and give me
a minimal patch — show me only the lines that need to change and
where in the file they go.

review-prompt.txt — security & permissions audit

Review this manifest.json and tell me:

  1. Which permissions are actually needed for the listed features.
  2. Which permissions are over-broad and could be tightened.
  3. Whether host_permissions could be replaced with activeTab.
  4. Any privacy or security concerns you'd raise in a code review.

[PASTE manifest.json]

§ Official documentation

docs

Chrome Extensions: Get Started

Google's official walkthrough — manifest, structure, permissions, the whole vocabulary.

developer.chrome.com →

reference

Manifest V3 Reference

The full schema. Bookmark this — you'll come back to it every time the AI invents a property that doesn't exist.

manifest reference →

samples

Official Sample Extensions

Real, working, MV3-compliant extensions you can study and steal patterns from. Cleaner than most AI output.

github / samples →

publishing

Chrome Web Store Dashboard

Where you submit your extension when it's ready for the world. The $5 fee lives here.

developer dashboard →

policy

Web Store Program Policies

Read this before publishing. The rules around permissions, privacy, and disclosure are stricter than you think.

program policies →

debugging

Debug Extensions

How to inspect the popup, the service worker, and content scripts. Different DevTools for each — you'll need this.

debugging guide →

§ Glossary

manifest.json: The extension's identity card. Declares its name, version, permissions, and which files do what. Without a valid one, Chrome won't load the extension.
Manifest V3: The current schema for that identity card. Manifest V2 was retired in 2024. If your AI generates V2, push back and ask for V3.
service worker: A background script that runs without a UI, handling events that aren't tied to a specific page. Sleeps when idle.
content script: JavaScript that gets injected into the actual web pages you visit. Reads and modifies the DOM. This is where most "do something to this page" features live.
popup: The little window that appears when you click your extension's toolbar icon. Just HTML, CSS, and JS — like a tiny webpage.
permissions: Powers your extension is asking for — reading active tabs, accessing storage, talking to specific domains. Granted at install time. Always the smallest set possible.
activeTab: A narrow permission that gives temporary access to the current tab only when the user clicks your extension. Almost always preferable to broad host permissions.
load unpacked: Loading an extension from a folder on your computer instead of from the Web Store. Requires Developer Mode. How you'll test everything you build today.

When things break

Troubleshooting.

The most common ways your extension will refuse to load — and how to fix each.

"Manifest file is missing or unreadable"

You're loading the wrong folder. The folder you pick must contain manifest.json at its top level — not one folder up, not one folder down. Open the folder in Finder/Explorer and confirm manifest.json is right there before clicking Load Unpacked.

"Manifest version 2 is deprecated"

Your AI gave you Manifest V2. Open manifest.json and look for "manifest_version": 2. Send the file back to the chatbot and say: "Convert this to Manifest V3. Replace background.scripts with a service worker, replace browser_action with action, and update any deprecated APIs."

The extension loads but nothing happens when I click it

Open chrome://extensions, find your extension, click the "Errors" button. Then right-click the extension icon → Inspect popup, and check the Console there. The error is almost always a typo'd function name or a missing permission.

"Cannot read property 'X' of undefined" in the popup

Your popup is trying to talk to a page or background script that hasn't loaded the function yet. Paste the full error into the chatbot along with both files. Ask it to "audit message-passing between popup and the content/background script — list every send/receive pair and confirm names match."

The content script doesn't run on the page I want

Check the matches array in your manifest.json. URL patterns are picky — https://example.com/* matches every page on that site, but https://example.com matches only the homepage. After editing the manifest, click the reload icon on your extension card before testing.

I edited a file but nothing changed in Chrome

Go back to chrome://extensions and click the circular reload icon on your extension's card. Editing files doesn't auto-reload the extension — you have to tell Chrome to pick up the changes.

"Service worker registration failed" or "Status code 15"

There's a syntax error in your background.js or the file path in manifest.json is wrong. Open chrome://extensions, click "Errors" on your card — the exact line number is there. Paste it back into the chatbot.

I want to undo and start over

Delete the extension from chrome://extensions (it doesn't delete your files). Delete the folder if you want a clean slate. Open a new chat with the LLM — long conversations accumulate confusion. Start from the template prompt above.

Colophon

About this site.

This whole thing is the workshop's premise, demonstrated.

Every word of this site — the structure, the typography, the keyboard navigation, the copy buttons, the troubleshooting accordion — was produced by describing what I wanted to a chatbot and iterating. No template. No framework. No build step.

The same approach you'll use today to build a Chrome extension built this. That's the point.

type Fraunces · IBM Plex Sans · IBM Plex Mono
palette warm-black, paper-cream, signal orange, electric chartreuse
stack one HTML file, no dependencies, no build step
presentation mode press F from any section