Chrome Extension Storybook Integration — Developer Guide

3 min read

Setting Up Storybook for Chrome Extension Development

Storybook builds UI components in isolation—ideal for Chrome extensions where you can develop and test without loading the full extension.

Why Storybook?

Installation

npx storybook@latest init

Select your framework (React, Vue, Svelte).

Configuration

Create .storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: { name: '@storybook/react-vite', options: {} },
};

export default config;

Mocking Chrome APIs

Chrome APIs aren’t available in Storybook. Create a decorator in .storybook/preview.ts:

import type { Preview } from '@storybook/react';

const preview: Preview = {
  decorators: [
    (Story) => {
      chrome.storage = { local: { get: async () => ({}), set: async () => {} } } as any;
      chrome.runtime = { id: 'mock-id', getURL: (path: string) => `mock/${path}` } as any;
      return <Story />;
    },
  ],
};

export default preview;

Extension Viewport Decorator

Simulate popup dimensions (400x600):

export const popupViewport: Decorator = (Story, context) => {
  if (context.parameters.viewport === 'popup') {
    return <div style={{ width: '400px', height: '600px', border: '1px solid #ccc' }}><Story /></div>;
  }
  return <Story />;
};

Popup Component Story

import type { Meta, StoryObj } from '@storybook/react';
import { PopupHeader } from './PopupHeader';

const meta: Meta<typeof PopupHeader> = { title: 'Popup/PopupHeader', component: PopupHeader };
export default meta;

export const Default: StoryObj<typeof PopupHeader> = {
  args: { title: 'My Extension', onSettingsClick: () => {} },
};

export const DarkMode: StoryObj<typeof PopupHeader> = {
  parameters: { backgrounds: { default: 'dark' } },
  args: { title: 'My Extension', theme: 'dark' },
};

Visual Regression Testing

Integrate Chromatic: npm install -D chromatic && npx chromatic --project-token=YOUR_TOKEN

Turn Your Extension Into a Business

Ready to monetize? The Extension Monetization Playbook covers freemium models, Stripe integration, subscription architecture, and growth strategies for Chrome extension developers.

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

← Previous chrome-extension-state-machines Next → chrome-extension-svelte-setup