Skip to content

Contributing to RapidTriageMEΒΆ

We welcome contributions to RapidTriageME! This guide will help you get started with contributing to the project, whether you're fixing bugs, adding features, improving documentation, or helping with community support.

Quick Start for ContributorsΒΆ

flowchart LR
    A[🍽️ Fork Repository] --> B[πŸ’» Clone Locally]
    B --> C[πŸ”§ Make Changes]
    C --> D[πŸ§ͺ Test Changes]
    D --> E[πŸ“€ Submit PR]
    E --> F[πŸ‘€ Code Review]
    F --> G[✨ Merge & Deploy]

    style A fill:#e8f5e8
    style G fill:#c8e6c9

Ways to ContributeΒΆ

πŸ› Bug ReportsΒΆ

Report bugs by creating an issue with: - Clear description of the problem - Steps to reproduce - Expected vs actual behavior
- Environment details (OS, Node.js version, browser) - Screenshots or logs when relevant

✨ Feature Requests¢

Suggest new features by creating an issue with: - Use case description - Proposed solution - Alternative approaches considered - Impact on existing functionality

πŸ“ DocumentationΒΆ

Improve documentation by: - Fixing typos and errors - Adding examples and tutorials - Improving API documentation - Translating content - Creating video tutorials

πŸ’» Code ContributionsΒΆ

Contribute code by: - Fixing open issues - Implementing new features - Improving performance - Adding tests - Refactoring code

Development SetupΒΆ

PrerequisitesΒΆ

# Required
node --version  # v18.0.0 or higher
npm --version   # v9.0.0 or higher
git --version   # v2.0.0 or higher

# Recommended
docker --version  # For containerized testing

Fork and CloneΒΆ

# 1. Fork the repository on GitHub
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/rapidtriage.git
cd rapidtriage

# 3. Add upstream remote
git remote add upstream .git

# 4. Create a new branch
git checkout -b feature/your-feature-name

Project StructureΒΆ

rapidtriageME/
β”œβ”€β”€ rapidtriage-extension/     # Chrome extension source
β”‚   β”œβ”€β”€ background.js
β”‚   β”œβ”€β”€ devtools.js
β”‚   β”œβ”€β”€ panel.js
β”‚   └── manifest.json
β”œβ”€β”€ rapidtriage-server/        # Browser connector server
β”‚   β”œβ”€β”€ browser-connector.ts
β”‚   β”œβ”€β”€ puppeteer-service.ts
β”‚   └── lighthouse/
β”œβ”€β”€ rapidtriage-mcp/           # MCP server implementation
β”‚   β”œβ”€β”€ mcp-server.ts
β”‚   └── package.json
β”œβ”€β”€ src/                       # Cloudflare Worker source
β”‚   β”œβ”€β”€ worker.ts
β”‚   β”œβ”€β”€ handlers/
β”‚   └── middleware/
β”œβ”€β”€ docs-site/                 # MkDocs documentation
└── scripts/                   # Build and deployment scripts

Local DevelopmentΒΆ

# Install dependencies for all packages
npm run install:all

# Build all components
npm run build:all

# Start development servers
npm run dev

# This starts:
# - Browser connector server on port 3025
# - MCP server in development mode
# - File watchers for auto-rebuilding

Running TestsΒΆ

# Run all tests
npm test

# Run specific test suites
npm run test:unit          # Unit tests
npm run test:integration   # Integration tests
npm run test:e2e           # End-to-end tests

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

Code QualityΒΆ

# Linting
npm run lint                # Check all files
npm run lint:fix            # Auto-fix issues

# Formatting
npm run format              # Format with Prettier
npm run format:check        # Check formatting

# Type checking
npm run typecheck           # TypeScript type checking

Contribution GuidelinesΒΆ

Code StyleΒΆ

We use ESLint and Prettier for consistent code formatting:

// Good: Use TypeScript for new code
interface ScreenshotOptions {
  fullPage?: boolean;
  quality?: number;
  format?: 'png' | 'jpeg';
}

// Good: Use descriptive function names
async function captureFullPageScreenshot(options: ScreenshotOptions): Promise<string> {
  // Implementation with clear error handling
  try {
    const result = await browser.captureScreenshot(options);
    return result.dataUrl;
  } catch (error) {
    logger.error('Screenshot capture failed:', error);
    throw new Error('Failed to capture screenshot');
  }
}

// Good: Add comprehensive comments for complex logic
/**
 * Processes browser console logs by filtering sensitive data,
 * applying rate limiting, and formatting for AI consumption.
 * 
 * @param rawLogs - Unprocessed console log entries
 * @param filters - Filtering configuration
 * @returns Processed and sanitized log entries
 */
function processConsoleLogs(rawLogs: RawLogEntry[], filters: LogFilters): ProcessedLogEntry[] {
  // Implementation details...
}

