Real Manifest V3 source, built from your brief

Chrome Extension Builder From Idea to Unpacked Build

Describe the browser job, the pages it may access, and what it should remember. Playcode can build the popup, manifest, permissions, and extension logic as real code you can inspect, load into Chrome, test, and download.

No credit card required · No coding needed

Quick answer

What does a Chrome extension builder create?

A Chrome extension builder turns a browser workflow into Manifest V3 source: the manifest, popup or page UI, permissions, scripts, local state, icons, and testable error states. With Playcode, you receive real downloadable code to inspect and load unpacked in Chrome. Store registration, policy disclosures, review, and final publishing remain your responsibility.

1.1M+users
26M+projects
Since 2016

Used by people at

Counts registered accounts using corporate email domains from the companies above. Playcode is a self-serve product, not a contracted vendor to these brands.

From Browser Job to a Testable Extension

Define access first, then build, load, and verify the real package

01

Describe One Browser Job

Name the user action, the page data it needs, the visible result, and what should be remembered. A useful first brief says what happens after the toolbar click and what must never leave the browser.

Include one ordinary page, one empty state, and one protected-page failure so the first version has a complete boundary.

Preview
AI Chat
Publish
I'm a realtor in Miami. I need a website to show my listings and get buyer leads.
4 Questions
2 / 4
What's the main style for your real estate site?
AModern & minimal with clean lines
BLuxury feel with large property photos
CProfessional & corporate
DI'll describe my own style below
Or type your own answer...
Skip
Next
Describe what you want to change...
Economy
Build Progress
4/6
✓
Site layout & navigation
3s
✓
Hero section with CTA
5s
✓
Property listings grid
8s
Building contact form...
About page & bio
Footer & SEO meta
miami-homes.playcode.io
Miami Dream Homes
Your trusted partner in Miami real estate
Search by neighborhood...
Featured Listings
NEW
$1,250,000
Coral Gables Villa
4 bd|3 ba|2,400 sqft
OPEN
$890,000
Brickell Condo
2 bd|2 ba|1,200 sqft
Get in Touch
02

Review Manifest and Permissions

Inspect the generated Manifest V3 file before loading it. Match every requested permission to a visible feature. For one-click page access, prefer temporary activeTab plus scripting instead of broad, persistent host access.

Keep storage only when the extension really remembers local state. Remove permissions that the source does not use.

03

Load the Source Unpacked

Open Chrome extensions, enable Developer mode, choose Load unpacked, and select the folder whose root contains manifest.json. Pin the action, open a normal HTTPS page, and exercise the popup with controlled data.

After manifest or script changes, reload the extension and reopen the target page when Chrome needs fresh injected code.

Your website is live!

https://
miami-homes.playcode.io
Site is secure - SSL certificate active
Or connect your domainmiami-dream-homes.com
Miami Dream Homes
Your trusted partner
Miami Dream Homes
Your trusted partner
What the build can include

The Files Behind a Useful Browser Tool

A complete first version includes behavior, boundaries, and a package you can inspect

01

Manifest V3 configuration

A manifest that names the extension, version, icons, action UI, and only the permissions the implemented workflow uses.

02

Popup or extension page UI

A focused interface for the user action, with loading, empty, success, and protected-page states instead of a happy-path-only mockup.

03

Temporary page access

Use activeTab and scripting when the feature should inspect only the page where the user explicitly invokes the extension.

04

Local browser state

Use chrome.storage only when the extension must remember settings or notes in the Chrome profile. Add a server only when the product truly needs shared data.

05

Downloadable source and ZIP

Inspect every file, load the source unpacked, and package the same tested files with manifest.json at the archive root.

06

Tests and failure handling

Exercise capture logic, invalid or protected pages, stored state, retries, console errors, and one manual toolbar smoke test before distribution.

A practical extension field guide

Build the Smallest Permission Set That Completes the Job

Treat the manifest as a security boundary, reproduce the toolbar flow, and package exactly what you tested.

Before you build

