1379 lines
48 KiB
JavaScript
1379 lines
48 KiB
JavaScript
/**
|
||
* DevTools Panel Script - 使用 DevTools Network API 捕获 XHR 请求
|
||
* 纯 JavaScript 实现，完全符合 Manifest V3 CSP 规范
|
||
*/
|
||
|
||
// MD5 函数（使用 CryptoJS）
|
||
function MD5(str) {
|
||
if (typeof CryptoJS === 'undefined' || !CryptoJS.MD5) {
|
||
console.warn('CryptoJS.MD5 不可用，请确保已引入 crypto-js.min.js');
|
||
return null;
|
||
}
|
||
if (!str) return null;
|
||
try {
|
||
return CryptoJS.MD5(str);
|
||
} catch (error) {
|
||
console.error('MD5 计算失败:', error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// 工具函数
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// 复制到剪贴板（参考 chromeEvent 的成功实现）
|
||
function copyToClipboard(text) {
|
||
// 创建一个临时的textarea元素
|
||
const textarea = document.createElement('textarea');
|
||
textarea.value = text;
|
||
textarea.style.position = 'fixed';
|
||
textarea.style.left = '-9999px';
|
||
textarea.style.top = '-9999px';
|
||
document.body.appendChild(textarea);
|
||
|
||
try {
|
||
textarea.select();
|
||
textarea.setSelectionRange(0, 99999); // 兼容移动设备
|
||
|
||
const successful = document.execCommand('copy');
|
||
|
||
document.body.removeChild(textarea);
|
||
|
||
return successful;
|
||
} catch (err) {
|
||
console.error('复制失败:', err);
|
||
if (textarea.parentNode) {
|
||
document.body.removeChild(textarea);
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 显示复制成功提示
|
||
function showCopyNotification(message, duration = 2000) {
|
||
// 移除已存在的提示
|
||
const existing = document.getElementById('copy-notification');
|
||
if (existing) {
|
||
existing.remove();
|
||
}
|
||
|
||
const notification = document.createElement('div');
|
||
notification.id = 'copy-notification';
|
||
notification.textContent = message;
|
||
Object.assign(notification.style, {
|
||
position: 'fixed',
|
||
top: '20px',
|
||
right: '20px',
|
||
background: '#4ec9b0',
|
||
color: 'white',
|
||
padding: '12px 20px',
|
||
borderRadius: '6px',
|
||
fontSize: '14px',
|
||
fontWeight: 'bold',
|
||
zIndex: '10000',
|
||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
||
animation: 'slideIn 0.3s ease-out'
|
||
});
|
||
|
||
// 添加动画样式
|
||
if (!document.getElementById('copy-notification-style')) {
|
||
const animationStyle = document.createElement('style');
|
||
animationStyle.id = 'copy-notification-style';
|
||
animationStyle.textContent = `
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes slideOut {
|
||
from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
||
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
||
}
|
||
`;
|
||
document.head.appendChild(animationStyle);
|
||
}
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
setTimeout(() => {
|
||
notification.style.animation = 'slideOut 0.3s ease-out';
|
||
setTimeout(() => {
|
||
if (notification.parentNode) {
|
||
notification.remove();
|
||
}
|
||
}, 300);
|
||
}, duration);
|
||
}
|
||
|
||
// 创建复制按钮
|
||
function createCopyButton(text, label = '复制') {
|
||
const button = document.createElement('button');
|
||
button.className = 'copy-btn';
|
||
|
||
const styles = getStyles();
|
||
const isLightTheme = state.theme === 'light';
|
||
|
||
// 主题颜色
|
||
const primaryColor = isLightTheme ? '#1890ff' : '#4ec9b0';
|
||
const hoverColor = isLightTheme ? '#40a9ff' : '#3fb89a';
|
||
const successColor = isLightTheme ? '#52c41a' : '#68d391';
|
||
|
||
// 图标 SVG（更美观的复制图标）
|
||
const copyIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||
</svg>`;
|
||
|
||
const checkIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>`;
|
||
|
||
button.innerHTML = `<span class="copy-icon">${copyIcon}</span><span class="copy-text">${label}</span>`;
|
||
button.title = '复制到剪贴板';
|
||
|
||
Object.assign(button.style, {
|
||
background: primaryColor,
|
||
color: 'white',
|
||
border: 'none',
|
||
padding: '6px 14px',
|
||
borderRadius: '6px',
|
||
cursor: 'pointer',
|
||
fontSize: (state.fontSize - 1) + 'px',
|
||
fontWeight: '500',
|
||
marginLeft: '8px',
|
||
marginTop: '5px',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: '6px',
|
||
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||
boxShadow: isLightTheme
|
||
? '0 2px 4px rgba(24, 144, 255, 0.2)'
|
||
: '0 2px 6px rgba(78, 201, 176, 0.25)',
|
||
position: 'relative',
|
||
overflow: 'hidden',
|
||
outline: 'none',
|
||
userSelect: 'none'
|
||
});
|
||
|
||
// 图标和文字样式
|
||
const iconSpan = button.querySelector('.copy-icon');
|
||
const textSpan = button.querySelector('.copy-text');
|
||
|
||
if (iconSpan) {
|
||
Object.assign(iconSpan.style, {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '14px',
|
||
height: '14px',
|
||
transition: 'transform 0.25s'
|
||
});
|
||
}
|
||
|
||
if (textSpan) {
|
||
Object.assign(textSpan.style, {
|
||
display: 'inline-block',
|
||
lineHeight: '1'
|
||
});
|
||
}
|
||
|
||
// 悬停效果
|
||
button.onmouseenter = () => {
|
||
button.style.background = hoverColor;
|
||
button.style.transform = 'translateY(-1px)';
|
||
button.style.boxShadow = isLightTheme
|
||
? '0 4px 8px rgba(64, 169, 255, 0.3)'
|
||
: '0 4px 10px rgba(63, 184, 154, 0.35)';
|
||
if (iconSpan) {
|
||
iconSpan.style.transform = 'scale(1.1)';
|
||
}
|
||
};
|
||
|
||
button.onmouseleave = () => {
|
||
if (!button.dataset.copied) {
|
||
button.style.background = primaryColor;
|
||
button.style.transform = 'translateY(0)';
|
||
button.style.boxShadow = isLightTheme
|
||
? '0 2px 4px rgba(24, 144, 255, 0.2)'
|
||
: '0 2px 6px rgba(78, 201, 176, 0.25)';
|
||
if (iconSpan) {
|
||
iconSpan.style.transform = 'scale(1)';
|
||
}
|
||
}
|
||
};
|
||
|
||
// 点击效果
|
||
button.onmousedown = () => {
|
||
button.style.transform = 'translateY(0) scale(0.98)';
|
||
};
|
||
|
||
button.onmouseup = () => {
|
||
if (!button.dataset.copied) {
|
||
button.style.transform = 'translateY(-1px)';
|
||
}
|
||
};
|
||
|
||
// 复制功能
|
||
button.onclick = (e) => {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
|
||
// 点击动画
|
||
button.style.transform = 'scale(0.95)';
|
||
setTimeout(() => {
|
||
button.style.transform = '';
|
||
}, 100);
|
||
|
||
const success = copyToClipboard(text);
|
||
if (success) {
|
||
showCopyNotification('✅ 已复制到剪贴板');
|
||
button.innerHTML = `<span class="copy-icon">${checkIcon}</span><span class="copy-text">已复制</span>`;
|
||
button.style.background = successColor;
|
||
button.style.boxShadow = isLightTheme
|
||
? '0 2px 4px rgba(82, 196, 26, 0.3)'
|
||
: '0 2px 6px rgba(104, 211, 145, 0.35)';
|
||
button.dataset.copied = 'true';
|
||
|
||
setTimeout(() => {
|
||
button.innerHTML = `<span class="copy-icon">${copyIcon}</span><span class="copy-text">${label}</span>`;
|
||
button.style.background = primaryColor;
|
||
button.style.boxShadow = isLightTheme
|
||
? '0 2px 4px rgba(24, 144, 255, 0.2)'
|
||
: '0 2px 6px rgba(78, 201, 176, 0.25)';
|
||
delete button.dataset.copied;
|
||
|
||
// 重新获取图标和文字元素
|
||
const newIconSpan = button.querySelector('.copy-icon');
|
||
const newTextSpan = button.querySelector('.copy-text');
|
||
if (newIconSpan) {
|
||
Object.assign(newIconSpan.style, {
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '14px',
|
||
height: '14px',
|
||
transition: 'transform 0.25s'
|
||
});
|
||
}
|
||
if (newTextSpan) {
|
||
Object.assign(newTextSpan.style, {
|
||
display: 'inline-block',
|
||
lineHeight: '1'
|
||
});
|
||
}
|
||
}, 2000);
|
||
} else {
|
||
showCopyNotification('❌ 复制失败，请手动复制');
|
||
// 失败时添加抖动动画
|
||
button.style.animation = 'shake 0.4s';
|
||
setTimeout(() => {
|
||
button.style.animation = '';
|
||
}, 400);
|
||
}
|
||
};
|
||
|
||
return button;
|
||
}
|
||
|
||
// AES 解密函数
|
||
function decryptData(word, keyStr) {
|
||
if (!word || !keyStr) return null;
|
||
try {
|
||
if (typeof CryptoJS === 'undefined') return null;
|
||
const decrypt = CryptoJS.AES.decrypt(word, CryptoJS.enc.Utf8.parse(keyStr), {
|
||
mode: CryptoJS.mode.ECB,
|
||
padding: CryptoJS.pad.Pkcs7,
|
||
});
|
||
return decrypt.toString(CryptoJS.enc.Utf8);
|
||
} catch (error) {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function Decrypt(word, keyStr) {
|
||
if (!word || !keyStr) return null;
|
||
try {
|
||
const cleanData = word.replace(/\s/g, '').replace(/"/g, '');
|
||
const cleanKey = keyStr.replace(/\s/g, '').replace(/"/g, '');
|
||
const decrypt = CryptoJS.AES.decrypt(cleanData, CryptoJS.enc.Utf8.parse(cleanKey), {
|
||
mode: CryptoJS.mode.ECB,
|
||
padding: CryptoJS.pad.Pkcs7,
|
||
});
|
||
return decrypt.toString(CryptoJS.enc.Utf8) || null;
|
||
} catch (error) {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// JSON 语法高亮
|
||
function highlightJson(jsonString) {
|
||
if (!jsonString) return '';
|
||
try {
|
||
let parsed;
|
||
try {
|
||
parsed = JSON.parse(jsonString);
|
||
} catch (e) {
|
||
if (typeof JSON5 !== 'undefined') {
|
||
try {
|
||
parsed = JSON5.parse(jsonString);
|
||
} catch (e2) {
|
||
return escapeHtml(jsonString);
|
||
}
|
||
} else {
|
||
return escapeHtml(jsonString);
|
||
}
|
||
}
|
||
|
||
const formatted = JSON.stringify(parsed, null, 2);
|
||
const isLightTheme = document.body.classList.contains('light-theme');
|
||
const colors = {
|
||
key: isLightTheme ? '#881391' : '#c678dd',
|
||
string: isLightTheme ? '#0b7500' : '#98c379',
|
||
number: isLightTheme ? '#1c00cf' : '#61afef',
|
||
boolean: isLightTheme ? '#0b7500' : '#56b6c2',
|
||
null: isLightTheme ? '#808080' : '#c678dd',
|
||
punctuation: isLightTheme ? '#000000' : '#abb2bf'
|
||
};
|
||
|
||
let highlighted = formatted
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>');
|
||
|
||
highlighted = highlighted.replace(/([{}[\]])/g, `<span style="color: ${colors.punctuation}">$1</span>`);
|
||
highlighted = highlighted.replace(/(:\s*)("(?:[^"\\]|\\.)*")/g, `$1<span style="color: ${colors.string}">$2</span>`);
|
||
highlighted = highlighted.replace(/(\[\s*)("(?:[^"\\]|\\.)*")/g, `$1<span style="color: ${colors.string}">$2</span>`);
|
||
highlighted = highlighted.replace(/(,\s*)("(?:[^"\\]|\\.)*")/g, (match, p1, p2) => {
|
||
if (match.includes('color')) return match;
|
||
return p1 + `<span style="color: ${colors.string}">${p2}</span>`;
|
||
});
|
||
highlighted = highlighted.replace(/(:\s*)(-?\d+\.?\d*(?:[eE][+-]?\d+)?)(?=\s*[,}\]]|$)/g, (match, p1, p2) => {
|
||
if (match.includes('<span')) return match;
|
||
return p1 + `<span style="color: ${colors.number}">${p2}</span>`;
|
||
});
|
||
highlighted = highlighted.replace(/(\[[^\]]*?)(-?\d+\.?\d*(?:[eE][+-]?\d+)?)(?=\s*[,}\]]|$)/g, (match, p1, p2) => {
|
||
if (match.includes('<span')) return match;
|
||
return p1 + `<span style="color: ${colors.number}">${p2}</span>`;
|
||
});
|
||
highlighted = highlighted.replace(/(,\s*)(-?\d+\.?\d*(?:[eE][+-]?\d+)?)(?=\s*[,}\]]|$)/g, (match, p1, p2) => {
|
||
if (match.includes('<span')) return match;
|
||
return p1 + `<span style="color: ${colors.number}">${p2}</span>`;
|
||
});
|
||
highlighted = highlighted.replace(/(:\s*)(true|false|null)\b/g, (match, p1, p2) => {
|
||
if (match.includes('<span')) return match;
|
||
const color = p2 === 'null' ? colors.null : colors.boolean;
|
||
return p1 + `<span style="color: ${color}">${p2}</span>`;
|
||
});
|
||
highlighted = highlighted.replace(/("(?:[^"\\]|\\.)*")\s*:/g, (match, p1) => {
|
||
if (match.includes('<span')) return match;
|
||
return `<span style="color: ${colors.key}">${p1}</span><span style="color: ${colors.punctuation}">:</span>`;
|
||
});
|
||
|
||
return highlighted;
|
||
} catch (error) {
|
||
return escapeHtml(jsonString);
|
||
}
|
||
}
|
||
|
||
// 状态管理（纯 JavaScript）
|
||
const state = {
|
||
requests: [],
|
||
fontSize: 12,
|
||
theme: 'dark'
|
||
};
|
||
|
||
// 样式计算
|
||
function getStyles() {
|
||
const isLightTheme = state.theme === 'light';
|
||
return {
|
||
toolbar: {
|
||
background: isLightTheme ? '#f8f9fa' : '#1a202c',
|
||
borderColor: isLightTheme ? '#e9ecef' : '#4a5568',
|
||
color: isLightTheme ? '#333' : '#e2e8f0'
|
||
},
|
||
item: {
|
||
background: isLightTheme ? '#ffffff' : '#2d3748',
|
||
borderColor: isLightTheme ? '#e0e0e0' : '#4a5568',
|
||
color: isLightTheme ? '#333' : '#e2e8f0'
|
||
},
|
||
subText: {
|
||
color: isLightTheme ? '#666' : '#a0aec0'
|
||
},
|
||
pre: {
|
||
background: isLightTheme ? '#f8f9fa' : '#1a202c',
|
||
color: isLightTheme ? '#333' : '#e2e8f0',
|
||
borderColor: isLightTheme ? '#e9ecef' : '#4a5568'
|
||
}
|
||
};
|
||
}
|
||
|
||
// 工具函数
|
||
function formatTimestamp(timestamp) {
|
||
const date = new Date(timestamp);
|
||
return {
|
||
date: date.toLocaleDateString(),
|
||
time: date.toLocaleTimeString()
|
||
};
|
||
}
|
||
|
||
function applyTheme() {
|
||
const body = document.body;
|
||
if (state.theme === 'light') {
|
||
body.classList.add('light-theme');
|
||
body.classList.remove('dark-theme');
|
||
} else {
|
||
body.classList.add('dark-theme');
|
||
body.classList.remove('light-theme');
|
||
}
|
||
}
|
||
|
||
function saveFontSize() {
|
||
chrome.storage.local.set({ fontSize: state.fontSize });
|
||
}
|
||
|
||
function saveTheme() {
|
||
chrome.storage.local.set({ theme: state.theme });
|
||
}
|
||
|
||
function loadSettings() {
|
||
chrome.storage.local.get(['fontSize', 'theme'], (result) => {
|
||
if (result.fontSize) {
|
||
state.fontSize = Math.max(8, Math.min(24, parseInt(result.fontSize) || 12));
|
||
}
|
||
if (result.theme) {
|
||
state.theme = result.theme;
|
||
}
|
||
applyTheme();
|
||
render();
|
||
});
|
||
}
|
||
|
||
// 字体大小控制
|
||
function decreaseFontSize() {
|
||
state.fontSize = Math.max(8, state.fontSize - 1);
|
||
saveFontSize();
|
||
render();
|
||
}
|
||
|
||
function increaseFontSize() {
|
||
state.fontSize = Math.min(24, state.fontSize + 1);
|
||
saveFontSize();
|
||
render();
|
||
}
|
||
|
||
function toggleTheme() {
|
||
state.theme = state.theme === 'dark' ? 'light' : 'dark';
|
||
applyTheme();
|
||
saveTheme();
|
||
render();
|
||
}
|
||
|
||
// 清除所有请求
|
||
function clearRequests() {
|
||
state.requests = [];
|
||
render();
|
||
console.log('✅ 已清除所有请求记录');
|
||
}
|
||
|
||
// 请求处理
|
||
function processRequest(request) {
|
||
if (!request.request || !request.request.url || !request.request.method) {
|
||
return;
|
||
}
|
||
|
||
const url = request.request.url;
|
||
const method = request.request.method;
|
||
|
||
// 调试日志
|
||
console.log('📡 捕获到请求:', method, url);
|
||
|
||
// 1. 过滤 base64 data URI（如 base64 图片）
|
||
if (url.startsWith('data:') || url.startsWith('blob:')) {
|
||
console.log('⏭️ 跳过 Data/Blob URI:', url.substring(0, 50) + '...');
|
||
return;
|
||
}
|
||
|
||
// 2. 过滤静态资源文件扩展名
|
||
const urlLower = url.toLowerCase();
|
||
const skipExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.svg', '.ico', '.webp',
|
||
'.css', '.js', '.woff', '.woff2', '.ttf', '.eot',
|
||
'.mp4', '.mp3', '.avi', '.mov', '.pdf'];
|
||
const isResourceFile = skipExtensions.some(ext => urlLower.includes(ext));
|
||
if (isResourceFile) {
|
||
console.log('⏭️ 跳过静态资源:', url);
|
||
return;
|
||
}
|
||
|
||
// 3. 检查是否为真实的 XHR/Fetch 请求（参考 chromeEvent 的实现）
|
||
// 获取 Accept 头
|
||
let acceptHeader = null;
|
||
let contentTypeHeader = null;
|
||
|
||
if (request.request.headers) {
|
||
request.request.headers.forEach(h => {
|
||
const headerName = h.name.toLowerCase();
|
||
if (headerName === 'accept') {
|
||
acceptHeader = h.value;
|
||
}
|
||
if (headerName === 'content-type') {
|
||
contentTypeHeader = h.value;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 判断是否为 XHR 请求：
|
||
// - Accept 头包含 application/json 或 application/x-www-form-urlencoded
|
||
// - 或者 Content-Type 是 application/json
|
||
// - 或者请求方法是 POST/PUT/PATCH/DELETE（通常是 API 请求）
|
||
const isJsonAccept = acceptHeader && (
|
||
acceptHeader.includes('application/json') ||
|
||
acceptHeader.includes('application/x-www-form-urlencoded')
|
||
);
|
||
const isJsonContentType = contentTypeHeader && contentTypeHeader.includes('application/json');
|
||
const isApiMethod = ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method.toUpperCase());
|
||
const isGetMethod = method.toUpperCase() === 'GET';
|
||
|
||
// 判断逻辑：
|
||
// 1. 如果有 Accept: application/json 或 Content-Type: application/json，肯定是 XHR
|
||
// 2. 如果是 POST/PUT/PATCH/DELETE，认为是 API 请求
|
||
// 3. 如果是 GET，必须要有 Accept: application/json 才能认为是 XHR
|
||
let isLikelyXhr = false;
|
||
if (isJsonAccept || isJsonContentType) {
|
||
// 有明确的 JSON 请求头，肯定是 XHR
|
||
isLikelyXhr = true;
|
||
} else if (isApiMethod) {
|
||
// POST/PUT/PATCH/DELETE 通常是 API 请求
|
||
isLikelyXhr = true;
|
||
} else if (isGetMethod) {
|
||
// GET 请求必须有 Accept: application/json 才能认为是 XHR
|
||
isLikelyXhr = false;
|
||
}
|
||
|
||
if (!isLikelyXhr) {
|
||
console.log('⏭️ 跳过非 XHR 请求:', url, {
|
||
accept: acceptHeader,
|
||
contentType: contentTypeHeader,
|
||
method: method
|
||
});
|
||
return;
|
||
}
|
||
|
||
console.log('✅ 确认为 XHR 请求:', url, {
|
||
accept: acceptHeader,
|
||
contentType: contentTypeHeader,
|
||
method: method
|
||
});
|
||
|
||
let requestData = '无请求数据';
|
||
if (request.request.postData) {
|
||
try {
|
||
requestData = JSON.stringify(JSON.parse(request.request.postData.text), null, 2);
|
||
} catch (e) {
|
||
requestData = request.request.postData.text;
|
||
}
|
||
}
|
||
|
||
const requestHeaders = {};
|
||
const requestHeadersOriginal = {};
|
||
if (request.request.headers) {
|
||
request.request.headers.forEach(h => {
|
||
const lowerName = h.name.toLowerCase();
|
||
requestHeaders[lowerName] = h.value;
|
||
requestHeadersOriginal[h.name] = h.value;
|
||
});
|
||
}
|
||
|
||
const responseHeaders = {};
|
||
if (request.response && request.response.headers) {
|
||
request.response.headers.forEach(h => {
|
||
const lowerName = h.name.toLowerCase();
|
||
responseHeaders[lowerName] = h.value;
|
||
});
|
||
}
|
||
|
||
request.getContent((content, encoding) => {
|
||
let responseData = '无响应数据';
|
||
let responseDataRaw = null;
|
||
|
||
if (content) {
|
||
if (typeof content === 'string') {
|
||
responseDataRaw = content.trim();
|
||
} else {
|
||
try {
|
||
if (content instanceof ArrayBuffer) {
|
||
const bytes = new Uint8Array(content);
|
||
responseDataRaw = String.fromCharCode.apply(null, bytes);
|
||
} else if (content instanceof Uint8Array) {
|
||
responseDataRaw = String.fromCharCode.apply(null, content);
|
||
} else {
|
||
responseDataRaw = String(content);
|
||
}
|
||
responseDataRaw = responseDataRaw.trim();
|
||
} catch (e) {
|
||
responseDataRaw = String(content);
|
||
}
|
||
}
|
||
|
||
try {
|
||
const parsed = JSON.parse(responseDataRaw);
|
||
responseData = JSON.stringify(parsed, null, 2);
|
||
} catch (e) {
|
||
responseData = responseDataRaw;
|
||
}
|
||
}
|
||
|
||
let time = requestHeaders['time'] || '';
|
||
let traceId = requestHeaders['traceid'] || '';
|
||
let uuid = requestHeaders['uuid'] || '';
|
||
|
||
if (!time) {
|
||
for (const key in requestHeadersOriginal) {
|
||
if (key.toLowerCase() === 'time') {
|
||
time = requestHeadersOriginal[key];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!traceId) {
|
||
const possibleKeys = ['TraceId', 'trace-id', 'traceId', 'TRACEID', 'Trace-ID'];
|
||
for (const key of possibleKeys) {
|
||
if (requestHeadersOriginal[key]) {
|
||
traceId = requestHeadersOriginal[key];
|
||
break;
|
||
}
|
||
}
|
||
if (!traceId) {
|
||
for (const key in requestHeadersOriginal) {
|
||
if (key.toLowerCase().includes('trace')) {
|
||
traceId = requestHeadersOriginal[key];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!uuid) {
|
||
for (const key in requestHeadersOriginal) {
|
||
if (key.toLowerCase() === 'uuid') {
|
||
uuid = requestHeadersOriginal[key];
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!uuid) {
|
||
uuid = responseHeaders['uuid'] || responseHeaders['UUID'] || '';
|
||
}
|
||
|
||
let timestampKey = null;
|
||
let newKey = null
|
||
if (time && traceId) {
|
||
const combined = String(time) + String(traceId);
|
||
timestampKey = combined.slice(0, 16);
|
||
newKey = MD5(traceId).toString().substring(8, 24);
|
||
}
|
||
|
||
let decryptedRequestData = null;
|
||
if (requestData && requestData !== '无请求数据' && timestampKey) {
|
||
try {
|
||
const requestDataObj = JSON.parse(requestData);
|
||
if (requestDataObj && requestDataObj.data && typeof requestDataObj.data === 'string') {
|
||
const decrypted = decryptData(requestDataObj.data, timestampKey) || Decrypt(requestDataObj.data, newKey)
|
||
if (decrypted) {
|
||
try {
|
||
if (typeof JSON5 !== 'undefined') {
|
||
const parsed = JSON5.parse(decrypted);
|
||
decryptedRequestData = JSON.stringify(parsed, null, 2);
|
||
} else {
|
||
const parsed = JSON.parse(decrypted);
|
||
decryptedRequestData = JSON.stringify(parsed, null, 2);
|
||
}
|
||
} catch (e) {
|
||
decryptedRequestData = decrypted;
|
||
}
|
||
}
|
||
}
|
||
} catch (e) {
|
||
// 忽略
|
||
}
|
||
}
|
||
|
||
let decryptedResponseData = null;
|
||
if (responseDataRaw && responseDataRaw !== '无响应数据' && timestampKey) {
|
||
const decrypted = Decrypt(responseDataRaw, timestampKey) || Decrypt(responseDataRaw, newKey);
|
||
if (decrypted) {
|
||
try {
|
||
if (typeof JSON5 !== 'undefined') {
|
||
const parsed = JSON5.parse(decrypted);
|
||
decryptedResponseData = JSON.stringify(parsed, null, 2);
|
||
} else {
|
||
const parsed = JSON.parse(decrypted);
|
||
decryptedResponseData = JSON.stringify(parsed, null, 2);
|
||
}
|
||
} catch (e) {
|
||
const trimmed = decrypted.trim();
|
||
if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
|
||
try {
|
||
if (typeof JSON5 !== 'undefined') {
|
||
const parsed = JSON5.parse(trimmed);
|
||
decryptedResponseData = JSON.stringify(parsed, null, 2);
|
||
} else {
|
||
const parsed = JSON.parse(trimmed);
|
||
decryptedResponseData = JSON.stringify(parsed, null, 2);
|
||
}
|
||
} catch (e2) {
|
||
decryptedResponseData = trimmed;
|
||
}
|
||
} else {
|
||
decryptedResponseData = decrypted;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
const requestItem = {
|
||
id: Date.now() + Math.random(),
|
||
url: request.request.url,
|
||
method: request.request.method,
|
||
requestData,
|
||
responseData,
|
||
decryptedRequestData,
|
||
decryptedResponseData,
|
||
timestamp: new Date().toISOString(),
|
||
duration: request.time ? Math.round(request.time) : 0,
|
||
uuid
|
||
};
|
||
|
||
state.requests.push(requestItem);
|
||
|
||
if (state.requests.length > 100) {
|
||
state.requests.shift();
|
||
}
|
||
|
||
render();
|
||
});
|
||
}
|
||
|
||
// 渲染函数（纯 DOM 操作）
|
||
function render() {
|
||
const app = document.getElementById('app');
|
||
if (!app) return;
|
||
|
||
const styles = getStyles();
|
||
const sortedRequests = [...state.requests].reverse();
|
||
const themeIcon = state.theme === 'light' ? '🌙' : '☀️';
|
||
|
||
// 工具栏
|
||
const toolbar = document.createElement('div');
|
||
toolbar.className = 'toolbar';
|
||
Object.assign(toolbar.style, styles.toolbar);
|
||
|
||
const toolbarLeft = document.createElement('div');
|
||
toolbarLeft.className = 'toolbar-left';
|
||
|
||
const fontSizeControl = document.createElement('div');
|
||
fontSizeControl.className = 'font-size-control';
|
||
|
||
const fontSizeLabel = document.createElement('span');
|
||
fontSizeLabel.textContent = '字体大小:';
|
||
fontSizeLabel.style.fontSize = (state.fontSize - 1) + 'px';
|
||
|
||
const decreaseBtn = document.createElement('button');
|
||
decreaseBtn.textContent = 'A-';
|
||
decreaseBtn.title = '减小字体';
|
||
decreaseBtn.onclick = decreaseFontSize;
|
||
|
||
const fontSizeDisplay = document.createElement('span');
|
||
fontSizeDisplay.textContent = state.fontSize + 'px';
|
||
fontSizeDisplay.style.fontSize = (state.fontSize - 1) + 'px';
|
||
fontSizeDisplay.style.minWidth = '40px';
|
||
fontSizeDisplay.style.textAlign = 'center';
|
||
|
||
const increaseBtn = document.createElement('button');
|
||
increaseBtn.textContent = 'A+';
|
||
increaseBtn.title = '增大字体';
|
||
increaseBtn.onclick = increaseFontSize;
|
||
|
||
fontSizeControl.appendChild(fontSizeLabel);
|
||
fontSizeControl.appendChild(decreaseBtn);
|
||
fontSizeControl.appendChild(fontSizeDisplay);
|
||
fontSizeControl.appendChild(increaseBtn);
|
||
toolbarLeft.appendChild(fontSizeControl);
|
||
toolbar.appendChild(toolbarLeft);
|
||
|
||
const themeBtn = document.createElement('button');
|
||
themeBtn.className = 'theme-toggle';
|
||
themeBtn.innerHTML = `<span>${themeIcon}</span> 切换主题`;
|
||
themeBtn.onclick = toggleTheme;
|
||
toolbar.appendChild(themeBtn);
|
||
|
||
const clearBtn = document.createElement('button');
|
||
clearBtn.className = 'clear-btn';
|
||
clearBtn.innerHTML = `<span>🗑️</span> 清除`;
|
||
clearBtn.title = '清除所有请求记录';
|
||
clearBtn.onclick = clearRequests;
|
||
Object.assign(clearBtn.style, {
|
||
background: '#ff4d4f',
|
||
color: 'white',
|
||
border: 'none',
|
||
padding: '6px 12px',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: (state.fontSize - 1) + 'px',
|
||
fontWeight: 'bold',
|
||
marginLeft: '8px',
|
||
transition: 'all 0.2s',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: '6px'
|
||
});
|
||
clearBtn.onmouseenter = () => {
|
||
clearBtn.style.background = '#ff7875';
|
||
clearBtn.style.transform = 'translateY(-1px)';
|
||
};
|
||
clearBtn.onmouseleave = () => {
|
||
clearBtn.style.background = '#ff4d4f';
|
||
clearBtn.style.transform = 'translateY(0)';
|
||
};
|
||
toolbar.appendChild(clearBtn);
|
||
|
||
// 请求列表
|
||
const requestList = document.createElement('div');
|
||
requestList.className = sortedRequests.length === 0 ? 'empty-state' : 'requests-list';
|
||
|
||
if (sortedRequests.length === 0) {
|
||
requestList.textContent = '暂无请求记录';
|
||
} else {
|
||
sortedRequests.forEach(req => {
|
||
const item = document.createElement('div');
|
||
item.className = 'request-item';
|
||
Object.assign(item.style, styles.item);
|
||
|
||
const header = document.createElement('div');
|
||
header.className = 'request-header';
|
||
header.style.cursor = 'pointer';
|
||
|
||
// 折叠/展开按钮（默认折叠状态）
|
||
const collapseBtn = document.createElement('button');
|
||
collapseBtn.className = 'collapse-btn';
|
||
collapseBtn.innerHTML = '▶';
|
||
collapseBtn.dataset.collapsed = 'true';
|
||
Object.assign(collapseBtn.style, {
|
||
background: 'transparent',
|
||
border: 'none',
|
||
color: styles.subText.color,
|
||
cursor: 'pointer',
|
||
fontSize: (state.fontSize - 1) + 'px',
|
||
padding: '2px 6px',
|
||
marginRight: '6px',
|
||
transition: 'transform 0.2s ease-out',
|
||
outline: 'none',
|
||
userSelect: 'none',
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
minWidth: '20px',
|
||
transform: 'rotate(-90deg)' // 默认折叠状态，箭头向右
|
||
});
|
||
|
||
// 折叠/展开函数
|
||
const toggleCollapse = () => {
|
||
const isCollapsed = collapseBtn.dataset.collapsed === 'true';
|
||
collapseBtn.dataset.collapsed = isCollapsed ? 'false' : 'true';
|
||
collapseBtn.innerHTML = isCollapsed ? '▼' : '▶';
|
||
collapseBtn.style.transform = isCollapsed ? 'rotate(0deg)' : 'rotate(-90deg)';
|
||
|
||
// 切换 details 和 uuid 的显示
|
||
const details = item.querySelector('.request-details');
|
||
const uuidInfo = item.querySelector('.uuid-info');
|
||
|
||
if (isCollapsed) {
|
||
// 展开
|
||
if (details) {
|
||
details.style.display = '';
|
||
details.style.maxHeight = details.scrollHeight + 'px';
|
||
details.style.opacity = '1';
|
||
}
|
||
if (uuidInfo) {
|
||
uuidInfo.style.display = '';
|
||
uuidInfo.style.maxHeight = uuidInfo.scrollHeight + 'px';
|
||
uuidInfo.style.opacity = '1';
|
||
}
|
||
// 等待动画完成后移除 maxHeight 限制
|
||
setTimeout(() => {
|
||
if (details) details.style.maxHeight = '';
|
||
if (uuidInfo) uuidInfo.style.maxHeight = '';
|
||
}, 300);
|
||
} else {
|
||
// 折叠
|
||
if (details) {
|
||
details.style.maxHeight = details.scrollHeight + 'px';
|
||
// 强制重排
|
||
details.offsetHeight;
|
||
details.style.maxHeight = '0';
|
||
details.style.opacity = '0';
|
||
setTimeout(() => {
|
||
details.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
if (uuidInfo) {
|
||
uuidInfo.style.maxHeight = uuidInfo.scrollHeight + 'px';
|
||
// 强制重排
|
||
uuidInfo.offsetHeight;
|
||
uuidInfo.style.maxHeight = '0';
|
||
uuidInfo.style.opacity = '0';
|
||
setTimeout(() => {
|
||
uuidInfo.style.display = 'none';
|
||
}, 300);
|
||
}
|
||
}
|
||
};
|
||
|
||
collapseBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
toggleCollapse();
|
||
};
|
||
|
||
// 点击整个 header 也可以折叠
|
||
header.onclick = (e) => {
|
||
// 如果点击的是按钮，不重复触发
|
||
if (e.target === collapseBtn || collapseBtn.contains(e.target)) {
|
||
return;
|
||
}
|
||
toggleCollapse();
|
||
};
|
||
|
||
const method = document.createElement('span');
|
||
method.className = 'method';
|
||
method.textContent = req.method;
|
||
|
||
const url = document.createElement('span');
|
||
url.className = 'url';
|
||
url.textContent = req.url;
|
||
|
||
const timeInfo = formatTimestamp(req.timestamp);
|
||
const time = document.createElement('span');
|
||
time.className = 'time';
|
||
time.textContent = timeInfo.date + ' ' + timeInfo.time;
|
||
time.style.color = styles.subText.color;
|
||
time.style.fontSize = state.fontSize + 'px';
|
||
|
||
header.appendChild(collapseBtn);
|
||
header.appendChild(method);
|
||
header.appendChild(url);
|
||
header.appendChild(time);
|
||
item.appendChild(header);
|
||
|
||
if (req.uuid) {
|
||
const uuidInfo = document.createElement('div');
|
||
uuidInfo.className = 'uuid-info';
|
||
Object.assign(uuidInfo.style, {
|
||
background: styles.pre.background,
|
||
borderColor: styles.pre.borderColor,
|
||
fontSize: state.fontSize + 'px',
|
||
padding: '8px',
|
||
borderRadius: '4px',
|
||
border: '1px solid',
|
||
marginBottom: '10px',
|
||
display: 'none', // 默认隐藏（折叠状态）
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
flexWrap: 'wrap',
|
||
gap: '8px',
|
||
maxHeight: '0',
|
||
opacity: '0'
|
||
});
|
||
|
||
const uuidText = document.createElement('div');
|
||
uuidText.innerHTML = `<span style="color: #68d391;">📍 UUID: </span><code style="color: #4ec9b0;">${escapeHtml(req.uuid)}</code>`;
|
||
uuidText.style.flex = '1';
|
||
uuidText.style.minWidth = '200px';
|
||
|
||
const copyBtn = createCopyButton(req.uuid, '复制 UUID');
|
||
uuidInfo.appendChild(uuidText);
|
||
uuidInfo.appendChild(copyBtn);
|
||
item.appendChild(uuidInfo);
|
||
}
|
||
|
||
const details = document.createElement('div');
|
||
details.className = 'request-details';
|
||
// 默认折叠状态：隐藏
|
||
Object.assign(details.style, {
|
||
display: 'none',
|
||
maxHeight: '0',
|
||
opacity: '0'
|
||
});
|
||
|
||
if (req.decryptedRequestData) {
|
||
const section = document.createElement('div');
|
||
section.className = 'section';
|
||
|
||
const titleContainer = document.createElement('div');
|
||
titleContainer.style.display = 'flex';
|
||
titleContainer.style.alignItems = 'center';
|
||
titleContainer.style.marginBottom = '5px';
|
||
titleContainer.style.flexWrap = 'wrap';
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'section-title';
|
||
title.textContent = '🔓 解密后的请求数据:';
|
||
title.style.fontSize = (state.fontSize + 1) + 'px';
|
||
title.style.color = '#68d391';
|
||
title.style.fontWeight = 'bold';
|
||
title.style.flex = '1';
|
||
title.style.minWidth = '200px';
|
||
|
||
const copyBtn = createCopyButton(req.decryptedRequestData, '复制');
|
||
titleContainer.appendChild(title);
|
||
titleContainer.appendChild(copyBtn);
|
||
|
||
const pre = document.createElement('pre');
|
||
pre.className = 'code-block';
|
||
Object.assign(pre.style, {
|
||
background: styles.pre.background,
|
||
color: styles.pre.color,
|
||
borderColor: styles.pre.borderColor,
|
||
fontSize: state.fontSize + 'px',
|
||
padding: '10px',
|
||
borderRadius: '4px',
|
||
overflowX: 'auto',
|
||
maxHeight: '300px',
|
||
overflowY: 'auto',
|
||
border: '1px solid',
|
||
fontFamily: 'Courier New, monospace',
|
||
whiteSpace: 'pre',
|
||
margin: '0'
|
||
});
|
||
pre.innerHTML = highlightJson(req.decryptedRequestData);
|
||
|
||
section.appendChild(titleContainer);
|
||
section.appendChild(pre);
|
||
details.appendChild(section);
|
||
} else if (req.requestData && req.requestData !== '无请求数据') {
|
||
const section = document.createElement('div');
|
||
section.className = 'section';
|
||
|
||
const titleContainer = document.createElement('div');
|
||
titleContainer.style.display = 'flex';
|
||
titleContainer.style.alignItems = 'center';
|
||
titleContainer.style.marginBottom = '5px';
|
||
titleContainer.style.flexWrap = 'wrap';
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'section-title';
|
||
title.textContent = '📤 原始请求数据:';
|
||
title.style.fontSize = (state.fontSize + 1) + 'px';
|
||
title.style.color = styles.subText.color;
|
||
title.style.fontWeight = 'bold';
|
||
title.style.flex = '1';
|
||
title.style.minWidth = '200px';
|
||
|
||
const copyBtn = createCopyButton(req.requestData, '复制');
|
||
titleContainer.appendChild(title);
|
||
titleContainer.appendChild(copyBtn);
|
||
|
||
const pre = document.createElement('pre');
|
||
pre.className = 'code-block';
|
||
Object.assign(pre.style, {
|
||
background: styles.pre.background,
|
||
color: styles.subText.color,
|
||
borderColor: styles.pre.borderColor,
|
||
fontSize: state.fontSize + 'px',
|
||
padding: '10px',
|
||
borderRadius: '4px',
|
||
overflowX: 'auto',
|
||
maxHeight: '300px',
|
||
overflowY: 'auto',
|
||
border: '1px solid',
|
||
fontFamily: 'Courier New, monospace',
|
||
whiteSpace: 'pre',
|
||
margin: '0'
|
||
});
|
||
pre.innerHTML = escapeHtml(req.requestData);
|
||
|
||
section.appendChild(titleContainer);
|
||
section.appendChild(pre);
|
||
details.appendChild(section);
|
||
}
|
||
|
||
if (req.decryptedResponseData) {
|
||
const section = document.createElement('div');
|
||
section.className = 'section';
|
||
|
||
const titleContainer = document.createElement('div');
|
||
titleContainer.style.display = 'flex';
|
||
titleContainer.style.alignItems = 'center';
|
||
titleContainer.style.marginBottom = '5px';
|
||
titleContainer.style.flexWrap = 'wrap';
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'section-title';
|
||
title.textContent = '🔓 解密后的响应数据:';
|
||
title.style.fontSize = (state.fontSize + 1) + 'px';
|
||
title.style.color = '#68d391';
|
||
title.style.fontWeight = 'bold';
|
||
title.style.flex = '1';
|
||
title.style.minWidth = '200px';
|
||
|
||
const copyBtn = createCopyButton(req.decryptedResponseData, '复制');
|
||
titleContainer.appendChild(title);
|
||
titleContainer.appendChild(copyBtn);
|
||
|
||
const pre = document.createElement('pre');
|
||
pre.className = 'code-block';
|
||
Object.assign(pre.style, {
|
||
background: styles.pre.background,
|
||
color: styles.pre.color,
|
||
borderColor: styles.pre.borderColor,
|
||
fontSize: state.fontSize + 'px',
|
||
padding: '10px',
|
||
borderRadius: '4px',
|
||
overflowX: 'auto',
|
||
maxHeight: '300px',
|
||
overflowY: 'auto',
|
||
border: '1px solid',
|
||
fontFamily: 'Courier New, monospace',
|
||
whiteSpace: 'pre',
|
||
margin: '0'
|
||
});
|
||
pre.innerHTML = highlightJson(req.decryptedResponseData);
|
||
|
||
section.appendChild(titleContainer);
|
||
section.appendChild(pre);
|
||
details.appendChild(section);
|
||
} else if (req.responseData && req.responseData !== '无响应数据') {
|
||
const section = document.createElement('div');
|
||
section.className = 'section';
|
||
|
||
const titleContainer = document.createElement('div');
|
||
titleContainer.style.display = 'flex';
|
||
titleContainer.style.alignItems = 'center';
|
||
titleContainer.style.marginBottom = '5px';
|
||
titleContainer.style.flexWrap = 'wrap';
|
||
|
||
const title = document.createElement('div');
|
||
title.className = 'section-title';
|
||
title.textContent = '📥 原始响应数据:';
|
||
title.style.fontSize = (state.fontSize + 1) + 'px';
|
||
title.style.color = styles.subText.color;
|
||
title.style.fontWeight = 'bold';
|
||
title.style.flex = '1';
|
||
title.style.minWidth = '200px';
|
||
|
||
const copyBtn = createCopyButton(req.responseData, '复制');
|
||
titleContainer.appendChild(title);
|
||
titleContainer.appendChild(copyBtn);
|
||
|
||
const pre = document.createElement('pre');
|
||
pre.className = 'code-block';
|
||
Object.assign(pre.style, {
|
||
background: styles.pre.background,
|
||
color: styles.subText.color,
|
||
borderColor: styles.pre.borderColor,
|
||
fontSize: state.fontSize + 'px',
|
||
padding: '10px',
|
||
borderRadius: '4px',
|
||
overflowX: 'auto',
|
||
maxHeight: '300px',
|
||
overflowY: 'auto',
|
||
border: '1px solid',
|
||
fontFamily: 'Courier New, monospace',
|
||
whiteSpace: 'pre',
|
||
margin: '0'
|
||
});
|
||
pre.innerHTML = escapeHtml(req.responseData);
|
||
|
||
section.appendChild(titleContainer);
|
||
section.appendChild(pre);
|
||
details.appendChild(section);
|
||
}
|
||
|
||
item.appendChild(details);
|
||
requestList.appendChild(item);
|
||
});
|
||
}
|
||
|
||
// 清空并重新渲染
|
||
app.innerHTML = '';
|
||
app.className = `app-container ${state.theme}`;
|
||
app.appendChild(toolbar);
|
||
app.appendChild(requestList);
|
||
}
|
||
|
||
// 添加样式
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
body {
|
||
overflow: auto !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.app-container {
|
||
padding: 10px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
margin-bottom: 15px;
|
||
border-radius: 8px;
|
||
border: 1px solid;
|
||
}
|
||
|
||
.toolbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.font-size-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.font-size-control button,
|
||
.theme-toggle {
|
||
background: #4ec9b0;
|
||
color: white;
|
||
border: none;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.theme-toggle {
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.font-size-control button:hover,
|
||
.theme-toggle:hover {
|
||
background: #3fb89a;
|
||
}
|
||
|
||
.empty-state {
|
||
padding: 20px;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
|
||
.requests-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
overflow: visible;
|
||
}
|
||
|
||
.request-item {
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
border: 1px solid;
|
||
}
|
||
|
||
.request-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.request-header .method {
|
||
background: #4ec9b0;
|
||
color: white;
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.request-header .url {
|
||
flex: 1;
|
||
font-family: monospace;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.request-header .time {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.collapse-btn:hover {
|
||
opacity: 0.7;
|
||
transform: scale(1.1) rotate(0deg);
|
||
}
|
||
|
||
.request-details,
|
||
.uuid-info {
|
||
overflow: hidden;
|
||
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
|
||
opacity: 1;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 初始化
|
||
console.log('🔧 Panel.js 初始化开始...');
|
||
console.log('🔍 Chrome DevTools API 检查:', {
|
||
hasChrome: typeof chrome !== 'undefined',
|
||
hasDevtools: typeof chrome !== 'undefined' && !!chrome.devtools,
|
||
hasNetwork: typeof chrome !== 'undefined' && !!chrome.devtools && !!chrome.devtools.network
|
||
});
|
||
|
||
// 检查 DevTools API 是否可用并添加监听器
|
||
if (typeof chrome !== 'undefined' && chrome.devtools && chrome.devtools.network) {
|
||
console.log('✅ DevTools Network API 可用');
|
||
|
||
// 添加监听器（必须在面板上下文中才能工作）
|
||
try {
|
||
chrome.devtools.network.onRequestFinished.addListener(processRequest);
|
||
console.log('✅ 已添加网络请求监听器');
|
||
|
||
// 测试监听器是否工作
|
||
console.log('🔍 监听器测试：添加了一个监听器，等待请求...');
|
||
} catch (error) {
|
||
console.error('❌ 添加监听器失败:', error);
|
||
}
|
||
} else {
|
||
console.error('❌ DevTools Network API 不可用', {
|
||
chrome: typeof chrome,
|
||
devtools: typeof chrome !== 'undefined' ? typeof chrome.devtools : 'undefined',
|
||
network: typeof chrome !== 'undefined' && chrome.devtools ? typeof chrome.devtools.network : 'undefined'
|
||
});
|
||
}
|
||
|
||
// 加载设置并渲染
|
||
loadSettings();
|
||
render();
|
||
console.log('✅ Panel.js 初始化完成');
|