What we're building
In this tutorial we'll build a working Chrome extension called "Page Quick Notes." It adds a sidebar to any webpage where you can take notes about what you're reading. Notes are saved to Chrome storage and persist across browser restarts. When you visit the same page again, your notes for that page reappear.
This is a real, useful extension. By the end of the tutorial you'll have it running locally and you'll know how to publish it to the Chrome Web Store.
What you'll need
- Chrome browser (any version from the last two years)
- PlugThis account — sign up free
- 10 minutes
- An idea of what you want to build (we provide one for this tutorial)
You don't need a code editor. You don't need Node.js. You don't need to read Chrome's extension documentation.
Step 1 — Open PlugThis and write the prompt
Sign in to PlugThis. In the chat input, paste this prompt exactly:
Build a Chrome extension called "Page Quick Notes." It should add a small sidebar tab on the right side of every webpage. When the user clicks the tab, a panel slides out with a textarea where they can type notes. Save notes to Chrome storage, keyed by the page URL. When the user visits the same URL again, automatically load the saved notes into the textarea. Add a small "Clear notes" button at the bottom of the panel. The sidebar tab should be 30px wide, positioned at the right edge of the screen, vertically centered, with a subtle shadow. The slide-out panel should be 300px wide. Permissions: storage, activeTab. Manifest V3.
Click submit. PlugThis starts generating.
Step 2 — Watch the build
PlugThis shows the files being created in real time. You'll see:
manifest.json— the extension config with permissions and content script declarationscontent.js— the script that injects the sidebar tab into every webpagecontent.css— the styles for the sidebarbackground.js— the service worker handling storage events- Icon files at 16×16, 48×48, 128×128
Total generation time: 60–90 seconds.
Step 3 — Download and install
When generation finishes, click "Download." You get a zip file. Extract it.
Open Chrome. Type chrome://extensions in the address bar. Toggle "Developer mode" in the top right. Click "Load unpacked." Select the folder you extracted.
The extension installs. Look at any open tab — you should see a small tab on the right edge of the screen. Click it. The notes panel slides out. Type something. Refresh the page. Your note is still there.
Step 4 — Test on different sites
Visit a different website. The sidebar tab is there too. Click it. Empty notes (because you haven't taken notes on this page yet). Type something. Visit yet another page. Empty again. Go back to the first page — your original notes are still there.
This is what storage-keyed-by-URL gives you. Each page gets its own notes that persist between visits.
Step 5 — Customize (optional)
Want to change something? Go back to PlugThis and describe the change.
Make the sidebar tab dark gray instead of light gray. Add a small character counter below the textarea. Change "Clear notes" to "Delete all notes for this page" with a confirmation dialog.
PlugThis updates the extension. Re-download the zip, re-extract, refresh the extension in chrome://extensions (click the circular refresh button on the card). Your changes are live.
Step 6 — Publish (optional)
Want others to use it? Publish to the Chrome Web Store.
- Visit Chrome Web Store Developer Dashboard
- Pay the one-time $5 fee
- Click "New item" and upload the zip
- Fill in the listing — description, screenshots, category, privacy info
- Submit for review
Reviews typically take 1–7 days. Once approved, your extension is live.
What you've learned
You've built a real Chrome extension that uses content scripts to inject UI into webpages, uses Chrome storage for persistent state keyed by URL, runs a service worker for storage events, and is fully Manifest V3 compliant.
You did this without writing code. The same approach scales to far more complex extensions.