Prerequisites

  • A single-purpose extension brief

    Chrome Web Store policy and user trust both depend on one understandable purpose. A vague “access every page and automate everything” brief produces unnecessary permissions and unclear review evidence.

    Ready when: You can name the user gesture, exact page data read, visible result, stored fields, and prohibited behavior in five sentences.

  • Desktop Chrome and controlled fixture pages

    Load unpacked and toolbar testing happen in desktop Chrome. Controlled pages let you verify title, URL, selection, empty state, and protected-page behavior without exposing private browsing data.

    Ready when: Developer mode is available, and you have at least two ordinary HTTP or HTTPS fixture URLs plus a protected chrome:// page for the failure check.

  • A publishing owner, only if distributing publicly

    Chrome Web Store publication requires a developer account, one-time registration fee, 2-Step Verification, an accurate listing, privacy disclosures, and review. Those are external account and policy steps.

    Ready when: The owner can access the Developer Dashboard, receive review email, and maintain the listing and privacy information after launch.

Implementation sequence

Do, observe, verify
  1. 01
    Extension brief and manifest review

    Map each feature to a permission

    List the browser capabilities behind each visible feature. Use activeTab plus scripting for temporary access after a toolbar gesture, storage for real local state, and no host_permissions unless the feature truly needs persistent access to named sites.

    Expected result

    Every permission has a visible feature and a reason; removing an unused permission does not break the described job.

    Verify

    Search the source for each Chrome API and compare the calls with manifest.permissions and manifest.host_permissions.

  2. 02
    chrome://extensions

    Load and inspect the unpacked source

    Enable Developer mode, select Load unpacked, choose the folder containing manifest.json, and inspect the extension card for manifest errors. Pin its toolbar action and open a controlled ordinary web page.

    Expected result

    Chrome loads the extension without manifest errors, and the toolbar action opens the intended interface.

    Verify

    Confirm the extension card shows the expected name and version, then open the popup on the first fixture page and compare every displayed value with the page.

  3. 03
    Fixture pages and extension popup

    Verify capture and persistent state

    Invoke the toolbar action on two controlled pages, save different notes, reopen each page, and confirm the correct local note returns. Exercise an empty selection and a protected chrome:// page.

    Expected result

    The popup reads only the invoked page, keeps distinct state by URL according to the chosen key rule, and shows an actionable protected-page error.

    Verify

    Reload each fixture and reopen the popup. Inspect chrome.storage.local through the extension context and confirm no unexpected console or network errors occur.

  4. 04
    Project download and archive check

    Package the tested files

    Create a ZIP from the exact tested source, keep manifest.json at the archive root, exclude temporary profiles and test output, byte-compare packaged files with source, and scan extension JavaScript for unexpected fetch, XMLHttpRequest, WebSocket, or beacon calls.

    Expected result

    The ZIP expands directly to a valid extension root and contains only the reviewed source, assets, and documentation.

    Verify

    Run an archive integrity test, list the root entries, compare checksums, unzip to a fresh folder, and load that fresh folder in Chrome.

  5. 05
    Chrome Web Store Developer Dashboard

    Complete external publication requirements

    If public distribution is needed, register the developer account, enable 2-Step Verification, upload the tested ZIP, complete the store listing and privacy fields, choose distribution, and submit for review.

    Expected result

    The dashboard accepts the package and shows a review status instead of a missing-listing, privacy, account-security, or package error.

    Verify

    Review every submitted permission, screenshot, disclosure, support link, and package version against the tested build before selecting Submit for Review.

Decisions that change the build

Temporary active-tab access or persistent host access?

  • activeTab plus scripting after the user invokes the toolbar action
  • host_permissions for continuous access to named sites

Choose: Use activeTab plus scripting when the feature works only after a deliberate toolbar action, as the Page Brief example does. Add persistent host access only when a documented feature cannot work without it.

Tradeoff: Temporary access reduces warnings and exposure but cannot run continuously in the background. Persistent access supports automatic site behavior but increases review, disclosure, and user-trust burden.

