freshroute-server
Version:
Local development server for FreshRoute extension with API mocking and extended functionality
1 lines • 5.26 kB
HTML
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>FreshRoute Network Recorder</title><link rel="stylesheet" href="network-recorder.css"></head><body><div class="header"><div class="title"><h1>🎬 FreshRoute Network Recorder <span style="font-size:.6em;color:#6366f1;font-weight:600;background:rgba(99,102,241,.1);padding:3px 8px;border-radius:6px;margin-left:8px;border:1px solid rgba(99,102,241,.2)">BETA</span></h1><div class="subtitle">Capture and convert network requests to mock rules</div></div><div class="header-controls"><button class="back-btn" id="backToOptions"><span>←</span> <span>Back to Options</span></button><div class="recorder-status" id="recorderStatus">Ready</div><button class="close-btn" id="closeWindow">✕</button></div></div><div class="main-content"><div class="controls-section"><div class="recording-controls"><button class="btn btn-record" id="startRecording"><span class="record-icon">●</span> Start Recording</button> <button class="btn btn-stop" id="stopRecording" style="display:none"><span class="stop-icon">■</span> Stop Recording</button> <button class="btn btn-clear" id="clearRecording" style="display:none">🗑️ Clear All</button></div><div class="recording-info"><div class="info-item"><span class="label">Status:</span> <span class="value" id="statusText">Ready to record</span></div><div class="info-item"><span class="label">Duration:</span> <span class="value" id="recordingDuration">00:00</span></div><div class="info-item"><span class="label">Requests:</span> <span class="value" id="requestCount">0</span></div></div></div><div class="filters-section"><h3>Filters</h3><div class="filter-controls"><div class="filter-group"><label>Methods:</label><div class="method-filters"><label><input type="checkbox" value="GET" checked="checked"> GET</label> <label><input type="checkbox" value="POST" checked="checked"> POST</label> <label><input type="checkbox" value="PUT" checked="checked"> PUT</label> <label><input type="checkbox" value="DELETE" checked="checked"> DELETE</label> <label><input type="checkbox" value="PATCH" checked="checked"> PATCH</label></div></div><div class="filter-group"><label>Status Codes:</label><div class="status-filters"><label><input type="checkbox" value="2xx" checked="checked"> 2xx Success</label> <label><input type="checkbox" value="3xx" checked="checked"> 3xx Redirect</label> <label><input type="checkbox" value="4xx" checked="checked"> 4xx Client Error</label> <label><input type="checkbox" value="5xx" checked="checked"> 5xx Server Error</label></div></div><div class="filter-group"><label>Request Types:</label><div class="type-filters"><label><input type="checkbox" value="xmlhttprequest" checked="checked"> XHR</label> <label><input type="checkbox" value="fetch"> Fetch</label> <label><input type="checkbox" value="script"> Script</label> <label><input type="checkbox" value="stylesheet"> CSS</label> <label><input type="checkbox" value="image"> Image</label> <label><input type="checkbox" value="font"> Font</label> <label><input type="checkbox" value="document"> Document</label> <label><input type="checkbox" value="other"> Other</label></div></div><div class="filter-group"><label>URL Filter:</label> <input id="urlFilter" placeholder="Filter by URL pattern..." class="url-filter"></div></div></div><div class="requests-section"><div class="requests-header"><h3>Captured Requests</h3><div class="requests-actions"><button class="btn btn-small" id="selectAll">Select All</button> <button class="btn btn-small" id="selectNone">Select None</button> <button class="btn btn-small" id="invertSelection">Invert</button></div></div><div class="requests-container"><div class="requests-list" id="requestsList"><div class="empty-state" id="emptyState"><div class="empty-icon">📡</div><div class="empty-title">No requests captured yet</div><div class="empty-subtitle">Click "Start Recording" to begin capturing network requests</div></div></div></div></div><div class="convert-section" id="convertSection" style="display:none"><h3>Convert to Mock Rules</h3><div class="convert-controls"><div class="group-selection"><label for="targetGroup">Target Group:</label> <select id="targetGroup" class="group-select"><option value="">Create New Group</option></select> <input id="newGroupName" placeholder="Optional: Enter group name (auto-generated if empty)" class="group-input" style="display:none"></div><div class="convert-options"><label><input type="checkbox" id="includeHeaders" checked="checked"> Include response headers in mock rules</label> <label><input type="checkbox" id="autoGenerateNames" checked="checked"> Auto-generate rule names</label></div><div class="convert-actions"><button class="btn btn-primary" id="convertToMocks">🎭 Convert Selected to Mock Rules</button> <span class="selected-count" id="selectedCount">0 requests selected</span></div></div></div></div><div class="modal" id="requestModal" style="display:none"><div class="modal-content"><div class="modal-header"><h3>Request Details</h3><button class="close-btn" id="closeModal">✕</button></div><div class="modal-body" id="modalBody"></div></div></div><script src="network-recorder.js"></script></body></html>