Commit MessagesΒΆ

We follow Conventional Commits:

# Format: <type>[optional scope]: <description>

# Examples:
feat(extension): add screenshot capture with element selector
fix(server): resolve WebSocket connection timeout issue  
docs(api): update MCP tool documentation with examples
test(integration): add end-to-end screenshot tests
refactor(mcp): improve error handling in tool execution
perf(lighthouse): optimize audit execution performance
style(all): apply prettier formatting updates
ci(github): add automated security scanning

Pull Request ProcessΒΆ

  1. Before You Start
  2. Check existing issues and PRs
  3. Discuss large changes in an issue first
  4. Ensure your fork is up-to-date

  5. Creating Your PR

    # Update your fork
    git fetch upstream
    git checkout main
    git merge upstream/main
    
    # Push your changes
    git push origin feature/your-feature-name
    

  6. PR Requirements

  7. Clear title and description
  8. Tests pass (npm test)
  9. Code linted (npm run lint)
  10. Documentation updated
  11. Breaking changes noted
  12. Screenshots for UI changes

  13. PR Template

    ## Description
    Brief description of changes and motivation.
    
    ## Type of Change
    - [ ] Bug fix
    - [ ] New feature
    - [ ] Breaking change
    - [ ] Documentation update
    
    ## Testing
    Describe how you tested your changes.
    
    ## Screenshots
    Include screenshots for visual changes.
    
    ## Checklist
    - [ ] Tests pass locally
    - [ ] Code follows style guidelines  
    - [ ] Self-review completed
    - [ ] Documentation updated
    

Testing GuidelinesΒΆ

Unit TestsΒΆ

// Example: Testing MCP tool functionality
import { describe, it, expect, beforeEach } from 'jest';
import { MCPServer } from '../src/mcp-server';

describe('MCP Server Tools', () => {
  let server: MCPServer;

  beforeEach(() => {
    server = new MCPServer({ port: 3025 });
  });

  it('should capture screenshot with default options', async () => {
    const result = await server.executeTool('screenshot_capture', {});

    expect(result).toHaveProperty('screenshot');
    expect(result.screenshot).toMatch(/^data:image\/png;base64,/);
    expect(result).toHaveProperty('timestamp');
  });

  it('should handle screenshot errors gracefully', async () => {
    // Mock failure scenario
    jest.spyOn(server.browserConnector, 'captureScreenshot')
        .mockRejectedValue(new Error('Browser not connected'));

    const result = await server.executeTool('screenshot_capture', {});

    expect(result.isError).toBe(true);
    expect(result.content[0].text).toContain('Screenshot capture failed');
  });
});

Integration TestsΒΆ

// Example: Testing browser connector API
import request from 'supertest';
import { app } from '../src/server';

describe('Browser Connector API', () => {
  it('should return server identity', async () => {
    const response = await request(app)
      .get('/.identity')
      .expect(200);

    expect(response.body).toHaveProperty('name', 'RapidTriageME Browser Connector');
    expect(response.body).toHaveProperty('status', 'healthy');
  });

  it('should handle console log requests', async () => {
    const response = await request(app)
      .get('/console-logs?limit=10')
      .expect(200);

    expect(response.body).toHaveProperty('logs');
    expect(Array.isArray(response.body.logs)).toBe(true);
    expect(response.body.logs.length).toBeLessThanOrEqual(10);
  });
});

End-to-End TestsΒΆ

// Example: Testing complete workflow
import { test, expect } from '@playwright/test';

test.describe('RapidTriageME E2E', () => {
  test('should capture screenshot through AI assistant', async ({ page }) => {
    // Navigate to test page
    await page.goto('http://localhost:3000/test-page');

    // Simulate AI assistant request
    const screenshotResponse = await page.request.post('http://localhost:3025/capture-screenshot', {
      data: { options: { fullPage: true } }
    });

    expect(screenshotResponse.status()).toBe(200);

    const data = await screenshotResponse.json();
    expect(data).toHaveProperty('screenshot');
    expect(data.screenshot).toMatch(/^data:image/);
  });
});

Component-Specific GuidelinesΒΆ

Chrome Extension DevelopmentΒΆ

// Use Manifest V3 features
// Good: Use chrome.action instead of chrome.browserAction
chrome.action.onClicked.addListener((tab) => {
  // Implementation
});

// Good: Use service workers for background scripts
// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});

// Good: Handle async operations properly
async function captureScreenshot() {
  try {
    const dataUrl = await chrome.tabs.captureVisibleTab();
    return dataUrl;
  } catch (error) {
    console.error('Screenshot failed:', error);
    throw error;
  }
}

Server DevelopmentΒΆ

// Good: Use TypeScript for server code
interface ServerConfig {
  port: number;
  host: string;
  corsOrigin: string | string[];
}

