Skip to content

chore: add new options in network recorder test html #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nafees87n wants to merge 1 commit into
base: master
Choose a base branch
from
Open

chore: add new options in network recorder test html #92

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions browser-extension/mv3/test/network-recording-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,18 @@ <h2>2. Start Recording</h2>
<p style="margin-bottom: 6px;"><label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="checkbox" id="disableCache" style="width:auto;margin:0;" /> Disable browser cache (wipe HTTP cache at start)</label></p>
<p style="margin-bottom: 6px;"><label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="checkbox" id="wipeServiceWorkers" style="width:auto;margin:0;" /> Wipe service workers (+ Cache API) at start</label></p>
<p style="margin-bottom: 6px;"><label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="checkbox" id="recordAjax" checked style="width:auto;margin:0;" /> Record Ajax (XHR/fetch) request &amp; response bodies</label></p>
<p style="margin-bottom: 0;">
<p style="margin-bottom: 12px;">
<label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;margin-right:16px;"><input type="radio" name="requestScope" value="all" checked style="width:auto;margin:0;" /> All requests</label>
<label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="radio" name="requestScope" value="top-level" style="width:auto;margin:0;" /> Top-level only</label>
</p>
<label style="margin-bottom: 6px;">Open recording in</label>
<p style="margin-bottom: 6px;">
<label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;margin-right:16px;"><input type="radio" name="openMode" value="tab" checked style="width:auto;margin:0;" /> New tab</label>
<label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;margin-right:16px;"><input type="radio" name="openMode" value="window" style="width:auto;margin:0;" /> New window</label>
<label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="radio" name="openMode" value="incognito" style="width:auto;margin:0;" /> New incognito window</label>
</p>
<p style="margin-bottom: 6px;color:#9e9e9e;font-size:11px;">Incognito requires "Allow in Incognito" enabled for the extension at chrome://extensions — otherwise start is rejected (INCOGNITO_NOT_ALLOWED), never silently downgraded to a normal window.</p>
<p style="margin-bottom: 0;"><label style="display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;"><input type="checkbox" id="closeOnStop" style="width:auto;margin:0;" /> Close recording surface on stop (tab in tab mode; window in window/incognito mode)</label></p>
</div>

<p style="margin-top: 12px;">Status: <span class="status status-idle" id="status">Idle</span></p>
Expand Down Expand Up @@ -125,16 +133,18 @@ <h2>Log</h2>
const wipeServiceWorkers = document.getElementById('wipeServiceWorkers').checked;
const recordAjax = document.getElementById('recordAjax').checked;
const requestScope = document.querySelector('input[name="requestScope"]:checked')?.value || 'all';
const openMode = document.querySelector('input[name="openMode"]:checked')?.value || 'tab';
const closeOnStop = document.getElementById('closeOnStop').checked;

log(`Sending startNetworkRecording for: ${url}`);
log(`Sending startNetworkRecording for: ${url} (openMode=${openMode}, closeOnStop=${closeOnStop})`);

chrome.runtime.sendMessage(
extId,
{
action: "startNetworkRecording",
payload: {
url: url,
config: { maxDuration: 15 * 60 * 1000, disableCache, wipeServiceWorkers, recordAjax, requestScope },
config: { maxDuration: 15 * 60 * 1000, disableCache, wipeServiceWorkers, recordAjax, requestScope, openMode, closeOnStop },
},
},
(response) => {
Expand All @@ -144,6 +154,7 @@ <h2>Log</h2>
}

log(`Response: ${JSON.stringify(response)}`, 'data');
console.log('[network-recording] startNetworkRecording response:', response);

if (response?.success) {
currentTargetTabId = response.targetTabId;
Expand All @@ -152,10 +163,18 @@ <h2>Log</h2>
document.getElementById('status').className = 'status status-recording';
document.getElementById('btnStart').disabled = true;
document.getElementById('btnStop').disabled = false;
log(`Recording started on tab ${currentTargetTabId}`, 'info');
// Echo the resolved open mode (openedMode) the extension actually opened — confirms
// window/incognito rather than just what we asked for.
log(`Recording started on tab ${currentTargetTabId} (opened in: ${response.openedMode || 'tab'})`, 'info');
openStream(extId, currentTargetTabId);
} else {
log('Failed to start recording', 'error');
// Surface the typed rejection code (INCOGNITO_NOT_ALLOWED / INCOGNITO_DISABLED_BY_POLICY)
// distinctly from the generic error, so the incognito-gating path is obvious while testing.
if (response?.code) {
log(`Failed to start recording [${response.code}]: ${response.error || ''}`, 'error');
} else {
log(`Failed to start recording: ${response?.error || 'unknown error'}`, 'error');
}
}
}
);
Expand Down