Getting Started

From zero to a running Chrome extension in under five minutes. No config files, no terminal juggling — just ChromeShip Studio.

1. Install ChromeShip

npm install -g chromeship

Then start the Studio:

chromeship dev

Your browser opens at http://127.0.0.1:43111. The Studio stays running while you work — press q in the terminal to quit.

The Studio auto-detects missing tools like Chromium or the Supabase CLI and offers to download them on demand.

2. Create your first project

1. Click Projects in the sidebar.
2. Click Create project.
3. Give your extension a name, like My First Extension.
4. Add a short description (optional).
5. Click Create project.

Your project appears in the list. Click it to open the detail view.

3. Start the runtime

On the Overview tab, click Start.

The first time you start a project, ChromeShip does a few things automatically:

• npm install — installs the project's dependencies (React, Vite, Tailwind, shadcn). This runs once and takes 30 seconds to 2 minutes depending on your connection.
• Chrome for Testing — downloads a dedicated Chromium build (~150 MB) if one isn't already installed. This happens once per machine, not per project.
• Vite dev server — starts the dev server and waits for the first build to complete. A Compiling badge appears in the browser while the build runs.

Once the build is ready, ChromeShip opens a managed Chromium window with your extension loaded. The extension icon appears in the browser toolbar — click it to open your popup.

Subsequent starts skip the downloads and installs — the runtime starts in 15-45 seconds. If the build produces no output for 30 seconds, ChromeShip stops the launch and shows an error so you're not left waiting on a hung build.

4. Make a live change

Open the generated project folder in your editor (click the folder path next to the project name). In src/app/popup/App.tsx, change the heading:

<h1 className="mt-5 text-lg font-semibold tracking-tight">{name}</h1>

Save the file.

A Compiling badge flashes in the bottom-right corner of Chromium, then switches to Ready. Reopen the popup to see your change.

5. Inspect the logs

Switch to the Logs tab. Every console.log from every surface — popup, background, content scripts — arrives here in real time. No DevTools juggling.

Add this to App.tsx and save:

import { useEffect } from "react";

// Inside PopupContent:
useEffect(() => {
  console.log("hello from popup");
}, []);

Next

• Explore the Studio — understand every tab.
• Add more surfaces — side panel, content scripts, background.
• Build for production — package your extension for the Chrome Web Store.