Skip to main content
The extension uses multiple layers of testing and validation to ensure code quality and browser compatibility.

​
Unit Tests

The project uses Vitest for unit testing.

​
Running Tests

npm run test

​
Test Configuration

Tests are configured in vitest.config.js: 
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node',
    include: ['tests/**/*.test.js'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'html'],
      include: ['src/lib/**/*.js']
    }
  }
});

​
Test Coverage

Tests focus on the shared utilities in src/lib/**/*.js. Coverage reports are generated in both text and HTML formats.

​
Linting

The project uses ESLint with security plugins to catch code quality issues.

​
Running the Linter

npm run lint

​
Linting Rules

The ESLint configuration (eslint.config.js) enforces:
  • Security rules via eslint-plugin-security
    • Detects unsafe regex patterns
    • Prevents eval and similar dangerous patterns
    • Warns about potential timing attacks
    • Catches buffer and child process issues
  • JavaScript best practices
    • No eval() or new Function()
    • No implied eval
    • Modern ES2022 syntax

​
Example Security Rules

rules: {
  'security/detect-unsafe-regex': 'error',
  'security/detect-eval-with-expression': 'error',
  'security/detect-possible-timing-attacks': 'warn',
  'no-eval': 'error',
  'no-implied-eval': 'error',
  'no-new-func': 'error',
}

​
Chrome Validation

Validate the Chrome extension build with a custom validation script: 
npm run validate:chrome
This command:
1

Builds the Chrome extension

Runs npm run build:chrome first
2

Validates manifest.json

  • Checks manifest version is 3
  • Verifies required fields (name, version, description)
  • Validates version format (X.Y.Z)
  • Checks name length (max 45 characters)
  • Checks description length (max 132 characters)
3

Validates icons

  • Checks manifest icons exist (16, 32, 48, 128px)
  • Validates action icons
4

Validates service worker

Ensures background service worker file exists
5

Validates content scripts

Verifies all content script files exist
6

Validates popup

Checks that popup HTML file exists
7

Checks permissions

Warns about potentially dangerous permissions
8

Validates Manifest V3 compliance

  • Ensures no inline scripts in HTML files
  • Checks for inline event handlers (not allowed in MV3)

​
Chrome Validator Output

The validator provides detailed feedback: 
🔍 Chrome Extension Validator
========================================

✅ Manifest version 3
✅ Required fields present
✅ Manifest icons validated
✅ Action icons validated
✅ Service worker exists
✅ Content scripts validated
✅ Popup exists
✅ Permissions checked
✅ No inline scripts detected

========================================
✅ Chrome extension validation passed!

​
Firefox Validation

Validate the Firefox extension build using Mozilla’s official linter: 
npm run validate:firefox
This command:
1

Builds the Firefox extension

Runs npm run build:firefox first
2

Runs addons-linter

Uses Mozilla’s addons-linter to validate:
  • Manifest structure
  • File references
  • Permission usage
  • Firefox compatibility
  • Security issues

​
addons-linter

The official Mozilla tool checks for:
  • Valid JSON in manifest.json
  • Proper use of WebExtension APIs
  • Security vulnerabilities
  • Compatibility with Firefox versions
  • Missing or invalid files

​
Complete Validation Workflow

Run all validations at once: 
npm run validate
This comprehensive command executes the full validation workflow:
1

Run linting

npm run lint
Checks all source files for code quality and security issues
2

Run unit tests

npm run test
Executes all unit tests to ensure functionality
3

Validate Chrome build

npm run validate:chrome
Builds and validates Chrome extension
4

Validate Firefox build

npm run validate:firefox
Builds and validates Firefox extension

​
Integration with Release Process

The complete validation is run automatically during the release process: 
npm run release
This ensures all code quality checks pass before creating distribution packages.

​
Continuous Integration

For CI/CD pipelines, use the validate command: 
# Example GitHub Actions workflow
- name: Install dependencies
  run: npm install

- name: Run validation
  run: npm run validate

​
Writing Tests

Tests are located in the tests/ directory: 
tests/
└── url-params.test.js

​
Example Test Structure

import { describe, it, expect } from 'vitest';
import { someFunction } from '../src/lib/utils.js';

describe('URL Parameter Handling', () => {
  it('should add debug parameter to URL', () => {
    const url = 'https://example.com';
    const result = addDebugParam(url);
    expect(result).toBe('https://example.com?hsDebug=true');
  });

  it('should preserve existing parameters', () => {
    const url = 'https://example.com?foo=bar';
    const result = addDebugParam(url);
    expect(result).toBe('https://example.com?foo=bar&hsDebug=true');
  });
});

​
Troubleshooting

​
Tests Failing

If tests fail:
  • Check test output for specific failure messages
  • Ensure dependencies are installed: npm install
  • Verify test files are in tests/**/*.test.js
  • Run in watch mode for faster debugging: npm run test:watch

​
Linting Errors

If linting fails:
  • Review the error messages for specific issues
  • Try auto-fix: npm run lint:fix
  • Check that you’re not using eval() or similar dangerous patterns
  • Ensure proper indentation and syntax

​
Validation Failures

If browser validation fails:
  • Chrome: Check the validator output for specific errors
    • Verify all referenced files exist
    • Ensure no inline scripts in HTML
    • Check manifest field values
  • Firefox: Review addons-linter output
    • Check for Firefox-specific API compatibility
    • Verify browser_specific_settings in manifest
    • Ensure all permissions are valid

​
Build Not Found

If validation says build not found: 
# Build first, then validate
npm run build:chrome
npm run validate:chrome
Or use the validation command which builds automatically: 
npm run validate:chrome  # Builds and validates

Build docs developers (and LLMs) love

Get started for freeTalk to us