browser-plugin-creator/templates/full-featured/popup.js

A modern scaffolding tool for creating browser extensions with ease

// 弹出窗口逻辑
class PopupManager {
  constructor() {
    this.settings = {};
    this.monitoring = false;
    this.init();
  }

  async init() {
    await this.loadSettings();
    this.setupEventListeners();
    this.setupTabs();
    this.updateUI();
  }

  async loadSettings() {
    const result = await chrome.storage.sync.get(['settings']);
    this.settings = result.settings || {
      enableNotifications: true,
      autoAnalyze: false,
      theme: 'light'
    };
  }

  async saveSettings() {
    await chrome.storage.sync.set({ settings: this.settings });
  }

  setupEventListeners() {
    // 页面分析
    document.getElementById('analyze-page').addEventListener('click', () => this.analyzePage());

    // 性能监控
    document.getElementById('start-monitoring').addEventListener('click', () => this.startMonitoring());
    document.getElementById('stop-monitoring').addEventListener('click', () => this.stopMonitoring());

    // 设置
    document.getElementById('save-settings').addEventListener('click', () => this.saveCurrentSettings());
    document.getElementById('open-options').addEventListener('click', () => this.openOptions());
    document.getElementById('open-sidepanel').addEventListener('click', () => this.openSidePanel());

    // 工具按钮
    document.querySelectorAll('.tool-btn').forEach(btn => {
      btn.addEventListener('click', (e) => this.handleToolClick(e.target.dataset.tool));
    });
  }

  setupTabs() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');

    tabButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const tabName = btn.dataset.tab;
        
        // 更新按钮状态
        tabButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // 更新内容显示
        tabContents.forEach(content => content.classList.remove('active'));
        document.getElementById(`${tabName}-tab`).classList.add('active');
      });
    });
  }

  async analyzePage() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    try {
      const results = await chrome.tabs.sendMessage(tab.id, { type: 'ANALYZE_PAGE' });
      this.updatePageStats(results);
    } catch (error) {
      console.error('分析页面失败:', error);
      this.showNotification('分析失败', 'error');
    }
  }

  updatePageStats(stats) {
    document.getElementById('element-count').textContent = stats.elementCount || 0;
    document.getElementById('image-count').textContent = stats.imageCount || 0;
    document.getElementById('form-count').textContent = stats.formCount || 0;
  }

  async startMonitoring() {
    this.monitoring = true;
    document.getElementById('start-monitoring').disabled = true;
    document.getElementById('stop-monitoring').disabled = false;

    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    chrome.tabs.sendMessage(tab.id, { type: 'START_MONITORING' });
  }

  stopMonitoring() {
    this.monitoring = false;
    document.getElementById('start-monitoring').disabled = false;
    document.getElementById('stop-monitoring').disabled = true;
  }

  async handleToolClick(tool) {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    switch (tool) {
      case 'screenshot':
        this.takeScreenshot();
        break;
      case 'color-picker':
        chrome.tabs.sendMessage(tab.id, { type: 'ACTIVATE_COLOR_PICKER' });
        break;
      case 'ruler':
        chrome.tabs.sendMessage(tab.id, { type: 'ACTIVATE_RULER' });
        break;
      case 'validator':
        this.validatePage();
        break;
    }
  }

  async takeScreenshot() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const dataUrl = await chrome.tabs.captureVisibleTab();
    
    // 创建下载链接
    const a = document.createElement('a');
    a.href = dataUrl;
    a.download = `screenshot-${Date.now()}.png`;
    a.click();
  }

  async validatePage() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const results = await chrome.tabs.sendMessage(tab.id, { type: 'VALIDATE_PAGE' });
    
    this.showNotification(`验证完成: ${results.errors} 个错误, ${results.warnings} 个警告`);
  }

  async saveCurrentSettings() {
    this.settings.enableNotifications = document.getElementById('enable-notifications').checked;
    this.settings.autoAnalyze = document.getElementById('auto-analyze').checked;
    this.settings.theme = document.getElementById('theme-select').value;

    await this.saveSettings();
    this.showNotification('设置已保存');
  }

  openOptions() {
    chrome.runtime.openOptionsPage();
    window.close();
  }

  openSidePanel() {
    chrome.sidePanel.open({ windowId: chrome.windows.WINDOW_ID_CURRENT });
    window.close();
  }

  updateUI() {
    document.getElementById('enable-notifications').checked = this.settings.enableNotifications;
    document.getElementById('auto-analyze').checked = this.settings.autoAnalyze;
    document.getElementById('theme-select').value = this.settings.theme;
  }

  showNotification(message, type = 'info') {
    if (!this.settings.enableNotifications) return;

    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon48.png',
      title: '{{name}}',
      message: message
    });
  }
}

// 初始化
new PopupManager();