browser-plugin-creator/templates/content-script/popup.js

A modern scaffolding tool for creating browser extensions with ease

// Popup脚本 - 控制面板

class PopupController {
  constructor() {
    this.init();
  }

  init() {
    this.bindEvents();
    this.loadState();
  }

  bindEvents() {
    // 高亮文本
    document.getElementById('highlightBtn').addEventListener('click', () => {
      this.handleHighlightText();
    });

    // 提取链接
    document.getElementById('extractLinksBtn').addEventListener('click', () => {
      this.handleExtractLinks();
    });

    // 清除高亮
    document.getElementById('clearHighlightsBtn').addEventListener('click', () => {
      this.handleClearHighlights();
    });

    // 获取页面信息
    document.getElementById('getPageInfoBtn').addEventListener('click', () => {
      this.handleGetPageInfo();
    });

    // 回车键触发高亮
    document.getElementById('highlightText').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        this.handleHighlightText();
      }
    });
  }

  async handleHighlightText() {
    const text = document.getElementById('highlightText').value.trim();
    if (!text) {
      this.showResult('请输入要高亮的文本', 'error');
      return;
    }

    try {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      const response = await chrome.tabs.sendMessage(tab.id, {
        type: 'HIGHLIGHT_TEXT',
        data: { text, color: '#ffeb3b' }
      });

      if (response && response.success) {
        this.showResult(`已高亮文本: "${text}"`, 'success');
        this.saveState();
      } else {
        this.showResult('高亮失败', 'error');
      }
    } catch (error) {
      console.error('Error highlighting text:', error);
      this.showResult('无法与页面通信，请刷新页面后重试', 'error');
    }
  }

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

      if (response && response.links) {
        this.displayLinks(response.links);
        this.saveState();
      } else {
        this.showResult('提取链接失败', 'error');
      }
    } catch (error) {
      console.error('Error extracting links:', error);
      this.showResult('无法与页面通信，请刷新页面后重试', 'error');
    }
  }

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

      if (response && response.success) {
        this.showResult('已清除所有高亮', 'success');
        this.saveState();
      }
    } catch (error) {
      console.error('Error clearing highlights:', error);
      this.showResult('无法与页面通信', 'error');
    }
  }

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

      if (response) {
        this.displayPageInfo(response);
        this.saveState();
      } else {
        this.showResult('获取页面信息失败', 'error');
      }
    } catch (error) {
      console.error('Error getting page info:', error);
      this.showResult('无法与页面通信，请刷新页面后重试', 'error');
    }
  }

  displayLinks(links) {
    const container = document.getElementById('resultsContainer');
    container.innerHTML = '';

    if (links.length === 0) {
      container.innerHTML = '<p class="no-results">未找到链接</p>';
      return;
    }

    const list = document.createElement('ul');
    list.className = 'links-list';

    links.slice(0, 10).forEach(link => {
      const li = document.createElement('li');
      li.innerHTML = `
        <a href="${link.href}" target="_blank" class="link-url">${link.text || link.href}</a>
        ${link.external ? '<span class="external">外部</span>' : ''}
      `;
      list.appendChild(li);
    });

    if (links.length > 10) {
      const more = document.createElement('p');
      more.className = 'more-results';
      more.textContent = `还有 ${links.length - 10} 个链接...`;
      list.appendChild(more);
    }

    container.appendChild(list);
  }

  displayPageInfo(info) {
    const container = document.getElementById('resultsContainer');
    container.innerHTML = `
      <div class="page-info">
        <h4>页面信息</h4>
        <p><strong>标题:</strong> ${info.title}</p>
        <p><strong>URL:</strong> ${info.url}</p>
        <p><strong>域名:</strong> ${info.domain}</p>
        <p><strong>描述:</strong> ${info.description || '无'}</p>
        <p><strong>链接数:</strong> ${info.links}</p>
        <p><strong>图片数:</strong> ${info.images}</p>
      </div>
    `;
  }

  showResult(message, type = 'info') {
    const container = document.getElementById('resultsContainer');
    container.innerHTML = `<div class="message ${type}">${message}</div>`;
    
    // 3秒后清除消息
    setTimeout(() => {
      if (container.querySelector('.message')) {
        container.innerHTML = '<p class="placeholder">点击按钮开始操作</p>';
      }
    }, 3000);
  }

  saveState() {
    const state = {
      lastText: document.getElementById('highlightText').value
    };
    chrome.storage.local.set(state);
  }

  loadState() {
    chrome.storage.local.get(['lastText'], (result) => {
      if (result.lastText) {
        document.getElementById('highlightText').value = result.lastText;
      }
    });
  }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  new PopupController();
});