Developer Guide Introduction

Welcome to BetterSEQTA-Plus Development

This developer guide provides comprehensive documentation for contributing to BetterSEQTA-Plus, understanding its architecture, and extending its functionality.

What is BetterSEQTA-Plus?

BetterSEQTA-Plus is a browser extension that enhances SEQTA Learn with:

• Frontend: JavaScript/TypeScript with modern web APIs
• Framework: Browser Extension APIs (Chrome, Firefox, Safari)
• Styling: CSS with custom theme system
• Build: Webpack/Vite for bundling

Architecture Overview

BetterSEQTA-Plus follows a browser extension architecture:

┌─────────────────────────────────────┐
│      Content Scripts                │
│  - Page Enhancement                 │
│  - DOM Manipulation                │
│  - Feature Injection               │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Background Script              │
│  - Message Handling                │
│  - State Management                │
│  - API Communication               │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Popup/Options UI               │
│  - Settings Interface               │
│  - Feature Toggles                  │
│  - User Preferences                 │
└─────────────────────────────────────┘

Technology Stack

Core Technologies

• JavaScript/TypeScript: Main programming language
• Browser Extension APIs: Chrome, Firefox, Safari APIs
• CSS: Styling and theming
• HTML: UI templates

Build Tools

• Webpack/Vite: Module bundling
• TypeScript: Type checking
• ESLint: Code linting
• Prettier: Code formatting

Project Structure

betterseqta-plus/
├── src/
│   ├── content/          # Content scripts
│   ├── background/       # Background scripts
│   ├── popup/           # Popup UI
│   ├── options/         # Options page
│   ├── shared/          # Shared utilities
│   └── styles/          # CSS files
├── public/              # Static assets
├── manifest.json        # Extension manifest
└── package.json         # Dependencies

Key Concepts

Content Scripts

Content scripts run in the context of web pages:

// Inject features into SEQTA pages
chrome.scripting.executeScript({
  target: { tabId: tab.id },
  files: ['content.js']
});

Background Scripts

Background scripts handle extension logic:

// Listen for messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Handle message
  sendResponse({ success: true });
});

Message Passing

Communication between scripts:

// Send message
chrome.runtime.sendMessage({ action: 'getData' }, (response) => {
  console.log(response);
});

// Receive message
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Handle message
});

Development Workflow

Getting Started

1. Clone Repository
   git clone https://github.com/betterseqta/betterseqta-plus
   cd betterseqta-plus
   

2. Install Dependencies
   npm install
   # or
   pnpm install
   

3. Build Extension
   npm run build
   

4. Load in Browser
   • Chrome: chrome://extensions/ → Load unpacked
   • Firefox: about:debugging → Load Temporary Add-on

Development Commands

• npm run dev: Watch mode for development
• npm run build: Build for production
• npm run lint: Lint code
• npm run typecheck: TypeScript type checking

Contributing

Before You Start

1. Check existing issues and PRs
2. Discuss major changes in issues first
3. Follow the code style guide
4. Write tests for new features

Pull Request Process

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Write/update tests
5. Update documentation
6. Submit PR with description

Documentation

• User Guide: How to use BetterSEQTA-Plus
• Developer Guide: This guide
• API Reference: Extension APIs and utilities
• Architecture Docs: System design and patterns

Getting Help

• GitHub Issues: Report bugs and request features
• Discord: Join the community Discord
• Documentation: Read the docs
• Code Comments: Check inline documentation

Next Steps

Continue reading to learn about:

• Development Setup - Detailed setup instructions
• Architecture - System architecture
• Content Scripts - Page enhancement
• Background Scripts - Extension logic
• Adding Features - How to add new features