Keep data in Chrome or add an external backend?

  • chrome.storage.local for one-profile settings and notes
  • A server API for shared, synced, or team data

Choose: Start with local storage when data belongs to one Chrome profile. Add a server only when users need accounts, cross-device sync, collaboration, or a business workflow behind the extension.

Tradeoff: Local state is private and simple but does not follow the user everywhere. A backend adds shared behavior plus authentication, privacy, retention, and operational responsibilities.

Before you share it

Test checklist

  • Happy path

    Invoke the toolbar action on a normal fixture page with a selected sentence, save a note, close the popup, and reopen it.

    Expected: The page title, URL, selection, and saved note match the controlled fixture, with no console or network errors.

  • Invalid input

    Open the popup on a protected chrome:// page or another unsupported browser surface.

    Expected: The extension does not attempt to bypass Chrome protection and shows a clear instruction to open a normal HTTP or HTTPS page.

  • Duplicate or retry

    Save the same note twice, reopen the same URL with a different fragment, and then save a different note for a second URL.

    Expected: The same logical URL has one current note according to the key rule, while the second URL keeps separate state.

  • Published smoke test

    Load a fresh unzip of the final package, invoke the real toolbar action on an ordinary HTTPS page, save a harmless note, and reopen it.

    Expected: The packaged build receives temporary active-tab access from the user gesture, captures the expected page, and restores the saved note.

If something goes wrong

Common failure cases

Chrome reports that manifest.json is missing

Likely cause
The wrong parent folder was selected or the ZIP added an extra top-level directory above the manifest.
Check
List the selected folder or archive root and locate the first manifest.json entry.
Fix
Select or package the directory whose root directly contains manifest.json, then load it again.

The popup still shows old behavior after a code change

Likely cause
The unpacked extension or target page still has the previous loaded code.
Check
Check the extension card reload time and compare the active source file with the edited project file.
Fix
Reload the extension on chrome://extensions, close the popup, and reload the target page when injected code changed.

The popup cannot read the current page

Likely cause
The tab is protected, activeTab was not granted by the user gesture, or the script permission is absent.
Check
Check the tab scheme, how the popup was opened, manifest permissions, and the exact executeScript error.
Fix
Use a normal HTTP or HTTPS page, invoke the toolbar action manually, and restore only the permission the implemented call requires.

A saved note disappears or appears on the wrong page

Likely cause
The storage write failed or the URL normalization rule does not match the intended page identity.
Check
Inspect chrome.storage.local and compare the stored key with the current URL, including query and fragment handling.
Fix
Await the storage write, show save errors, and define one explicit URL key rule before migrating existing notes.
Verified artifact

Page Brief Running as a Real Chrome Extension

This redacted screenshot comes from the unpacked Manifest V3 build using controlled fixture data and real chrome.storage.local persistence.

Page Brief Chrome extension popup showing captured page details, selected text, and a saved private note
Tested implementationLoaded in Playwright Chromium with controlled page inputs and real extension-local storage; the toolbar activeTab gesture remains a manual smoke test. Verified 2026-07-19.
Real package, bounded permissions

Inspect the Example Before You Build Your Own

Page Brief captures page context and stores a private per-URL note without persistent host access or network requests.

3
declared permissions: activeTab, scripting, storage
0
persistent host permissions
0
network requests in the extension source

Download the tested Page Brief extension ZIP

Choose the right build path

AI Builder, Starter Template, or Extension Platform?

The best option depends on how specific the browser workflow and ownership needs are

What you needTemplate or proprietary builderPlaycode
Starting pointAdapt a generic example or fit the workflow into preset blocksDescribe the exact browser job, data boundary, and interface
PermissionsOften inherited from the starter until you audit them yourselfMap each permission to the visible feature and remove unused access
Source ownershipVaries by platform and export pathReal source files you can inspect, download, and package
TestingUsually manual unless you assemble a harnessBuild the harness, automated checks, and explicit manual-toolbar boundary together
PublishingMay offer submission help under separate product rulesPrepare the ZIP and evidence; you own Web Store registration, disclosures, review, and release
Browser workflows worth building

