Chrome extension project structure

Chrome extension project structure

Explorer

  • .git…
  • .output…, not committed
  • .wxt…, not committed
  • .vscodenew
  • extensions.jsonnew
  • assets
  • react.svg
  • tailwind.cssnew
  • componentsnew
  • NoteCard.tsxnew
  • NoteList.tsxnew
  • EmptyState.tsxnew
  • SettingsForm.tsxnew
  • entrypoints
  • background.ts
  • content.ts
  • hooksnew
  • useNotes.tsnew
  • useActiveTab.tsnew
  • useSettings.tsnew
  • public
  • wxt.svg
  • utilsnew
  • storage.tsnew
  • messaging.tsnew
  • selection.tsnew
  • api.tsnew
  • sync.tsnew
  • badge.tsnew
  • testsnew
  • setup.tsnew
  • storage.test.tsnew
  • selection.test.tsnew
  • messaging.test.tsnew
  • sync.test.tsnew
  • node_modules…, not committed
  • .envnew, not committed
  • .env.examplenew
  • .gitignore
  • .nvmrcnew
  • .prettierrcnew
  • app.config.tsnew
  • eslint.config.jsnew
  • package.json
  • pnpm-lock.yaml
  • README.md
  • tsconfig.json
  • vitest.config.tsnew
  • web-ext.config.tsnew, not committed
  • wxt.config.ts
  1. # Create the project with the official WXT starter (pick the React template)

    pnpm dlx wxt@latest init page-notes
  2. # Install and start Chrome with the extension loaded and hot reload on

    cd page-notes && pnpm install && pnpm dev
  3. # Add storage, messaging and i18n helpers

    pnpm add @wxt-dev/storage @webext-core/messaging @wxt-dev/i18n zod
  4. # Add lint, format and unit test tools

    pnpm add -D vitest eslint typescript-eslint eslint-plugin-react-hooks prettier
  5. # Add Playwright for end to end tests in Chromium

    pnpm add -D @playwright/test && pnpm exec playwright install chromium
  6. # Build the store zip

    pnpm zip
  7. # Set up Chrome Web Store credentials once, then submit from CI

    pnpm wxt submit init