browser-plugin-creator/templates/basic-popup/popup.js

A modern scaffolding tool for creating browser extensions with ease

// 获取DOM元素
const actionBtn = document.getElementById('actionBtn');
const result = document.getElementById('result');

// 初始化
function init() {
  console.log('{{name}} popup loaded');
  
  // 加载保存的设置
  loadSettings();
  
  // 添加事件监听器
  actionBtn.addEventListener('click', handleAction);
}

// 处理按钮点击
async function handleAction() {
  try {
    actionBtn.disabled = true;
    actionBtn.textContent = '处理中...';
    
    // 获取当前活动标签页
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    if (!tab) {
      throw new Error('无法获取当前标签页');
    }
    
    // 向内容脚本发送消息
    const response = await chrome.tabs.sendMessage(tab.id, {
      type: 'GET_PAGE_INFO'
    }).catch(() => null);
    
    // 显示结果
    if (response) {
      showResult(`页面标题: ${response.title}`, 'success');
    } else {
      showResult(`当前页面: ${tab.title || '未知页面'}`, 'success');
    }
    
  } catch (error) {
    console.error('Error:', error);
    showResult(`错误: ${error.message}`, 'error');
  } finally {
    actionBtn.disabled = false;
    actionBtn.textContent = '点击我';
  }
}

// 显示结果
function showResult(message, type = 'info') {
  result.textContent = message;
  result.className = `result ${type}`;
  
  // 保存到存储
  chrome.storage.local.set({
    lastResult: {
      message,
      type,
      timestamp: new Date().toISOString()
    }
  });
}

// 加载设置
async function loadSettings() {
  try {
    const { lastResult } = await chrome.storage.local.get(['lastResult']);
    if (lastResult) {
      showResult(lastResult.message, lastResult.type);
    }
  } catch (error) {
    console.error('无法加载设置:', error);
  }
}

// 初始化应用
document.addEventListener('DOMContentLoaded', init);