Start with One Action a User Repeats Every Day

A narrow, inspectable extension is easier to trust, test, and publish

Research Clipper

Page context plus private notes

Capture the current title, URL, and selected text after a toolbar click, then keep a private note for that page. Add sync only when the workflow truly needs accounts or teams.

Page QA Helper

Repeatable checks on demand

Inspect headings, links, image alt text, or structured data on the active page and present clear findings without monitoring every site continuously.

Sales Research Assistant

Review before saving

Collect selected public facts into a review form, let the user correct them, then send the approved record to a permitted API when server-side credentials and policy allow it.

Internal Workflow Shortcut

One-click structured input

Turn the current internal web page into a prefilled request, support note, or checklist while keeping role checks and business secrets in the backend, not the extension bundle.

The engine

A software team in one agent

Playcode AI runs the same frontier models that power ChatGPT and Claude - and orchestrates them like a team: it plans the work, delegates to sub-agents, runs long jobs in the background, and reviews its own changes.

Every frontier model

The latest models from every major lab, in one picker. Switch anytime.

ClaudeGPTGeminiGrok

Sub-agents

Big jobs split across specialists - one explores your code, one writes, one audits - working in parallel.

Background tasks

Long builds and migrations keep running while you keep talking. They report back when done.

migration - running

It sees your designs

Have a design in Figma? Paste a screenshot - or a page you like, or a bug - and it builds from what it sees.

Tuned by years of iteration to write production software - structured, typed, maintainable - not throwaway prototypes.

Production code

Real code you can open, read, and edit

Under every project is a codebase the agent keeps production-grade. And you are never locked out of it: open the file explorer and edit any file yourself - server included. No AI required.

Quality is the default

Complete states, secure boundaries, structured code - the bar is what a professional agency would ship.

Every file is yours to open

Browse the whole project - frontend, backend, configuration - and edit directly in the built-in editor.

Developers are welcome

Invite your developer with the right role, or export the project code and files. Nothing is trapped in Playcode.

For teams and organizations

Share it like you share a doc

Playcode is built for organizations, not just solo builders. Workspaces hold your projects, people, and billing; roles and teams decide exactly who sees what.

Workspaces with their own billing

Create a workspace per company, client, or department - each with its own members, projects, and subscription.

Three clear roles

Admins manage, editors build, viewers watch. Set roles on the whole workspace, on a team, or on a single project.

Teams that scope access

Group people into teams and give each team its own projects - or a whole folder of them. Private projects stay private, even inside a shared workspace.

Share outside the workspace

Send a project to any email - a client, a contractor - with exactly the access you choose. No extra seat needed.

Share "Inventory tracker"
Acme Ops workspace
Private
client@partner.co
Editor Invite
Operations team
8 people
Editor
MK
Maya Kowalski
maya@acme.co
ADMIN
JR
Jon Reyes
jon@acme.co
EDITOR
LS
Lena Sato
lena@acme.co
VIEWER
Restricted - only people invited can open it
Real-time

Multiplayer by default

Work on one project together. Write in the same AI chat together. Every message, edit, and setting is fully synchronized - live, for everyone, on every device.

acme-launch · Playcode
MKJR
Maya's laptop
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.Preview updated
Describe the next change...
Jon's phone
Maya
Add a 'Book a call' button to the hero
Jon
And link it to our calendar, please
Playcode AIDone - button added to the hero and linked to your calendar.
Message...
Already there. No refresh.

Same project, same moment

Everyone works in the project at the same time - even in the code editor - without lock-outs or "who has the latest version".

Every device

Start on the laptop, check from your phone: the same live state follows you everywhere you sign in.

Nothing to refresh

Changes arrive over a live connection the instant they happen. Reloading the page is a habit you can drop.

Feels instant

It never makes you wait

Instant

Every click applies immediately on your device. Syncing happens behind you, not in front of you.

