popup.js

import { captureToFigma } from './capture-flow.js';

const captureBtn = document.getElementById('captureBtn');
const pickBtn = document.getElementById('pickBtn');
const statusEl = document.getElementById('status');
const statusTextEl = document.getElementById('statusText');
const btnTextEl = document.getElementById('btnText');
const progressEl = document.getElementById('progress');
const progressBarEl = document.getElementById('progressBar');
const downloadImagesEl = document.getElementById('downloadImages');
const fontOverrideEl = document.getElementById('fontOverride');

// Console signature
console.log(
  '%c Web2Figma %c v1.5.0 ',
  'background:#e94560;color:#fff;padding:4px 8px;border-radius:4px 0 0 4px;font-weight:bold;',
  'background:#333;color:#fff;padding:4px 8px;border-radius:0 4px 4px 0;'
);
console.log('%c Author: Ryujoxys | GitHub: https://github.com/Ryujoxys/Web2Figma ', 'color:#888;');

// Persist checkbox state
if (chrome.storage?.local) {
  chrome.storage.local.get(['downloadImages', 'fontOverride'], data => {
    if (data.downloadImages !== undefined) downloadImagesEl.checked = data.downloadImages;
    if (data.fontOverride !== undefined) fontOverrideEl.checked = data.fontOverride;
  });
  downloadImagesEl.addEventListener('change', () => chrome.storage.local.set({ downloadImages: downloadImagesEl.checked }));
  fontOverrideEl.addEventListener('change', () => chrome.storage.local.set({ fontOverride: fontOverrideEl.checked }));
}

function setStatus(text, type = '') {
  statusTextEl.textContent = text;
  statusEl.className = 'status ' + type;
}

function setProgress(percent) {
  if (percent === null) {
    progressEl.classList.remove('show');
    progressBarEl.style.width = '0%';
  } else {
    progressEl.classList.add('show');
    progressBarEl.style.width = Math.max(0, Math.min(100, percent)) + '%';
  }
}

function setBusy(busy) {
  captureBtn.disabled = busy;
  pickBtn.disabled = busy;
  captureBtn.classList.toggle('loading', busy);
  btnTextEl.textContent = busy ? '捕获中…' : '捕获页面';
}

const onStatus = ({ text, type, progress }) => {
  setStatus(text, type);
  setProgress(progress);
};

async function getActiveTab() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  return tab;
}

captureBtn.addEventListener('click', async () => {
  setBusy(true);
  setStatus('准备中…', 'capturing');
  try {
    const tab = await getActiveTab();
    await captureToFigma({
      tabId: tab.id,
      tabUrl: tab.url,
      downloadImages: downloadImagesEl.checked,
      fontOverride: fontOverrideEl.checked,
      selector: 'body',
      onStatus,
    });
    setProgress(null);
    setStatus('捕获完成！数据已复制到剪贴板', 'done');
    btnTextEl.textContent = '完成 ✓';
    captureBtn.classList.remove('loading');
    setTimeout(() => window.close(), 2000);
  } catch (err) {
    setStatus('错误: ' + err.message, 'error');
    setBusy(false);
    setProgress(null);
  }
});

// Element picker: hand off to the background worker, then close the popup so the
// user can click the page (clicking the page would close the popup anyway).
pickBtn.addEventListener('click', async () => {
  const tab = await getActiveTab();
  await chrome.runtime.sendMessage({ type: 'w2f-start-picker', tabId: tab.id });
  window.close();
});