browser-plugin-creator
Version:
A modern scaffolding tool for creating browser extensions with ease
181 lines (165 loc) • 5.75 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>{{name}} - 侧边栏</title>
<link rel="stylesheet" href="sidepanel.css">
</head>
<body>
<div class="sidebar-container">
<header class="sidebar-header">
<h1>{{name}}</h1>
<div class="header-actions">
<button id="refresh-btn" class="icon-btn" title="刷新">🔄</button>
<button id="settings-btn" class="icon-btn" title="设置">⚙️</button>
</div>
</header>
<nav class="sidebar-nav">
<button class="nav-item active" data-section="overview">
📊 概览
</button>
<button class="nav-item" data-section="elements">
🔍 元素
</button>
<button class="nav-item" data-section="performance">
⚡ 性能
</button>
<button class="nav-item" data-section="network">
🌐 网络
</button>
<button class="nav-item" data-section="storage">
💾 存储
</button>
</nav>
<main class="sidebar-content">
<!-- 概览面板 -->
<section class="content-section active" id="overview-section">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">📄</div>
<div class="stat-content">
<div class="stat-value" id="total-elements">-</div>
<div class="stat-label">总元素</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🏷️</div>
<div class="stat-content">
<div class="stat-value" id="unique-tags">-</div>
<div class="stat-label">标签类型</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🎨</div>
<div class="stat-content">
<div class="stat-value" id="color-count">-</div>
<div class="stat-label">颜色数</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">📏</div>
<div class="stat-content">
<div class="stat-value" id="page-size">-</div>
<div class="stat-label">页面大小</div>
</div>
</div>
</div>
<div class="quick-actions">
<h3>快速操作</h3>
<div class="action-buttons">
<button class="action-btn" id="analyze-btn">
🔍 分析页面
</button>
<button class="action-btn" id="export-btn">
📤 导出报告
</button>
<button class="action-btn" id="screenshot-btn">
📸 截图
</button>
</div>
</div>
</section>
<!-- 元素面板 -->
<section class="content-section" id="elements-section">
<div class="section-header">
<h3>DOM元素树</h3>
<div class="search-box">
<input type="text" id="element-search" placeholder="搜索元素...">
</div>
</div>
<div class="element-tree">
<div id="tree-container">
<div class="loading">加载中...</div>
</div>
</div>
</section>
<!-- 性能面板 -->
<section class="content-section" id="performance-section">
<div class="performance-metrics">
<div class="metric">
<label>页面加载时间:</label>
<span id="load-time">-</span>
</div>
<div class="metric">
<label>DOMContentLoaded:</label>
<span id="dom-ready-time">-</span>
</div>
<div class="metric">
<label>首次内容绘制:</label>
<span id="fcp-time">-</span>
</div>
<div class="metric">
<label>最大内容绘制:</label>
<span id="lcp-time">-</span>
</div>
</div>
<div class="performance-chart">
<canvas id="performance-chart" width="300" height="200"></canvas>
</div>
</section>
<!-- 网络面板 -->
<section class="content-section" id="network-section">
<div class="network-summary">
<div class="summary-item">
<span class="label">总请求:</span>
<span id="total-requests">-</span>
</div>
<div class="summary-item">
<span class="label">总大小:</span>
<span id="total-size">-</span>
</div>
<div class="summary-item">
<span class="label">加载时间:</span>
<span id="network-time">-</span>
</div>
</div>
<div class="resource-list">
<div id="resources-container">
<div class="loading">分析网络资源...</div>
</div>
</div>
</section>
<!-- 存储面板 -->
<section class="content-section" id="storage-section">
<div class="storage-tabs">
<button class="storage-tab active" data-storage="local">本地存储</button>
<button class="storage-tab" data-storage="session">会话存储</button>
<button class="storage-tab" data-storage="cookies">Cookies</button>
</div>
<div class="storage-content">
<div id="storage-data">
<div class="loading">加载存储数据...</div>
</div>
</div>
</section>
</main>
<footer class="sidebar-footer">
<div class="status-bar">
<span id="status-text">就绪</span>
<span id="last-update">-</span>
</div>
</footer>
</div>
<script src="sidepanel.js"></script>
</body>
</html>