Project structure · More
Chrome extension project structure
Opens with creditsA Manifest V3 Chrome extension that saves highlights from any page into a side panel, built with WXT, React and TypeScript. WXT reads your entrypoints folder and writes the manifest for you, so the layout is one folder per thing Chrome loads (service worker, content script, popup, side panel, options) with shared code in utils. For students who have loaded an unpacked extension once and want to ship a real one to the Chrome Web Store.
Curated by Tauseef FayyazIntermediate137 files and foldersWXT 0.21, Manifest V3, React 19.3Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you29 files and folders
- 2GrowingWhat a real app with features and tests adds+50 files and folders
- ProductionWhat running it for real users adds+33 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+25 files and foldersOpens with credits
How it is organised
- One folder or file per entrypoint in `entrypoints`: WXT generates manifest.json from them, so the manifest never drifts from the code.
- The service worker can stop at any time. Keep state in `chrome.storage`, timers in `chrome.alarms`, and register every listener at the top level.
- Each part runs in its own context (worker, content script, pages). They talk only through typed messages and storage, defined once in `utils`.
- Content scripts run on other people's websites: keep them small, mount UI in a shadow root, never inject page text as HTML.
- Ask for the fewest permissions that work. Prefer `activeTab` and optional host permissions to `<all_urls>`, and write down why each one exists.
- Business logic lives in plain functions in `utils`, tested with Vitest and WXT's fake browser. Playwright checks the real built extension in Chromium.
- Every store upload comes from CI with a version higher than the last one; the manifest version is the package.json version.
At the top of the project
Open one in the explorer for the full story
- page-notes/
- .git/Git history, created by `git init`.
- .output/Build output: `chrome-mv3-dev` while developing, `chrome-mv3` and the store zip after a build.
- .wxt/Files WXT generates: TypeScript config, auto-import types, and types for your entrypoints.
- .vscode/Shared editor settings and recommended extensions.1 inside
- assets/CSS, images and fonts that Vite processes and bundles.2 inside
- components/React components shared by the popup, side panel and options pages. Auto-imported.4 inside
- entrypoints/Every part Chrome loads separately: the service worker, content scripts and each HTML page.6 inside
- hooks/React hooks for pages, auto-imported: data from storage, the current tab.3 inside
- public/Files copied to the build as they are: icons, locales, static images.3 inside
- utils/Plain TypeScript shared by every entrypoint: storage, messaging, the API client. Auto-imported.6 inside
- tests/Unit tests with Vitest and WXT's in-memory fake browser.6 inside
- node_modules/Installed packages.
- .envLocal values for `WXT_` and `VITE_` variables, such as the API base URL.
- .env.exampleThe variable names with safe example values, committed for teammates.
- .gitignoreIgnores node_modules, .output, .wxt, logs, web-ext.config.ts and editor files.
- .nvmrcPins the Node version, for example 24.
- .prettierrcPrettier settings for TypeScript, CSS, HTML and Markdown.
- app.config.tsRuntime config available in every entrypoint through `useAppConfig()`.
- eslint.config.jsESLint flat config: typescript-eslint, React hooks rules, and globals for WXT auto-imports.
- package.jsonName, version, scripts (dev, build, zip, compile) and dependencies.
- pnpm-lock.yamlThe exact version of every installed package.
- README.mdHow to install, run, test and release the extension.
- tsconfig.jsonExtends the generated `.wxt/tsconfig.json` and turns on JSX.
- vitest.config.tsVitest config with the WxtVitest plugin and the setup file.
- web-ext.config.tsYour personal browser startup settings for `pnpm dev`: which Chrome binary, profile, start URLs.
- wxt.config.tsWXT config: modules (React), and the manifest fields WXT cannot infer.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Chrome extension.
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- RoadmapLinux, terminal and Git roadmapShell, Git, SSH and your dev setup
- Roadmap· Application securityCybersecurity roadmapDefend systems, test them, secure code
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- Cheat sheetLinux, terminal and Git cheat sheetShell, Git, SSH and your dev setup.
- FYP idea· IntermediateBrowser Extension Update Watchdog That Flags Risky Changes Before They Reach Company LaptopsBuild a service that tracks every browser extension used across a company, downloads each new version when it is published, and diffs it against the last one: new permissions, new remote hosts, new obfuscated code, a change of owner. Risky updates are flagged before staff browsers install them. It targets the attack in which a trusted extension is hijacked and pushed to its existing users.
- FYP idea· IntermediateCookie Consent Behaviour Checker That Tests What a Site Does After You Click RejectBuild a crawler that visits websites, clicks "reject" or ignores the cookie banner, and then records which cookies, trackers and network requests still fire. Most consent tools only check that a banner exists. This one checks whether the choice is respected, and gives developers a precise list of the scripts that ignore it.
See 10 moreShow fewer
- FYP idea· AdvancedCheckout Dark Pattern Detector for South Asian Online Stores and Quick Commerce SitesBuild a crawler and classifier that walks real online store flows up to the payment step and detects deceptive design: items added to the basket without asking, fees that appear only at the end, fake countdown timers and shaming opt-out text, in English, Urdu and Roman Urdu. Earlier studies stopped at product pages. This project measures the checkout, where the money is, and gives consumer groups and store owners evidence they can act on.
- FYP idea· AdvancedIn-Browser Document Redaction for ID Cards, Bank Statements and Medical ReportsBuild a web app that finds and removes personal details such as CNIC numbers, account numbers, phone numbers, addresses and names from PDFs and photos entirely inside the browser, using on-device OCR and small models, so the file never leaves the phone. People share copies of ID cards and bank statements with landlords, employers and agents every day, usually unredacted. The hard part is true redaction that removes hidden text, not black boxes drawn on top.
- QuestionWhat projects should I build in my first year of university?Build small, finished projects that solve problems you or people around you actually have: a script that automates a chore, a command line tool, a simple website for a society or family business. First year is about finishing things and using Git, not about impressive ideas.
- QuestionWhat does proof of work mean for a fresher developer?Proof of work is evidence someone can check in a few minutes that you can do the job: a deployed project real people could use, readable code with tests, a pull request merged into someone else's project, or a clear write-up of a problem you solved. It replaces the experience a fresher does not have yet, so it must be easy to find and easy to verify.
- QuestionShould I learn TypeScript or Python first in 2026?Learn Python first if you are new to programming or drawn to data and AI. Learn TypeScript first only if you already know some JavaScript or are certain about web development, and even then learn plain JavaScript for a few weeks before the types. The second language is much easier than the first.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
- Resource· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
- Resource· GuideGitHub Actions DocumentationThe official documentation for GitHub Actions, GitHub's built in CI/CD and automation system: workflow syntax, triggers, runners, caching, artifacts, environments, secrets and OpenID Connect deployments to AWS, Azure and Google Cloud. Actions is free for public repositories on standard runners, so it is the CI tool most students and open source projects learn first. It suits developers setting up tests and deployments for the first time.
Checked against 18 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- WXT: Installation (wxt init)
- WXT: Project structure
- WXT react template
- WXT: Entrypoints
- WXT: Content scripts
- WXT: Storage
- WXT: Unit testing
- WXT: E2E testing
- WXT: Publishing
- Chrome: Manifest V3 overview
- Chrome: The extension service worker lifecycle
- Chrome: chrome.sidePanel API
- Chrome: chrome.storage API
- Chrome: chrome.offscreen API
- Chrome: Permission warnings
- Chrome Web Store: Program policies
- Chrome Web Store API
- Playwright: Chrome extensions
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com