mirror of
https://github.com/zadam/trilium.git
synced 2025-12-06 07:24:25 +01:00
feat: implement centralized logging system
Components: - CentralizedLogger static class for log aggregation - Logger class with source context (background/content/popup/options) - Persistent storage in chrome.storage.local (up to 1000 entries) - Log viewer UI with filtering, search, and export - Survives service worker restarts Critical for MV3 debugging where service workers terminate frequently. Provides unified debugging across all extension contexts.
This commit is contained in:
Octech2722
parent
acbd5c8bcf
commit
6811b91a17
280
apps/web-clipper-manifestv3/src/logs/index.html
Normal file
280
apps/web-clipper-manifestv3/src/logs/index.html
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Trilium Web Clipper - Log Viewer</title>
|
||||||
|
<style>
|
||||||
|
/* Reset and base styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: #2d2d2d;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
font-size: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Simple controls */
|
||||||
|
.controls {
|
||||||
|
background: #3d3d3d;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls label {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f0f0f0;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
select, input {
|
||||||
|
padding: 6px 10px;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #2d2d2d;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
padding-right: 30px;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 8px center;
|
||||||
|
background-size: 16px;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #007cba;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #005a87;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Simple log container */
|
||||||
|
.logs-container {
|
||||||
|
background: #2d2d2d;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 6px;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Simple log entry */
|
||||||
|
.log-item {
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid #444;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-item:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-meta {
|
||||||
|
color: #888;
|
||||||
|
font-size: 11px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-content {
|
||||||
|
color: #e0e0e0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level.info { background: #17a2b8; }
|
||||||
|
.log-level.debug { background: #6c757d; }
|
||||||
|
.log-level.warn { background: #ffc107; color: #000; }
|
||||||
|
.log-level.error { background: #dc3545; }
|
||||||
|
|
||||||
|
.expand-btn {
|
||||||
|
background: #555;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
margin-top: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-btn:hover {
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Auto-refresh indicators */
|
||||||
|
#auto-refresh-interval {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auto-refresh-status {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-logs-indicator {
|
||||||
|
color: #28a745;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-details {
|
||||||
|
background: #1a1a1a;
|
||||||
|
padding: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #ccc;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
border: 1px solid #444;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Expand/Collapse all buttons container */
|
||||||
|
.expand-collapse-controls {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#expand-all-btn:hover {
|
||||||
|
background: #218838;
|
||||||
|
}
|
||||||
|
|
||||||
|
#collapse-all-btn:hover {
|
||||||
|
background: #5a6268;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls > * {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-collapse-controls {
|
||||||
|
margin-left: 0;
|
||||||
|
order: -1; /* Show expand/collapse buttons at top on mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Extension Log Viewer</h1>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<label>Level:</label>
|
||||||
|
<select id="level-filter">
|
||||||
|
<option value="">All Levels</option>
|
||||||
|
<option value="debug">Debug</option>
|
||||||
|
<option value="info">Info</option>
|
||||||
|
<option value="warn">Warning</option>
|
||||||
|
<option value="error">Error</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<label>Source:</label>
|
||||||
|
<select id="source-filter">
|
||||||
|
<option value="">All Sources</option>
|
||||||
|
<option value="background">Background</option>
|
||||||
|
<option value="content">Content</option>
|
||||||
|
<option value="popup">Popup</option>
|
||||||
|
<option value="options">Options</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<input type="search" id="search-box" placeholder="Search logs...">
|
||||||
|
|
||||||
|
<label>Auto-refresh:</label>
|
||||||
|
<select id="auto-refresh-interval">
|
||||||
|
<option value="0">Off</option>
|
||||||
|
<option value="1000">1 second</option>
|
||||||
|
<option value="2000">2 seconds</option>
|
||||||
|
<option value="5000" selected>5 seconds</option>
|
||||||
|
<option value="10000">10 seconds</option>
|
||||||
|
<option value="30000">30 seconds</option>
|
||||||
|
<option value="60000">1 minute</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button id="refresh-btn">Refresh</button>
|
||||||
|
<button id="export-btn">Export</button>
|
||||||
|
<button id="clear-btn" style="background: #dc3545;">Clear All</button>
|
||||||
|
|
||||||
|
<div class="expand-collapse-controls">
|
||||||
|
<button id="expand-all-btn" style="background: #28a745;">Expand All</button>
|
||||||
|
<button id="collapse-all-btn" style="background: #6c757d;">Collapse All</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="logs-container">
|
||||||
|
<div id="logs-list">Loading logs...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="logs.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
495
apps/web-clipper-manifestv3/src/logs/logs.css
Normal file
495
apps/web-clipper-manifestv3/src/logs/logs.css
Normal file
@ -0,0 +1,495 @@
|
|||||||
|
/*
|
||||||
|
* Clean, simple log viewer CSS - no complex layouts
|
||||||
|
* This file is now unused - styles are inline in index.html
|
||||||
|
* Keeping this file for compatibility but styles are embedded
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #1a1a1a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force normal text layout for all log elements */
|
||||||
|
.log-entry * {
|
||||||
|
writing-mode: horizontal-tb !important;
|
||||||
|
text-orientation: mixed !important;
|
||||||
|
direction: ltr !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Force vertical stacking - override any inherited flexbox/grid/column layouts */
|
||||||
|
.log-entries, #logs-list {
|
||||||
|
display: block !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
grid-template-columns: none !important;
|
||||||
|
column-count: 1 !important;
|
||||||
|
columns: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
break-inside: avoid !important;
|
||||||
|
page-break-inside: avoid !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nuclear option - force all log entries to stack vertically */
|
||||||
|
.log-entries .log-entry {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
float: none !important;
|
||||||
|
position: relative !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
top: auto !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure no flexbox/grid on any parent containers */
|
||||||
|
.log-entries * {
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background: var(--color-surface);
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 15px;
|
||||||
|
background: var(--color-surface-secondary);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
input[type="text"],
|
||||||
|
input[type="search"] {
|
||||||
|
padding: 6px 10px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
transition: var(--theme-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
select:focus,
|
||||||
|
input[type="text"]:focus,
|
||||||
|
input[type="search"]:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: 0 0 0 2px var(--color-primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--theme-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: var(--color-primary-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-btn {
|
||||||
|
background: var(--color-surface);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary-btn:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger-btn {
|
||||||
|
background: var(--color-error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.danger-btn:hover {
|
||||||
|
background: var(--color-error-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Log entries */
|
||||||
|
.log-entries {
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--color-surface);
|
||||||
|
display: block !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logs-list {
|
||||||
|
display: block !important;
|
||||||
|
width: 100%;
|
||||||
|
column-count: unset !important;
|
||||||
|
columns: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
max-width: 100% !important;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-bottom: 1px solid var(--color-border-primary);
|
||||||
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: var(--color-surface);
|
||||||
|
float: none !important;
|
||||||
|
position: static !important;
|
||||||
|
flex: none !important;
|
||||||
|
clear: both !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-header {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-timestamp {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level {
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level.debug {
|
||||||
|
background: var(--color-surface-secondary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level.info {
|
||||||
|
background: var(--color-info-bg);
|
||||||
|
color: var(--color-info-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level.warn {
|
||||||
|
background: var(--color-warning-bg);
|
||||||
|
color: var(--color-warning-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-level.error {
|
||||||
|
background: var(--color-error-bg);
|
||||||
|
color: var(--color-error-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-source {
|
||||||
|
background: var(--color-primary-light);
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: 500;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 70px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-message {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 4px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-message-text {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-message-text.truncated {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-btn {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: var(--color-primary-light);
|
||||||
|
color: var(--color-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-btn:hover {
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-data {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
background: var(--color-surface-secondary);
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Statistics */
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background: var(--color-surface-secondary);
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty state */
|
||||||
|
.empty-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state h3 {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme toggle */
|
||||||
|
.theme-toggle {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-toggle:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entry {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-timestamp,
|
||||||
|
.log-level,
|
||||||
|
.log-source {
|
||||||
|
min-width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading state */
|
||||||
|
.loading {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading::after {
|
||||||
|
content: '';
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px solid var(--color-border-primary);
|
||||||
|
border-top: 2px solid var(--color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar styling */
|
||||||
|
.log-entries::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entries::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-surface-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entries::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--color-border-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-entries::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Export dialog styling */
|
||||||
|
.export-dialog {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-content {
|
||||||
|
background: var(--color-surface);
|
||||||
|
padding: 24px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
max-width: 500px;
|
||||||
|
width: 90%;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-content h3 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--theme-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-option:hover {
|
||||||
|
background: var(--color-surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-option input[type="radio"] {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.export-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
294
apps/web-clipper-manifestv3/src/logs/logs.ts
Normal file
294
apps/web-clipper-manifestv3/src/logs/logs.ts
Normal file
@ -0,0 +1,294 @@
|
|||||||
|
import { CentralizedLogger, LogEntry } from '@/shared/utils';
|
||||||
|
|
||||||
|
class SimpleLogViewer {
|
||||||
|
private logs: LogEntry[] = [];
|
||||||
|
private autoRefreshTimer: number | null = null;
|
||||||
|
private lastLogCount: number = 0;
|
||||||
|
private autoRefreshEnabled: boolean = true;
|
||||||
|
private expandedLogs: Set<string> = new Set(); // Track which logs are expanded
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async initialize(): Promise<void> {
|
||||||
|
this.setupEventHandlers();
|
||||||
|
await this.loadLogs();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupEventHandlers(): void {
|
||||||
|
const refreshBtn = document.getElementById('refresh-btn');
|
||||||
|
const exportBtn = document.getElementById('export-btn');
|
||||||
|
const clearBtn = document.getElementById('clear-btn');
|
||||||
|
const expandAllBtn = document.getElementById('expand-all-btn');
|
||||||
|
const collapseAllBtn = document.getElementById('collapse-all-btn');
|
||||||
|
const levelFilter = document.getElementById('level-filter') as HTMLSelectElement;
|
||||||
|
const sourceFilter = document.getElementById('source-filter') as HTMLSelectElement;
|
||||||
|
const searchBox = document.getElementById('search-box') as HTMLInputElement;
|
||||||
|
const autoRefreshSelect = document.getElementById('auto-refresh-interval') as HTMLSelectElement;
|
||||||
|
|
||||||
|
refreshBtn?.addEventListener('click', () => this.loadLogs());
|
||||||
|
exportBtn?.addEventListener('click', () => this.exportLogs());
|
||||||
|
clearBtn?.addEventListener('click', () => this.clearLogs());
|
||||||
|
expandAllBtn?.addEventListener('click', () => this.expandAllLogs());
|
||||||
|
collapseAllBtn?.addEventListener('click', () => this.collapseAllLogs());
|
||||||
|
levelFilter?.addEventListener('change', () => this.renderLogs());
|
||||||
|
sourceFilter?.addEventListener('change', () => this.renderLogs());
|
||||||
|
searchBox?.addEventListener('input', () => this.renderLogs());
|
||||||
|
autoRefreshSelect?.addEventListener('change', (e) => this.handleAutoRefreshChange(e));
|
||||||
|
|
||||||
|
// Start auto-refresh with default interval (5 seconds)
|
||||||
|
this.startAutoRefresh(5000);
|
||||||
|
|
||||||
|
// Pause auto-refresh when tab is not visible
|
||||||
|
this.setupVisibilityHandling();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupVisibilityHandling(): void {
|
||||||
|
document.addEventListener('visibilitychange', () => {
|
||||||
|
this.autoRefreshEnabled = !document.hidden;
|
||||||
|
|
||||||
|
// If tab becomes visible again, refresh immediately
|
||||||
|
if (!document.hidden) {
|
||||||
|
this.loadLogs();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cleanup on page unload
|
||||||
|
window.addEventListener('beforeunload', () => {
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private async loadLogs(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const newLogs = await CentralizedLogger.getLogs();
|
||||||
|
const hasNewLogs = newLogs.length !== this.lastLogCount;
|
||||||
|
|
||||||
|
this.logs = newLogs;
|
||||||
|
this.lastLogCount = newLogs.length;
|
||||||
|
|
||||||
|
this.renderLogs();
|
||||||
|
|
||||||
|
// Show notification if new logs arrived during auto-refresh
|
||||||
|
if (hasNewLogs && this.logs.length > 0) {
|
||||||
|
this.showNewLogsIndicator();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load logs:', error);
|
||||||
|
this.showError('Failed to load logs');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleAutoRefreshChange(event: Event): void {
|
||||||
|
const select = event.target as HTMLSelectElement;
|
||||||
|
const interval = parseInt(select.value);
|
||||||
|
|
||||||
|
if (interval === 0) {
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
} else {
|
||||||
|
this.startAutoRefresh(interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private startAutoRefresh(intervalMs: number): void {
|
||||||
|
this.stopAutoRefresh(); // Clear any existing timer
|
||||||
|
|
||||||
|
if (intervalMs > 0) {
|
||||||
|
this.autoRefreshTimer = window.setInterval(() => {
|
||||||
|
if (this.autoRefreshEnabled) {
|
||||||
|
this.loadLogs();
|
||||||
|
}
|
||||||
|
}, intervalMs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private stopAutoRefresh(): void {
|
||||||
|
if (this.autoRefreshTimer) {
|
||||||
|
clearInterval(this.autoRefreshTimer);
|
||||||
|
this.autoRefreshTimer = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private showNewLogsIndicator(): void {
|
||||||
|
// Flash the refresh button to indicate new logs
|
||||||
|
const refreshBtn = document.getElementById('refresh-btn');
|
||||||
|
if (refreshBtn) {
|
||||||
|
refreshBtn.style.background = '#28a745';
|
||||||
|
refreshBtn.textContent = 'New logs!';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
refreshBtn.style.background = '#007cba';
|
||||||
|
refreshBtn.textContent = 'Refresh';
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderLogs(): void {
|
||||||
|
const logsList = document.getElementById('logs-list');
|
||||||
|
if (!logsList) return;
|
||||||
|
|
||||||
|
// Apply filters
|
||||||
|
const levelFilter = (document.getElementById('level-filter') as HTMLSelectElement).value;
|
||||||
|
const sourceFilter = (document.getElementById('source-filter') as HTMLSelectElement).value;
|
||||||
|
const searchQuery = (document.getElementById('search-box') as HTMLInputElement).value.toLowerCase();
|
||||||
|
|
||||||
|
let filteredLogs = this.logs.filter(log => {
|
||||||
|
if (levelFilter && log.level !== levelFilter) return false;
|
||||||
|
if (sourceFilter && log.source !== sourceFilter) return false;
|
||||||
|
if (searchQuery) {
|
||||||
|
const searchText = `${log.context} ${log.message}`.toLowerCase();
|
||||||
|
if (!searchText.includes(searchQuery)) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Sort by timestamp (newest first)
|
||||||
|
filteredLogs.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
|
||||||
|
|
||||||
|
if (filteredLogs.length === 0) {
|
||||||
|
logsList.innerHTML = '<div style="padding: 20px; text-align: center; color: #888;">No logs found</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render simple log entries
|
||||||
|
logsList.innerHTML = filteredLogs.map(log => this.renderLogItem(log)).join('');
|
||||||
|
|
||||||
|
// Add event listeners for expand buttons
|
||||||
|
this.setupExpandButtons();
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupExpandButtons(): void {
|
||||||
|
const expandButtons = document.querySelectorAll('.expand-btn');
|
||||||
|
expandButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', (e) => {
|
||||||
|
const btn = e.target as HTMLButtonElement;
|
||||||
|
const logId = btn.getAttribute('data-log-id');
|
||||||
|
if (!logId) return;
|
||||||
|
|
||||||
|
const details = document.getElementById(`details-${logId}`);
|
||||||
|
if (!details) return;
|
||||||
|
|
||||||
|
if (this.expandedLogs.has(logId)) {
|
||||||
|
// Collapse
|
||||||
|
details.style.display = 'none';
|
||||||
|
btn.textContent = 'Expand';
|
||||||
|
this.expandedLogs.delete(logId);
|
||||||
|
} else {
|
||||||
|
// Expand
|
||||||
|
details.style.display = 'block';
|
||||||
|
btn.textContent = 'Collapse';
|
||||||
|
this.expandedLogs.add(logId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderLogItem(log: LogEntry): string {
|
||||||
|
const timestamp = new Date(log.timestamp).toLocaleString();
|
||||||
|
const message = this.escapeHtml(`[${log.context}] ${log.message}`);
|
||||||
|
|
||||||
|
// Handle additional data
|
||||||
|
let details = '';
|
||||||
|
if (log.args && log.args.length > 0) {
|
||||||
|
details += `<div class="log-details">${JSON.stringify(log.args, null, 2)}</div>`;
|
||||||
|
}
|
||||||
|
if (log.error) {
|
||||||
|
details += `<div class="log-details">Error: ${log.error.name}: ${log.error.message}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const needsExpand = message.length > 200 || details;
|
||||||
|
const displayMessage = needsExpand ? message.substring(0, 200) + '...' : message;
|
||||||
|
|
||||||
|
// Check if this log is currently expanded
|
||||||
|
const isExpanded = this.expandedLogs.has(log.id);
|
||||||
|
const displayStyle = isExpanded ? 'block' : 'none';
|
||||||
|
const buttonText = isExpanded ? 'Collapse' : 'Expand';
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="log-item">
|
||||||
|
<div class="log-meta">
|
||||||
|
${timestamp}
|
||||||
|
<span class="log-level ${log.level}">${log.level}</span>
|
||||||
|
<span style="color: #007cba;">${log.source}</span>
|
||||||
|
</div>
|
||||||
|
<div class="log-content">
|
||||||
|
${displayMessage}
|
||||||
|
${needsExpand ? `<button class="expand-btn" data-log-id="${log.id}">${buttonText}</button>` : ''}
|
||||||
|
${needsExpand ? `<div class="log-details" id="details-${log.id}" style="display: ${displayStyle};">${message}${details}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private escapeHtml(text: string): string {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async exportLogs(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const logsJson = await CentralizedLogger.exportLogs();
|
||||||
|
const blob = new Blob([logsJson], { type: 'application/json' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `trilium-logs-${new Date().toISOString().split('T')[0]}.json`;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to export logs:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async clearLogs(): Promise<void> {
|
||||||
|
if (confirm('Are you sure you want to clear all logs?')) {
|
||||||
|
try {
|
||||||
|
await CentralizedLogger.clearLogs();
|
||||||
|
this.logs = [];
|
||||||
|
this.expandedLogs.clear(); // Clear expanded state when clearing logs
|
||||||
|
this.renderLogs();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to clear logs:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private expandAllLogs(): void {
|
||||||
|
// Get all currently visible logs that can be expanded
|
||||||
|
const expandButtons = document.querySelectorAll('.expand-btn');
|
||||||
|
expandButtons.forEach(button => {
|
||||||
|
const logId = button.getAttribute('data-log-id');
|
||||||
|
if (logId) {
|
||||||
|
this.expandedLogs.add(logId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Re-render to apply the expanded state
|
||||||
|
this.renderLogs();
|
||||||
|
}
|
||||||
|
|
||||||
|
private collapseAllLogs(): void {
|
||||||
|
// Clear all expanded states
|
||||||
|
this.expandedLogs.clear();
|
||||||
|
|
||||||
|
// Re-render to apply the collapsed state
|
||||||
|
this.renderLogs();
|
||||||
|
}
|
||||||
|
|
||||||
|
private showError(message: string): void {
|
||||||
|
const logsList = document.getElementById('logs-list');
|
||||||
|
if (logsList) {
|
||||||
|
logsList.innerHTML = `<div style="padding: 20px; color: #dc3545; text-align: center;">${message}</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is loaded
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
new SimpleLogViewer();
|
||||||
|
});
|
||||||
344
apps/web-clipper-manifestv3/src/shared/utils.ts
Normal file
344
apps/web-clipper-manifestv3/src/shared/utils.ts
Normal file
@ -0,0 +1,344 @@
|
|||||||
|
/**
|
||||||
|
* Log entry interface for centralized logging
|
||||||
|
*/
|
||||||
|
export interface LogEntry {
|
||||||
|
id: string;
|
||||||
|
timestamp: string;
|
||||||
|
level: 'debug' | 'info' | 'warn' | 'error';
|
||||||
|
context: string;
|
||||||
|
message: string;
|
||||||
|
args?: unknown[];
|
||||||
|
error?: {
|
||||||
|
name: string;
|
||||||
|
message: string;
|
||||||
|
stack?: string;
|
||||||
|
};
|
||||||
|
source: 'background' | 'content' | 'popup' | 'options';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Centralized logging system for the extension
|
||||||
|
* Aggregates logs from all contexts and provides unified access
|
||||||
|
*/
|
||||||
|
export class CentralizedLogger {
|
||||||
|
private static readonly MAX_LOGS = 1000;
|
||||||
|
private static readonly STORAGE_KEY = 'extension_logs';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a log entry to centralized storage
|
||||||
|
*/
|
||||||
|
static async addLog(entry: Omit<LogEntry, 'id' | 'timestamp'>): Promise<void> {
|
||||||
|
try {
|
||||||
|
const logEntry: LogEntry = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
...entry,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get existing logs
|
||||||
|
const result = await chrome.storage.local.get(this.STORAGE_KEY);
|
||||||
|
const logs: LogEntry[] = result[this.STORAGE_KEY] || [];
|
||||||
|
|
||||||
|
// Add new log and maintain size limit
|
||||||
|
logs.push(logEntry);
|
||||||
|
if (logs.length > this.MAX_LOGS) {
|
||||||
|
logs.splice(0, logs.length - this.MAX_LOGS);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store updated logs
|
||||||
|
await chrome.storage.local.set({ [this.STORAGE_KEY]: logs });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to store centralized log:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all logs from centralized storage
|
||||||
|
*/
|
||||||
|
static async getLogs(): Promise<LogEntry[]> {
|
||||||
|
try {
|
||||||
|
const result = await chrome.storage.local.get(this.STORAGE_KEY);
|
||||||
|
return result[this.STORAGE_KEY] || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to retrieve logs:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Clear all logs
|
||||||
|
*/
|
||||||
|
static async clearLogs(): Promise<void> {
|
||||||
|
try {
|
||||||
|
await chrome.storage.local.remove(this.STORAGE_KEY);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to clear logs:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Export logs as JSON string
|
||||||
|
*/
|
||||||
|
static async exportLogs(): Promise<string> {
|
||||||
|
const logs = await this.getLogs();
|
||||||
|
return JSON.stringify(logs, null, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get logs filtered by level
|
||||||
|
*/
|
||||||
|
static async getLogsByLevel(level: LogEntry['level']): Promise<LogEntry[]> {
|
||||||
|
const logs = await this.getLogs();
|
||||||
|
return logs.filter(log => log.level === level);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get logs filtered by context
|
||||||
|
*/
|
||||||
|
static async getLogsByContext(context: string): Promise<LogEntry[]> {
|
||||||
|
const logs = await this.getLogs();
|
||||||
|
return logs.filter(log => log.context === context);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get logs filtered by source
|
||||||
|
*/
|
||||||
|
static async getLogsBySource(source: LogEntry['source']): Promise<LogEntry[]> {
|
||||||
|
const logs = await this.getLogs();
|
||||||
|
return logs.filter(log => log.source === source);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enhanced logging system for the extension with centralized storage
|
||||||
|
*/
|
||||||
|
export class Logger {
|
||||||
|
private context: string;
|
||||||
|
private source: LogEntry['source'];
|
||||||
|
private isDebugMode: boolean = process.env.NODE_ENV === 'development';
|
||||||
|
|
||||||
|
constructor(context: string, source: LogEntry['source'] = 'background') {
|
||||||
|
this.context = context;
|
||||||
|
this.source = source;
|
||||||
|
}
|
||||||
|
|
||||||
|
static create(context: string, source: LogEntry['source'] = 'background'): Logger {
|
||||||
|
return new Logger(context, source);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async logToStorage(level: LogEntry['level'], message: string, args?: unknown[], error?: Error): Promise<void> {
|
||||||
|
const logEntry: Omit<LogEntry, 'id' | 'timestamp'> = {
|
||||||
|
level,
|
||||||
|
context: this.context,
|
||||||
|
message,
|
||||||
|
source: this.source,
|
||||||
|
args: args && args.length > 0 ? args : undefined,
|
||||||
|
error: error ? {
|
||||||
|
name: error.name,
|
||||||
|
message: error.message,
|
||||||
|
stack: error.stack,
|
||||||
|
} : undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
await CentralizedLogger.addLog(logEntry);
|
||||||
|
}
|
||||||
|
|
||||||
|
private formatMessage(level: string, message: string, ...args: unknown[]): void {
|
||||||
|
const timestamp = new Date().toISOString();
|
||||||
|
const prefix = `[${timestamp}] [${this.source}:${this.context}] [${level.toUpperCase()}]`;
|
||||||
|
|
||||||
|
if (this.isDebugMode || level === 'ERROR') {
|
||||||
|
const consoleMethod = console[level as keyof typeof console] as (...args: unknown[]) => void;
|
||||||
|
if (typeof consoleMethod === 'function') {
|
||||||
|
consoleMethod(prefix, message, ...args);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
debug(message: string, ...args: unknown[]): void {
|
||||||
|
this.formatMessage('debug', message, ...args);
|
||||||
|
this.logToStorage('debug', message, args).catch(console.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
info(message: string, ...args: unknown[]): void {
|
||||||
|
this.formatMessage('info', message, ...args);
|
||||||
|
this.logToStorage('info', message, args).catch(console.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
warn(message: string, ...args: unknown[]): void {
|
||||||
|
this.formatMessage('warn', message, ...args);
|
||||||
|
this.logToStorage('warn', message, args).catch(console.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
error(message: string, error?: Error, ...args: unknown[]): void {
|
||||||
|
this.formatMessage('error', message, error, ...args);
|
||||||
|
this.logToStorage('error', message, args, error).catch(console.error);
|
||||||
|
|
||||||
|
// In production, you might want to send errors to a logging service
|
||||||
|
if (!this.isDebugMode && error) {
|
||||||
|
this.reportError(error, message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async reportError(error: Error, context: string): Promise<void> {
|
||||||
|
try {
|
||||||
|
// Store error details for debugging
|
||||||
|
await chrome.storage.local.set({
|
||||||
|
[`error_${Date.now()}`]: {
|
||||||
|
message: error.message,
|
||||||
|
stack: error.stack,
|
||||||
|
context,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to store error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Utility functions
|
||||||
|
*/
|
||||||
|
export const Utils = {
|
||||||
|
/**
|
||||||
|
* Generate a random string of specified length
|
||||||
|
*/
|
||||||
|
randomString(length: number): string {
|
||||||
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
|
let result = '';
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the base URL of the current page
|
||||||
|
*/
|
||||||
|
getBaseUrl(url: string = window.location.href): string {
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(url);
|
||||||
|
return `${urlObj.protocol}//${urlObj.host}`;
|
||||||
|
} catch (error) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a relative URL to absolute
|
||||||
|
*/
|
||||||
|
makeAbsoluteUrl(relativeUrl: string, baseUrl: string): string {
|
||||||
|
try {
|
||||||
|
return new URL(relativeUrl, baseUrl).href;
|
||||||
|
} catch (error) {
|
||||||
|
return relativeUrl;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sanitize HTML content
|
||||||
|
*/
|
||||||
|
sanitizeHtml(html: string): string {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = html;
|
||||||
|
return div.innerHTML;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Debounce function calls
|
||||||
|
*/
|
||||||
|
debounce<T extends (...args: unknown[]) => void>(
|
||||||
|
func: T,
|
||||||
|
wait: number
|
||||||
|
): (...args: Parameters<T>) => void {
|
||||||
|
let timeout: NodeJS.Timeout;
|
||||||
|
return (...args: Parameters<T>) => {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(() => func(...args), wait);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sleep for specified milliseconds
|
||||||
|
*/
|
||||||
|
sleep(ms: number): Promise<void> {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, ms));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retry a function with exponential backoff
|
||||||
|
*/
|
||||||
|
async retry<T>(
|
||||||
|
fn: () => Promise<T>,
|
||||||
|
maxAttempts: number = 3,
|
||||||
|
baseDelay: number = 1000
|
||||||
|
): Promise<T> {
|
||||||
|
let lastError: Error;
|
||||||
|
|
||||||
|
for (let attempt = 1; attempt <= maxAttempts; attempt++) {
|
||||||
|
try {
|
||||||
|
return await fn();
|
||||||
|
} catch (error) {
|
||||||
|
lastError = error as Error;
|
||||||
|
|
||||||
|
if (attempt === maxAttempts) {
|
||||||
|
throw lastError;
|
||||||
|
}
|
||||||
|
|
||||||
|
const delay = baseDelay * Math.pow(2, attempt - 1);
|
||||||
|
await this.sleep(delay);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
throw lastError!;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Message handling utilities
|
||||||
|
*/
|
||||||
|
export const MessageUtils = {
|
||||||
|
/**
|
||||||
|
* Send a message with automatic retry and error handling
|
||||||
|
*/
|
||||||
|
async sendMessage<T>(message: unknown, tabId?: number): Promise<T> {
|
||||||
|
const logger = Logger.create('MessageUtils');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = tabId
|
||||||
|
? await chrome.tabs.sendMessage(tabId, message)
|
||||||
|
: await chrome.runtime.sendMessage(message);
|
||||||
|
|
||||||
|
return response as T;
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Failed to send message', error as Error, { message, tabId });
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a message response handler
|
||||||
|
*/
|
||||||
|
createResponseHandler<T>(
|
||||||
|
handler: (message: unknown, sender: chrome.runtime.MessageSender) => Promise<T> | T,
|
||||||
|
source: LogEntry['source'] = 'background'
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
message: unknown,
|
||||||
|
sender: chrome.runtime.MessageSender,
|
||||||
|
sendResponse: (response: T) => void
|
||||||
|
): boolean => {
|
||||||
|
const logger = Logger.create('MessageHandler', source);
|
||||||
|
|
||||||
|
Promise.resolve(handler(message, sender))
|
||||||
|
.then(sendResponse)
|
||||||
|
.catch(error => {
|
||||||
|
logger.error('Message handler failed', error as Error, { message, sender });
|
||||||
|
sendResponse({ error: error.message } as T);
|
||||||
|
});
|
||||||
|
|
||||||
|
return true; // Indicates async response
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user