popup.js

/**
 * Popup Script — SourceMap Extractor v5
 * 
 * URL 收集: content script 优先（performance.getEntriesByType），background webRequest 兜底
 * .map 检测: background 负责 fetch（无 CORS）
 * 下载: fire-and-forget + 进度消息
 */

'use strict';

const state = { scanResult: null, isScanning: false, isDownloading: false };
const $ = (id) => document.getElementById(id);

const statusDot = $('statusDot');
const statusText = $('statusText');
const urlPreview = $('urlPreview');
const btnScan = $('btnScan');
const btnDownloadMaps = $('btnDownloadMaps');
const btnDownloadAll = $('btnDownloadAll');
const progressContainer = $('progressContainer');
const progressFill = $('progressFill');
const progressText = $('progressText');
const resultsSection = $('resultsSection');
const resultCount = $('resultCount');
const mapList = $('mapList');
const statsRow = $('statsRow');
const emptyState = $('emptyState');

// ---- 工具 ----

function updateStatus(type, message) {
  statusDot.className = 'dot';
  if (type === 'scanning') statusDot.classList.add('yellow');
  else if (type === 'success') statusDot.classList.add('green');
  else if (type === 'error') statusDot.classList.add('red');
  else statusDot.classList.add('gray');
  statusText.textContent = message;
}

function updateProgress(current, total, extra) {
  progressContainer.style.display = 'block';
  const pct = total > 0 ? Math.round((current / total) * 100) : 0;
  progressFill.style.width = pct + '%';
  progressText.textContent = extra || (current + '/' + total + ' (' + pct + '%)');
}

function showProgress(show) {
  progressContainer.style.display = show ? 'block' : 'none';
}

function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

