browser-plugin-creator/templates/devtools/devtools.js

A modern scaffolding tool for creating browser extensions with ease

// DevTools面板逻辑
let selectedElement = null;
let logs = [];

// 初始化DevTools面板
document.addEventListener('DOMContentLoaded', function() {
  console.log('{{name}} DevTools面板已加载');
  
  // 设置事件监听器
  document.getElementById('inspect-element').addEventListener('click', inspectElement);
  document.getElementById('clear-console').addEventListener('click', clearConsole);
  document.getElementById('export-data').addEventListener('click', exportData);
  
  // 监听来自内容脚本的消息
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'ELEMENT_SELECTED') {
      displayElementInfo(message.data);
    } else if (message.type === 'CONSOLE_LOG') {
      addLog(message.data);
    }
  });
});

// 检查元素
function inspectElement() {
  chrome.devtools.inspectedWindow.eval(
    'inspect(document.body)',
    (result, isException) => {
      if (isException) {
        console.error('检查元素失败:', isException);
      }
    }
  );
}

// 显示元素信息
function displayElementInfo(elementData) {
  const detailsElement = document.getElementById('element-details');
  detailsElement.textContent = JSON.stringify(elementData, null, 2);
  selectedElement = elementData;
}

// 添加日志
function addLog(logData) {
  logs.push({
    timestamp: new Date().toISOString(),
    data: logData
  });
  
  const logsContainer = document.getElementById('logs');
  const logEntry = document.createElement('div');
  logEntry.className = 'log-entry';
  logEntry.innerHTML = `
    <div class="log-timestamp">${new Date().toLocaleTimeString()}</div>
    <div class="log-content">${JSON.stringify(logData)}</div>
  `;
  logsContainer.appendChild(logEntry);
}

// 清空控制台
function clearConsole() {
  logs = [];
  document.getElementById('logs').innerHTML = '';
}

// 导出数据
function exportData() {
  const data = {
    selectedElement,
    logs,
    exportTime: new Date().toISOString()
  };
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '{{name}}-devtools-export.json';
  a.click();
  URL.revokeObjectURL(url);
}