Loading...

Chrome Extension Studio

Popups, page changers and new-tab pages for Chrome and Edge, handed to you as a zip you load in three clicks.

What it builds

A Chrome extension is a small add-on that lives in the browser: an icon beside the address bar that opens a little window, a script that changes the websites you visit, or a page that replaces the empty new tab. It works in Chrome, Edge, Brave and Opera.

The studio writes it in plain HTML, CSS and JavaScript around a manifest.json — the file the browser reads first — so there is no build step and nothing to install on your computer.

Starting one

Open Chrome Extension Studio from your tools and press New Extension. The guided wizard asks the questions every studio asks, with choices of its own:

• What kind of extension — Popup tool (click the icon, get a small window), Page changer (adds to or edits websites you visit), New-tab page, or Side panel (a panel that stays open beside the page)
• The features you want — remembers settings, works on every site, a right-click menu, a keyboard shortcut, a badge on the icon, an options page, notifications, or talking to an API
• Look — Clean, Dark, Like Chrome or Playful

There are worked examples to start from as well: Tab Tidy, a word counter, dark mode for any site, a price tracker, a Minecraft server status new-tab page and more. Quick Create works too — describe it once and it is built. See Starting a New Project for the doors every studio shares.

What the AI is told to write

Every extension is asked for in the same shape, so that it loads first time:

• manifest.json at the top of the project, on Manifest V3 — the only version Chrome accepts for new extensions
• the pages for the kind you picked: popup.html, popup.js and popup.css for a popup, content.js for a page changer, newtab.html for a new-tab page, sidepanel.html for a side panel
• background.js, only when a feature needs one — a badge, a right-click menu, a shortcut or notifications
• a README.md with the install steps

The AI is also told to ask only for the browser permissions your features need. It is still worth reading the permissions list in manifest.json before you share the extension, because that list is what the browser shows people when they install it.

Install instead of Preview

An extension cannot run on a web address, so the big panel in this studio is not a live site. On a computer its toolbar has Install, Code and Changes, and Install shows two cards.

The left card says whether the extension is ready to load: Tab Tidy is built with a green build passed tag, or Tab Tidy needs a fix with the number of warnings and each one listed. Under that sit Download tab-tidy.zip (named after your extension) and Open the code, then the three install steps.

The right card is Preview of the popup: your popup drawn from the project's own files, at the size the browser shows it, with a reload arrow in the toolbar. Anything that asks the browser itself for something — saved settings, your open tabs — comes back empty in this preview, because there is no real browser behind it. An extension without a popup says so instead: This extension has no popup — it works on the page itself.

What "build passed" checks

Nothing is compiled — an extension has nothing to compile. The card reads manifest.json the way Chrome does when you load the folder: that it exists and is valid JSON, that manifest_version is 3, that it has a name and a version, and that the popup it names is really in the project. A pass means Chrome should accept the folder; it does not test what the extension does.

After an AI run the chat can also carry a Build check line with a verdict of the same kind — manifest.json is valid for Manifest V3, or Chrome would refuse this extension with the problems listed. That check only reports. To have the problems repaired, say fix the manifest problems and they are fixed in your next message, which costs credits like any other.

Putting it in Chrome

1. Press “Download .zip” on the Install card, and unzip the file anywhere on your computer
2. Open chrome://extensions and turn on Developer mode at the top right
3. Click Load unpacked and pick the folder that has manifest.json in it. The icon appears next to the address bar

Sharing it, and the Chrome Web Store

Anyone you send the zip to can load it the same way. There is no Publish button in this studio: an extension is not a website, so it gets no web address.

To offer it to everyone through the Chrome Web Store, you upload it there yourself. Google charges a one-time $5 developer fee and reviews every upload. The Install card mentions a store listing text; nothing in the studio writes one for you yet, so ask the chat for a description if you want one.

The Install card is a desktop view. On a phone the More menu has no entry for it today, so download and install the extension from a computer.

The studio is in Early access, and in VyroAI that word decides who can open it: Early access means staff and hand-granted testers only. So if Chrome Extension Studio is not among your tools, nothing is wrong with your account and there is nothing to buy or switch on — it has not been opened to everyone yet. Finding Your Way Around explains why two people can see different studios.

Where to next

• Next in Code Studio (IDE): Plans & Questions
• Ready to begin one: Starting a New Project — The wizard every new extension starts from.
• Wrong kind of project: Web App Studio — The sister studio, for apps that live on a web address.
• Cannot see it anywhere: Finding Your Way Around — Why an Early access studio can be missing from your sidebar.

15 of 37 in Code Studio (IDE) · Last checked 15 September 2026 · Previous: The README Editor