Offline

Connection dropped? Your changes queue locally and replay the moment you are back.

Reload-proof

The queue survives closing the tab. Nothing you did is lost while you are away.

Real People. Real Websites Built with AI.

"I built my entire portfolio site in 20 minutes. My clients think I hired a designer. Already got 3 new inquiries this month."
Marcus T. · Freelance Graphic Designer, Austin TX
"We switched from Wix to Playcode. The AI actually understands what we need instead of giving us cookie-cutter templates. Saved us thousands."
Sarah Chen · Owner, Bloom & Petal Floristry
"I update my property listings from my phone while showing apartments. Clients are impressed when I tell them I built the site myself."
David Morales · Real Estate Agent, Miami FL

Simple Pricing

Start small. Upgrade when you're ready.

Starter

$0to start

Try the AI website builder and see results

  • AI credits included to start
  • Publish your site instantly
  • Subdomain included
  • Website hosting included
  • No credit card required
Get Started

Pro

Most Popular
$21/month

Everything you need to build

  • 100 AI credits/month
  • All AI models (12+)
  • Visual editing
  • Custom domains
  • Website hosting included
  • Export your code anytime
  • Private projects
  • Unlimited collaborators
Start Building

Cancel anytime. No hidden fees.

How credits work

Credits are used when AI helps you. Simple edits cost less, complex features cost more.

  • "Change button color" ~0.3-0.5 credits
  • "Add a contact page" ~2-3 credits
  • "Build full landing page" ~5-10 credits

Most users never run out. 100 credits = lots of building.

Chrome Extension Builder Questions

Yes. Playcode can generate and edit the Manifest V3 manifest, popup or extension page, scripts, styles, icons, tests, and packaging workflow as real files you can inspect and download. You remain responsible for reviewing permissions and verifying the final build before distribution.

No native one-click Chrome Web Store publisher is claimed. Playcode can help prepare the source, ZIP, listing inputs, tests, and review checklist. You need your own Chrome Web Store developer account, fee, 2-Step Verification, disclosures, and successful review.

For a workflow that runs only after the user clicks the toolbar action, prefer activeTab plus scripting. Add storage only when the feature remembers local state. Use persistent host permissions only when a specific documented feature cannot work with temporary access.

Ordinary extensions cannot inspect protected Chrome pages such as chrome://extensions in the same way they inspect normal HTTP or HTTPS websites. The extension should recognize that boundary and show a useful error rather than attempting to bypass it.

After changing the manifest or extension files, select Reload on the extension card, close and reopen the popup, and reload the target page when injected code needs to be refreshed. Test the fresh package from a clean unzip before submission.

It can test the unpacked extension, popup behavior, capture function, local storage, protected-page state, packaging, and console errors. Browser automation cannot reliably grant activeTab through the real toolbar UI, so the final toolbar invocation remains a manual smoke test.

Yes, when the target service exposes a permitted API and the data use complies with Chrome Web Store policy. Never place a private server key in extension source. Put secrets in a backend and disclose the data collection, use, sharing, and retention accurately.

manifest.json must be at the ZIP root, beside the referenced scripts, pages, styles, and asset folders. Do not wrap the extension inside an extra parent directory, and do not include test profiles, temporary output, secrets, or unrelated source.

Still have questions? Contact us

Keep building the product behind the extension

AI app builder Build the browser interface and the application workflow behind it.How to build a Chrome extension Follow the permission, manifest, fixture, test, packaging, and launch guide.All Playcode builders Compare app, website, bot, and business-workflow paths.AI prototyping Turn a browser-tool idea into a working artifact people can exercise.ChatGPT app builder Build a typed MCP tool and optional interface when the product belongs inside ChatGPT.

Describe the browser job. Inspect the real extension.

Start with one toolbar action, one permission map, and one testable result. Playcode can build the Manifest V3 source and help you verify the package.

Build a Chrome extension that saves a private note for each page...Build My Chrome Extension

No credit card required. AI credits included.