CONTRIBUTING.md

Contribution Guidelines

Extro is an open source project, and contributions of any kind are welcome and appreciated. Open issues, bugs, and enhancements are all listed on the issues tab and labeled accordingly. Feel free to open bug tickets and make feature requests. Easy bugs and features will be tagged with the good first issue label.

Issues

If you encounter a bug, please file a bug report. If you have a feature to request, please open a feature request. If you would like to work on an issue or feature, there is no need to request permission.

Pull Requests

In order to create a pull request for Extro, follow the GitHub instructions for creating a pull request from a fork. Please link your pull request to an existing issue.

File Structure

Description of the project files and directories.

├── .github/                      # Github related files (workflows, templates)
├── .husky/                       # Husky config
├── .vscode/                      # VSCode settings (extensions, settings)
├── src/                          # Source code for the extension
│    ├── app/                     # Entry files for each part of the extension (background, popup, options, etc.)
│    ├── assets/                  # Static assets (fonts, images, svgs, etc.)
│    ├── components/              # Shared components
│    ├── lib/                     # Utility functions and third-party libraries
│    ├── public/                  # Public assets (fonts, locales, etc.)
│    ├── types/                   # TypeScript types
│    └── typings/                 # Custom type definitions
├── .cursorrules                  # Cursor rules
├── .env.example                  # Examples of env variables
├── .gitignore                    # Files ignored by git
├── biome.json                    # Biome configuration
├── bun.lockb                     # Bun lockfile
├── commitlint.config.ts          # Config for CommitLint - to enforce commit consistency
├── components.json               # shadcn/ui configuration
├── package.json                  # Dependencies and additional informations about the project
├── tailwind.config.ts            # Tailwind configuration
├── tsconfig.json                 # TypeScript config
├── wxt.config.ts                 # WXT configuration

/app

Extro ships with the following extension pages preconfigured:

• background - background service worker
• content - content scripts that run in the context of web pages
• devtools - devtools page with custom panels
• newtab - new tab page
• options - options page
• popup - popup window
• sidepanel - side panel
• tabs - unlisted pages (custom pages delivered with the extension)

Styleguide

Coding conventions are enforced by Biome.

• Semicolons
• Double quotes
• const preferred over let
• Conventional Commits
• Two space indentation
• React: functional style with Hooks (no classes)
• Trailing commas in arrays and objects
• Non-default exports are preferred for components
• Module imports are ordered and separated: built-in -> external -> internal -> css/assets/other
• TypeScript: strict mode, with no implicitly any

Example component structure

├── component/
│   ├── component.tsx

import { memo } from "react";

interface ComponentProps = {
  readonly title: string;
};

export const Component = memo<ComponentProps>(({ title }) => {
  return <h1>{title}</h1>;
});

Component.displayName = "Component";

Tech stack

Tech	Description
TypeScript	Static type-checking programming language
React	Library for building user interfaces
WXT	Next-gen Web Extension Framework
Supabase	Open source Firebase alternative
shadcn/ui	Extendable component library
Tailwind	Utility-first CSS framework
OpenPanel	Open source analytics
React Hook Form	Forms with easy-to-use validation
Vite	Next generation frontend tool
Bun	Package manager and build tool
Husky	Git hooks
Biome	Linting and formatting