Development Setup

Setting up your development environment for BetterSEQTA-Plus

Prerequisites

Before setting up BetterSEQTA-Plus development:

Node.js: Version 18 or higher
Package Manager: npm, pnpm, or yarn
Browser: Chrome, Firefox, or Safari for testing
Git: For version control

Initial Setup

1. Clone Repository

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

2. Install Dependencies

npm install
# or
pnpm install

3. Build Extension

npm run build

This creates the extension bundle in the dist/ directory.

Loading Extension in Browser

Chrome/Chromium

Open Chrome and navigate to chrome://extensions/
Enable "Developer mode" (toggle in top right)
Click "Load unpacked"
Select the dist/ directory
Extension will be loaded

Firefox

Open Firefox and navigate to about:debugging
Click "This Firefox"
Click "Load Temporary Add-on"
Select dist/manifest.json
Extension will be loaded

Development Mode

Watch Mode

For active development with auto-reload:

npm run dev

This will:

Watch for file changes
Rebuild automatically
Reload extension in browser

Manual Reload

After making changes:

Rebuild: npm run build
Reload extension in browser
Refresh SEQTA Learn page

Project Structure

betterseqta-plus/
├── src/
│   ├── content/          # Content scripts
│   │   ├── main.ts       # Main content script
│   │   └── features/     # Feature modules
│   ├── background/       # Background scripts
│   │   └── service-worker.ts
│   ├── popup/           # Popup UI
│   │   ├── popup.html
│   │   └── popup.ts
│   ├── options/         # Options page
│   │   ├── options.html
│   │   └── options.ts
│   ├── shared/          # Shared code
│   │   ├── utils.ts
│   │   └── types.ts
│   └── styles/          # CSS files
│       └── main.css
├── public/              # Static assets
├── manifest.json        # Extension manifest
├── tsconfig.json        # TypeScript config
├── webpack.config.js    # Build config
└── package.json         # Dependencies

Configuration Files

manifest.json

Extension manifest configuration:

{
  "manifest_version": 3,
  "name": "BetterSEQTA-Plus",
  "version": "1.0.0",
  "description": "Enhanced SEQTA Learn experience",
  "permissions": [
    "storage",
    "scripting",
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.seqta.com.au/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

TypeScript Configuration

tsconfig.json for type checking:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "moduleResolution": "node"
  }
}