// Good: Implement proper error handling
app.use((error: Error, req: Request, res: Response, next: NextFunction) => {
  logger.error('Server error:', error);

  res.status(500).json({
    error: 'Internal server error',
    requestId: req.headers['x-request-id']
  });
});

// Good: Use structured logging
import { createLogger, format, transports } from 'winston';

const logger = createLogger({
  level: process.env.LOG_LEVEL || 'info',
  format: format.combine(
    format.timestamp(),
    format.errors({ stack: true }),
    format.json()
  ),
  transports: [
    new transports.Console(),
    new transports.File({ filename: 'error.log', level: 'error' })
  ]
});

MCP Server DevelopmentΒΆ

// Good: Follow MCP protocol specifications
import { Server } from '@modelcontextprotocol/sdk/server';
import { CallToolRequestSchema, ListToolsRequestSchema } from '@modelcontextprotocol/sdk/types';

// Good: Implement comprehensive tool schemas
const SCREENSHOT_TOOL_SCHEMA = {
  name: 'screenshot_capture',
  description: 'Capture a screenshot of the current browser tab with advanced options',
  inputSchema: {
    type: 'object',
    properties: {
      options: {
        type: 'object',
        properties: {
          fullPage: { type: 'boolean', description: 'Capture full page or viewport only' },
          quality: { type: 'number', minimum: 1, maximum: 100 },
          format: { type: 'string', enum: ['png', 'jpeg'] }
        }
      }
    }
  }
};

// Good: Handle errors gracefully in tools
server.setRequestHandler(CallToolRequestSchema, async (request) => {
  try {
    const result = await executeTool(request.params.name, request.params.arguments);
    return { content: [{ type: 'text', text: JSON.stringify(result) }] };
  } catch (error) {
    logger.error(`Tool execution failed: ${error.message}`);
    return {
      content: [{ type: 'text', text: `Error: ${error.message}` }],
      isError: true
    };
  }
});

Documentation ContributionsΒΆ

Writing GuidelinesΒΆ

  1. Be Clear and Concise
  2. Use simple, direct language
  3. Avoid jargon and technical terms without explanation
  4. Break up long paragraphs

  5. Include Examples

  6. Provide practical, working examples
  7. Show both good and bad practices
  8. Include expected outputs

  9. Keep It Current

  10. Update examples when APIs change
  11. Remove outdated information
  12. Add new features promptly

Documentation StructureΒΆ

# Page Title

Brief introduction explaining what this page covers.

## Prerequisites

What users need before following this guide.

## Step-by-Step Instructions

### Step 1: Clear Action

Detailed explanation with code examples.

```bash
# Example command
npm install package

Step 2: Next ActionΒΆ

Continue with logical progression.

TroubleshootingΒΆ

Common issues and solutions.

Next StepsΒΆ

Where to go from here.

## Community Guidelines

### Code of Conduct

We are committed to providing a welcoming and inclusive environment. Please:

- **Be respectful** in all interactions
- **Be constructive** in feedback and criticism  
- **Be collaborative** and help others learn
- **Be patient** with newcomers and questions

### Communication Channels

- **GitHub Issues**: Bug reports, feature requests
- **GitHub Discussions**: General questions, ideas
- **Discord**: Real-time chat, community support
- **Email**: Security issues, private matters

### Recognition

We recognize contributors in several ways:

- **Contributors list** in README
- **Changelog mentions** for significant contributions
- **Special roles** in Discord community
- **Swag and merch** for major contributors

## Release Process

### Versioning

We follow [Semantic Versioning](https://semver.org/):

- **MAJOR** version: Breaking changes
- **MINOR** version: New features (backward compatible)
- **PATCH** version: Bug fixes (backward compatible)

### Release Workflow

```mermaid
flowchart LR
    A[Feature Complete] --> B[Code Review]
    B --> C[Testing]
    C --> D[Documentation]
    D --> E[Version Bump]
    E --> F[Tag Release]
    F --> G[Deploy]
    G --> H[Announce]

  1. Feature freeze for upcoming release
  2. Comprehensive testing of all components
  3. Documentation updates for new features
  4. Version bump following semantic versioning
  5. Git tag creation and release notes
  6. Automated deployment to npm and production
  7. Community announcement with changelog

Getting HelpΒΆ

If you need help contributing:

  • Read the docs: Check existing documentation first
  • Search issues: Someone might have asked already
  • Ask in Discord: Get real-time help from maintainers
  • Open an issue: For persistent problems

Maintainer ContactΒΆ

For urgent matters or sensitive issues:

LicenseΒΆ

By contributing to RapidTriageME, you agree that your contributions will be licensed under the MIT License. See LICENSE for details.


Thank you for contributing to RapidTriageME! Every contribution, no matter how small, helps make browser debugging better for developers worldwide.