function escHtml(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function disableButtons(val) {
  btnScan.disabled = val;
  btnDownloadMaps.disabled = val;
  btnDownloadAll.disabled = val;
}

// ---- 渲染 ----

function renderResults(result) {
  if (!result || !result.maps || result.maps.length === 0) {
    resultsSection.style.display = 'none';
    emptyState.style.display = 'block';
    emptyState.innerHTML = '<div class="icon">✅</div><p>未发现 .map 文件泄露</p><p class="hint">已检查 ' + (result.totalJs || '?') + ' 个 JS 文件</p>';
    btnDownloadMaps.disabled = true;
    btnDownloadAll.disabled = true;
    return;
  }

  state.scanResult = result;
  resultsSection.style.display = 'block';
  emptyState.style.display = 'none';
  resultCount.textContent = result.maps.length + ' 个';
  btnDownloadMaps.disabled = false;
  btnDownloadAll.disabled = false;

  let html = '';
  for (const map of result.maps) {
    const jsName = (map.jsUrl || '').split('/').pop().split('?')[0] || '?';
    const mapName = (map.mapUrl || '').split('/').pop().split('?')[0] || '?';
    html += '<div class="map-item"><span class="file-icon">📄</span><div class="file-info">';
    html += '<div class="file-name" title="' + escHtml(map.mapUrl) + '">' + escHtml(mapName) + '</div>';
    html += '<div class="file-meta">JS: ' + escHtml(jsName);
    if (map.jsSize) html += '<span class="tag info">' + formatSize(map.jsSize) + '</span>';
    html += '</div></div></div>';
  }
  mapList.innerHTML = html;

  statsRow.innerHTML =
    '<span class="stat-chip">📜 JS: <strong>' + (result.totalJs || '?') + '</strong></span>' +
    '<span class="stat-chip">🗺️ .map: <strong>' + result.maps.length + '</strong></span>' +
    '<span class="stat-chip">📁 预计源码: <strong>' + (result.maps.length * 30) + '+</strong></span>';

  chrome.action.setBadgeText({ text: String(result.maps.length) });
  chrome.action.setBadgeBackgroundColor({ color: '#e74c3c' });
}

// ---- 收集 JS URL（content 优先，background 兜底） ----

async function collectJsUrls() {
  // 方式1: content script（有 performance.getEntriesByType 历史数据）
  try {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    if (tabs && tabs[0]) {
      const resp = await chrome.tabs.sendMessage(tabs[0].id, { action: 'scan' });
      if (resp && resp.success && resp.data && resp.data.jsUrls.length > 0) {
        return { jsUrls: resp.data.jsUrls, jsCount: resp.data.jsUrls.length, source: 'content' };
      }
    }
  } catch (e) {
    // content script 未注入或页面不能访问
  }

  // 方式2: background webRequest（兜底）
  try {
    const resp = await chrome.runtime.sendMessage({ action: 'getTabJsUrls' });
    if (resp && resp.success && resp.jsUrls && resp.jsUrls.length > 0) {
      return { jsUrls: resp.jsUrls, jsCount: resp.jsUrls.length, source: 'webRequest' };
    }
  } catch (e) { /* ignore */ }

  return { jsUrls: [], jsCount: 0, source: 'none' };
}

// ---- 扫描 ----

async function startScan() {
  if (state.isScanning) return;
  state.isScanning = true;
  btnScan.disabled = true;
  btnScan.innerHTML = '<span class="btn-icon">⏳</span> 扫描中...';
  updateStatus('scanning', '正在收集页面 JS URL...');
  showProgress(false);
  resultsSection.style.display = 'none';
  emptyState.style.display = 'none';

  try {
    const { jsUrls, jsCount, source } = await collectJsUrls();

    if (jsCount === 0) {
      updateStatus('success', '未发现 JS 文件');
      emptyState.style.display = 'block';
      emptyState.innerHTML = '<div class="icon">⚠️</div><p>未发现 JS 文件</p><p class="hint">请确认页面已加载完毕（含动态脚本），然后重新扫描</p>';
      state.isScanning = false;
      btnScan.disabled = false;
      btnScan.innerHTML = '<span class="btn-icon">🔎</span> 重新扫描';
      return;
    }

    updateStatus('scanning', '发现 ' + jsCount + ' 个 JS 文件（来源: ' + source + '），正在检测 .map...');
    updateProgress(0, jsCount, '准备检测...');
    showProgress(true);

    // 发送给 background 检测 sourceMappingURL
    chrome.runtime.sendMessage({ action: 'checkMaps', urls: jsUrls }).catch(() => {});

  } catch (err) {
    console.error('Scan error:', err);
    updateStatus('error', '扫描失败: ' + err.message);
    emptyState.style.display = 'block';
    emptyState.innerHTML = '<div class="icon">⚠️</div><p>扫描出错</p><p class="hint">' + escHtml(err.message) + '</p>';
    state.isScanning = false;
    btnScan.disabled = false;
    btnScan.innerHTML = '<span class="btn-icon">🔎</span> 重新扫描';
  }
}

// ---- 下载 ----

async function downloadMapsOnly() {
  if (state.isDownloading || !state.scanResult || !state.scanResult.maps.length) return;
  state.isDownloading = true;
  disableButtons(true);
  updateStatus('scanning', '下载 .map 文件中...');
  showProgress(true);
  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.runtime.sendMessage({
    action: 'downloadMapsOnly',
    data: { maps: state.scanResult.maps, pageUrl: tabs[0].url },
  }).catch(() => {});
}

async function downloadAllSources() {
  if (state.isDownloading || !state.scanResult || !state.scanResult.maps.length) return;
  state.isDownloading = true;
  disableButtons(true);
  updateStatus('scanning', '下载并解析 .map 文件...');
  showProgress(true);
  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.runtime.sendMessage({
    action: 'downloadAll',
    data: { maps: state.scanResult.maps, pageUrl: tabs[0].url },
  }).catch(() => {});
}

// ---- 消息监听 ----

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'mapsFound') {
    state.isScanning = false;
    btnScan.disabled = false;
    btnScan.innerHTML = '<span class="btn-icon">🔎</span> 重新扫描';
    showProgress(false);

    const data = message.data;
    if (data.maps.length > 0) {
      updateStatus('success', '发现 ' + data.maps.length + ' 个 .map 文件（共 ' + data.totalJs + ' 个 JS）');
      renderResults(data);
    } else {
      updateStatus('success', '未发现 .map 文件（检查了 ' + data.totalJs + ' 个 JS）');
      state.scanResult = null;
      resultsSection.style.display = 'none';
      emptyState.style.display = 'block';
      emptyState.innerHTML = '<div class="icon">✅</div><p>未发现 .map 文件泄露</p><p class="hint">已检查 ' + data.totalJs + ' 个 JS 文件</p>';
    }
  }

  if (message.action === 'progress') {
    const d = message.data;
    if (d.status === 'packing') {
      progressFill.style.background = 'linear-gradient(90deg, #27ae60, #2ecc71)';
      updateProgress(100, 100, '正在打包 ' + d.sourceCount + ' 个源码文件...');
    } else if (d.total && d.current) {
      updateProgress(d.current, d.total, '解析 .map: ' + d.current + '/' + d.total);
    }
  }

  if (message.action === 'downloadComplete') {
    state.isDownloading = false;
    disableButtons(false);
    progressFill.style.width = '100%';
    progressFill.style.background = 'linear-gradient(90deg, #27ae60, #2ecc71)';
    const d = message.data;
    const parts = [];
    const stats = d.typeStats || {};
    for (const ext in stats) {
      if (Object.prototype.hasOwnProperty.call(stats, ext)) parts.push('.' + ext + ':' + stats[ext]);
    }
    let statusMsg = '✅ 下载完成! ' + (d.sourceCount || d.mapCount || '?') + ' 个文件';
    if (d.failedCount > 0) {
      statusMsg += ' · ⚠️ ' + d.failedCount + ' 个 .map 解析失败';
      progressFill.style.background = 'linear-gradient(90deg, #f39c12, #e74c3c)';
    }
    updateStatus(d.failedCount > 0 ? 'error' : 'success', statusMsg);
    progressText.textContent = parts.length > 0 ? '文件类型: ' + parts.join(', ') : '下载完成';
    setTimeout(() => showProgress(false), 5000);
  }

  if (message.action === 'downloadError') {
    state.isDownloading = false;
    disableButtons(false);
    showProgress(false);
    updateStatus('error', '下载失败: ' + ((message.data && message.data.error) || 'unknown'));
  }
});

// ---- 初始化 ----

async function init() {
  try {
    const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
    if (tabs && tabs[0]) {
      urlPreview.textContent = new URL(tabs[0].url).hostname;
    }
  } catch (e) { urlPreview.textContent = ''; }
}

btnScan.addEventListener('click', startScan);
btnDownloadMaps.addEventListener('click', downloadMapsOnly);
btnDownloadAll.addEventListener('click', downloadAllSources);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !state.isScanning) startScan();
  if (e.key === 's' && e.ctrlKey && !state.isScanning) { e.preventDefault(); startScan(); }
});

init();