Adding Features

// src/content/features/my-feature.ts
export class MyFeature {
  private enabled = false;
  
  init() {
    this.enabled = true;
    this.setup();
  }
  
  destroy() {
    this.enabled = false;
    this.cleanup();
  }
  
  private setup() {
    // Initialize feature
  }
  
  private cleanup() {
    // Clean up feature
  }
}

// src/content/main.ts
import { MyFeature } from './features/my-feature';

featureManager.register({
  id: 'myFeature',
  name: 'My Feature',
  module: MyFeature
});

// src/background/settings.ts
interface Settings {
  myFeature: {
    enabled: boolean;
    option1: string;
    option2: number;
  };
}

<!-- src/options/options.html -->
<div class="feature-toggle">
  <label>
    <input type="checkbox" data-feature="myFeature">
    My Feature
  </label>
</div>

// src/content/features/example-feature.ts
export class ExampleFeature {
  private enabled = false;
  private observer?: MutationObserver;
  
  init() {
    if (this.enabled) return;
    
    this.enabled = true;
    this.setup();
    this.listenForChanges();
  }
  
  destroy() {
    if (!this.enabled) return;
    
    this.enabled = false;
    this.cleanup();
  }
  
  private setup() {
    // Wait for page to be ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => this.enhance());
    } else {
      this.enhance();
    }
  }
  
  private enhance() {
    // Find elements to enhance
    const elements = document.querySelectorAll('.target-element');
    elements.forEach(element => {
      this.enhanceElement(element);
    });
  }
  
  private enhanceElement(element: Element) {
    // Add enhancement
    element.classList.add('betterseqta-enhanced');
  }
  
  private listenForChanges() {
    // Watch for new elements
    this.observer = new MutationObserver(() => {
      this.enhance();
    });
    
    this.observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }
  
  private cleanup() {
    // Remove enhancements
    document.querySelectorAll('.betterseqta-enhanced').forEach(element => {
      element.classList.remove('betterseqta-enhanced');
    });
    
    // Disconnect observer
    if (this.observer) {
      this.observer.disconnect();
    }
  }
}

// src/shared/features.ts
export interface FeatureConfig {
  id: string;
  name: string;
  description: string;
  category: 'ui' | 'functionality' | 'performance';
  defaultEnabled: boolean;
  dependencies?: string[];
  settings?: Record<string, any>;
}

export const features: FeatureConfig[] = [
  {
    id: 'myFeature',
    name: 'My Feature',
    description: 'Description of my feature',
    category: 'ui',
    defaultEnabled: false,
    settings: {
      option1: 'default',
      option2: 10
    }
  }
];

// tests/features/my-feature.test.ts
describe('MyFeature', () => {
  let feature: MyFeature;
  
  beforeEach(() => {
    feature = new MyFeature();
  });
  
  test('initializes correctly', () => {
    feature.init();
    expect(feature.enabled).toBe(true);
  });
  
  test('cleans up on destroy', () => {
    feature.init();
    feature.destroy();
    expect(feature.enabled).toBe(false);
  });
});

// ✅ Good - Isolated feature
class MyFeature {
  private namespace = 'myFeature';
  
  enhance() {
    // Use namespace for classes/IDs
    element.classList.add(`${this.namespace}-enhanced`);
  }
}

// ❌ Avoid - Global names
element.classList.add('enhanced');

init() {
  try {
    this.setup();
  } catch (error) {
    console.error('MyFeature: Failed to initialize', error);
    // Report to background
    chrome.runtime.sendMessage({
      action: 'error',
      feature: 'myFeature',
      error: error.message
    });
  }
}

// ✅ Good - Debounce expensive operations
const debouncedEnhance = debounce(() => {
  this.enhance();
}, 100);

// ❌ Avoid - Run on every mutation
observer.observe(document.body, {
  callback: this.enhance // Too frequent!
});

class MyFeature {
  private settings: any = {};
  
  async loadSettings() {
    const stored = await chrome.storage.sync.get('myFeature');
    this.settings = stored.myFeature || {};
    this.applySettings();
  }
  
  private applySettings() {
    // Apply settings to feature
  }
}

/**
 * My Feature
 * 
 * Enhances SEQTA Learn with [description].
 * 
 * Features:
 * - Feature 1
 * - Feature 2
 * 
 * Settings:
 * - option1: Description
 * - option2: Description
 * 
 * Usage:
 * ```typescript
 * const feature = new MyFeature();
 * feature.init();
 * ```
 */
export class MyFeature {
  // ...
}