open-web-inspector
Version:
The open source web element inspector - AI-controllable DOM inspection with live CSS editing, hover highlighting, and developer tools integration
268 lines (227 loc) • 6.71 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Open Web Inspector Controls</title>
<style>
body {
width: 300px;
min-height: 200px;
margin: 0;
padding: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
background: #ffffff;
color: #333;
}
.header {
text-align: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #e1e5e9;
}
.header h1 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #2c3e50;
}
.header p {
margin: 4px 0 0 0;
font-size: 12px;
color: #7f8c8d;
}
.status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
margin-bottom: 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
}
.status.loaded {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.not-loaded {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.status.active {
background: #cce5ff;
color: #004085;
border: 1px solid #b3d7ff;
}
.status-icon {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
.status.loaded .status-icon {
background: #28a745;
}
.status.not-loaded .status-icon {
background: #dc3545;
}
.status.active .status-icon {
background: #007bff;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.controls {
display: flex;
flex-direction: column;
gap: 8px;
}
.btn {
padding: 10px 16px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
outline: none;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.btn:active {
transform: translateY(0);
}
.btn-primary {
background: #007bff;
color: white;
}
.btn-primary:hover {
background: #0056b3;
}
.btn-success {
background: #28a745;
color: white;
}
.btn-success:hover {
background: #1e7e34;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-danger:hover {
background: #c82333;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #545b62;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none ;
box-shadow: none ;
}
.shortcuts {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #e1e5e9;
}
.shortcuts h3 {
margin: 0 0 8px 0;
font-size: 12px;
font-weight: 600;
color: #495057;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.shortcuts ul {
margin: 0;
padding: 0;
list-style: none;
}
.shortcuts li {
font-size: 11px;
color: #6c757d;
margin-bottom: 4px;
}
.shortcuts code {
background: #f8f9fa;
padding: 2px 4px;
border-radius: 3px;
font-family: 'SF Mono', Monaco, monospace;
font-size: 10px;
}
.version {
text-align: center;
margin-top: 16px;
font-size: 10px;
color: #adb5bd;
}
.loading {
text-align: center;
padding: 20px;
color: #6c757d;
}
.loading::after {
content: '...';
animation: dots 1.5s infinite;
}
@keyframes dots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
</style>
</head>
<body>
<div class="header">
<h1>🎯 Open Web Inspector</h1>
<p>AI-Controllable Element Inspector</p>
</div>
<div id="loading" class="loading">
Loading status
</div>
<div id="content" style="display: none;">
<div id="status" class="status">
<div style="display: flex; align-items: center;">
<div class="status-icon"></div>
<span id="status-text">Checking status...</span>
</div>
<span id="version-badge"></span>
</div>
<div class="controls">
<button id="toggleBtn" class="btn btn-primary">Toggle Inspector</button>
<button id="enableBtn" class="btn btn-success">Enable Inspector</button>
<button id="disableBtn" class="btn btn-danger">Disable Inspector</button>
</div>
<div class="shortcuts">
<h3>Keyboard Shortcuts</h3>
<ul>
<li><code>Ctrl+Shift+E</code> Toggle inspector</li>
<li><code>Ctrl+Shift+I</code> Force enable</li>
<li><code>Escape</code> Disable inspector</li>
</ul>
</div>
<div class="version">
Extension v1.0.0
</div>
</div>
<script src="popup.js"></script>
</body>
</html>