OopsTab Development Guide

This guide covers how to set up the development environment for OopsTab, build the extension, and contribute to the project.

Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn
A Chromium-based browser (Chrome, Edge, Brave, etc.)

How to Clone

# Clone the repository
git clone https://github.com/RockyHong/OopsTab.git

# Navigate to project directory
cd oopstab

# Install dependencies
npm install

Building the Extension

Development Build

# Run development build with hot reload
npm run dev

Production Build

# Build for production
npm run build

After building, the extension will be in the dist directory. You can load this as an unpacked extension in Chrome by:

Opening chrome://extensions
Enabling “Developer mode” in the top-right corner
Clicking “Load unpacked” and selecting the dist directory

Project Structure

The project is structured as a modern web application using:

TypeScript for type-safe JavaScript
Webpack for bundling and build pipeline
Tailwind CSS for responsive styling
Chrome Extension APIs for browser integration

Key Directories

src/ - Main source code
- background/ - Background service worker
- components/ - React components
- utils/ - Utility functions and helpers
- types/ - TypeScript type definitions
public/ - Static assets
scripts/ - Build and helper scripts
docs/ - Documentation website (this site)

Contributing

Contributions are welcome! If you’d like to contribute:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Coding Standards

Use TypeScript for all new code
Follow the existing code style
Add comments for complex logic
Include tests for new features when possible

View on GitHub Explore Features