browser-plugin-creator
Version:
A modern scaffolding tool for creating browser extensions with ease
107 lines (100 loc) • 3.1 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>{{name}}</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="header">
<h1>{{name}}</h1>
<div class="version">v1.0.0</div>
</div>
<div class="tabs">
<button class="tab-btn active" data-tab="main">主要</button>
<button class="tab-btn" data-tab="settings">设置</button>
<button class="tab-btn" data-tab="tools">工具</button>
</div>
<div class="tab-content active" id="main-tab">
<div class="feature-section">
<h3>页面分析</h3>
<button id="analyze-page" class="btn primary">分析当前页面</button>
<div id="page-stats" class="stats">
<div class="stat-item">
<span class="label">元素数量:</span>
<span id="element-count">-</span>
</div>
<div class="stat-item">
<span class="label">图片数量:</span>
<span id="image-count">-</span>
</div>
<div class="stat-item">
<span class="label">表单数量:</span>
<span id="form-count">-</span>
</div>
</div>
</div>
<div class="feature-section">
<h3>性能监控</h3>
<button id="start-monitoring" class="btn">开始监控</button>
<button id="stop-monitoring" class="btn" disabled>停止监控</button>
<div id="performance-data" class="stats">
<div class="stat-item">
<span class="label">加载时间:</span>
<span id="load-time">-</span>
</div>
<div class="stat-item">
<span class="label">DOMContentLoaded:</span>
<span id="dom-ready">-</span>
</div>
</div>
</div>
</div>
<div class="tab-content" id="settings-tab">
<div class="setting-group">
<label>
<input type="checkbox" id="enable-notifications">
启用通知
</label>
</div>
<div class="setting-group">
<label>
<input type="checkbox" id="auto-analyze">
自动分析页面
</label>
</div>
<div class="setting-group">
<label>
主题:
<select id="theme-select">
<option value="light">浅色</option>
<option value="dark">深色</option>
<option value="auto">自动</option>
</select>
</label>
</div>
<button id="save-settings" class="btn primary">保存设置</button>
</div>
<div class="tab-content" id="tools-tab">
<div class="tool-grid">
<button class="tool-btn" data-tool="screenshot">
📸 截图
</button>
<button class="tool-btn" data-tool="color-picker">
🎨 取色器
</button>
<button class="tool-btn" data-tool="ruler">
📏 标尺
</button>
<button class="tool-btn" data-tool="validator">
✅ 验证器
</button>
</div>
</div>
<div class="footer">
<button id="open-options" class="btn link">打开选项页</button>
<button id="open-sidepanel" class="btn link">侧边栏</button>
</div>
<script src="popup.js"></script>
</body>
</html>