Skip to content

🧹 [code health improvement] Refactor file architecture and replace ZIP export with HAR format #21

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

Draft
Illhm wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

🧹 [code health improvement] Refactor file architecture and replace ZIP export with HAR format #21

Show file tree
Hide file tree
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
1 change: 0 additions & 1 deletion auto.html
View file
Open in desktop

This file was deleted.

0 dashboard.css → css/dashboard.css
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions html/auto.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html><head><meta charset='utf-8'><title>Auto Start</title></head><body><script type='module' src='../js/auto.js'></script></body></html>
6 changes: 3 additions & 3 deletions dashboard.html → html/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>ReqRes DevTools Lite v3</title>
<link rel="stylesheet" href="dashboard.css">
<link rel="stylesheet" href="../css/dashboard.css">
</head>
<body>
<header class="toolbar">
Expand All @@ -28,7 +28,7 @@
<button id="btnSelectAll" disabled>Pilih semua (filtered)</button>
<button id="btnClearSelection" disabled>Clear</button>
<span class="muted" id="selCount">0 dipilih</span>
<button id="btnExportSelectedZIP" disabled>Export ZIP (Readable)</button>
<button id="btnExportSelectedHAR" disabled>Export HAR</button>
<button id="btnClear">Clear Log</button>
</div>
</header>
Expand Down Expand Up @@ -75,6 +75,6 @@

<footer id="statusBar"><span id="attachInfo" class="muted">Idle</span></footer>

<script type="module" src="dashboard.js"></script>
<script type="module" src="../js/dashboard.js"></script>
</body>
</html>
0 auto.js → js/auto.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion bg.js → js/bg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
function broadcast(event, data){ chrome.runtime.sendMessage({ __RRSTREAM:true, event, data }); }

async function openOrFocusDashboard(){
const url = chrome.runtime.getURL('dashboard.html');
const url = chrome.runtime.getURL('html/dashboard.html');
const tabs = await chrome.tabs.query({});
const found = tabs.find(t => t.url === url);
if (found) {
Expand Down
228 changes: 65 additions & 163 deletions dashboard.js → js/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const btnClear = $("#btnClear");
const btnSelectMode = $("#btnSelectMode");
const btnSelectAll = $("#btnSelectAll");
const btnClearSelection = $("#btnClearSelection");
const btnExportSelectedZIP = $("#btnExportSelectedZIP");
const btnExportSelectedHAR = $("#btnExportSelectedHAR");
const selCount = $("#selCount");
const modeCbs = Array.from(document.querySelectorAll("input.mode"));

Expand Down Expand Up @@ -180,7 +180,7 @@ function updateSelUi(){
const count = selectedIds.size;
selCount.textContent = `${count} dipilih`;
btnClearSelection.disabled = count === 0;
btnExportSelectedZIP.disabled = count === 0;
btnExportSelectedHAR.disabled = count === 0;
btnSelectAll.disabled = !selectMode;
masterSel && (masterSel.checked = false);
}
Expand Down Expand Up @@ -473,172 +473,74 @@ function guessExt(mime, enc) {
return enc === 'base64' ? '.bin' : '.txt';
}

// Export ZIP (Readable)
btnExportSelectedZIP.addEventListener('click', async () => {
// Export HAR
btnExportSelectedHAR.addEventListener('click', async () => {
const selected = rows.filter(r => selectedIds.has(r.id)).sort((a,b)=>(a.seq||0)-(b.seq||0));
const pad = (n)=>String(n).padStart(5,'0');
const enc = new TextEncoder();
const files = [];
// README & index
const readme = `# Export Req/Res (Readable)
Organized by Domain > Request.
- 00_summary.txt : Metadata
- 01_req_headers.txt
- 02_req_body.(json/txt)
- 03_res_headers.txt
- 04_res_body.(json/html/txt/bin)
`;
files.push({ name: "README.md", data: enc.encode(readme) });
const csvHeader = "seq,timestamp,method,status,domain,path,mime,size,url\n";
let csv = csvHeader;
let md = "| seq | method | status | domain | path | mime | size |\n|---:|:--|:--:|:--|:--|:--|--:|\n";
for (const r of selected){
const urlObj = new URL(r.url);
const host = sanitize(urlObj.hostname);
const path = sanitize(urlObj.pathname).slice(-50).replace(/^_+/, '');
const folderName = `${pad(r.seq||0)}_${sanitize(r.method)}_${path}`;
const base = `${host}/${folderName}`;

// Meta
const meta = [
`URL: ${r.url}`,
`Method: ${r.method}`,
`Status: ${r.status} ${r.statusText||""}`,
`MIME: ${r.mimeType||"-"}`,
`Size: ${r.bodySize??0}`,
`Started: ${r.startedDateTime||""}`,
`Time(ms): ${Math.round((r.time||0)*1000)}`,
`Category: ${guessKind(r)}`,
].join('\n');
files.push({ name: `${base}/00_summary.txt`, data: enc.encode(meta) });

// Headers
files.push({ name: `${base}/01_req_headers.txt`, data: enc.encode(formatHeaders(r.requestHeaders)) });
files.push({ name: `${base}/03_res_headers.txt`, data: enc.encode(formatHeaders(r.responseHeaders)) });

// Request Body
let reqExt = guessExt((r.requestHeaders||[]).find(h=>h.name.toLowerCase()==='content-type')?.value||'text/plain', 'text');
let reqBody = r.requestBodyText || '';
if (reqExt === '.json') { try { reqBody = JSON.stringify(JSON.parse(reqBody), null, 2); } catch {} }
files.push({ name: `${base}/02_req_body${reqExt}`, data: enc.encode(reqBody) });

// Response Body
let resExt = guessExt(r.mimeType, r.responseBodyEncoding);
let resBodyData;
if (r.responseBodyEncoding === 'base64') {
resBodyData = b64toBytes(r.responseBodyRaw||'');
if (resExt === '.json') {
try {
const text = new TextDecoder().decode(resBodyData);
const json = JSON.stringify(JSON.parse(text), null, 2);
resBodyData = enc.encode(json);
} catch {}
}
} else {
let text = r.responseBodyRaw || '';
if (resExt === '.json') { try { text = JSON.stringify(JSON.parse(text), null, 2); } catch {} }
resBodyData = enc.encode(text);
}
files.push({ name: `${base}/04_res_body${resExt}`, data: resBodyData });

csv += `${r.seq||0},${csvCell(r.startedDateTime)},${csvCell(r.method)},${r.status||0},${csvCell(host)},${csvCell(urlObj.pathname)},${csvCell(r.mimeType)},${r.bodySize||0},${csvCell(r.url)}\n`;
md += `| ${r.seq||0} | ${r.method||''} | ${r.status||0} | ${host} | ${urlObj.pathname} | ${r.mimeType||''} | ${r.bodySize||0} |\n`;
}
files.push({ name: "index.csv", data: enc.encode(csv) });
files.push({ name: "index.md", data: enc.encode(md) });

const zipBlob = buildZip(files);
const url = URL.createObjectURL(zipBlob); const a=document.createElement('a'); a.href=url; a.download='reqres_readable.zip'; a.click(); URL.revokeObjectURL(url);
});
const entries = selected.map(r => {
return {
startedDateTime: r.startedDateTime || new Date().toISOString(),
time: Math.round((r.time||0)*1000) || 0,
request: {
method: r.method,
url: r.url,
httpVersion: "HTTP/1.1",
headers: r.requestHeaders || [],
queryString: [],
cookies: [],
headersSize: -1,
bodySize: -1,
postData: r.requestBodyText ? {
mimeType: (r.requestHeaders||[]).find(h=>h.name.toLowerCase()==='content-type')?.value || "text/plain",
text: r.requestBodyText
} : undefined
},
response: {
status: r.status || 0,
statusText: r.statusText || "",
httpVersion: "HTTP/1.1",
headers: r.responseHeaders || [],
cookies: [],
content: {
size: r.bodySize || 0,
mimeType: r.mimeType || "x-unknown",
text: r.responseBodyRaw || "",
encoding: r.responseBodyEncoding === "base64" ? "base64" : undefined
},
redirectURL: "",
headersSize: -1,
bodySize: r.bodySize || 0
},
cache: {},
timings: {
send: 0,
wait: Math.round((r.time||0)*1000) || 0,
receive: 0
}
};
});

// minimal ZIP (store) builder
function buildZip(files){
const enc = new TextEncoder();
let fileData = []; let central = []; let offset = 0; const now = new Date();
const dosTime = ((now.getHours()<<11) | (now.getMinutes()<<5) | (Math.floor(now.getSeconds()/2))) & 0xFFFF;
const dosDate = (((now.getFullYear()-1980)<<9) | ((now.getMonth()+1)<<5) | now.getDate()) & 0xFFFF;
for (const f of files){
const nameBytes = enc.encode(f.name);
const data = f.data instanceof Uint8Array ? f.data : new Uint8Array(f.data||[]);
const crc = crc32(data);
const local = new Uint8Array(30 + nameBytes.length + data.length);
const dv = new DataView(local.buffer);
dv.setUint32(0, 0x04034b50, true); // local header sig
dv.setUint16(4, 20, true); // version needed
dv.setUint16(6, 0, true); // flags
dv.setUint16(8, 0, true); // method: store
dv.setUint16(10, dosTime, true);
dv.setUint16(12, dosDate, true);
dv.setUint32(14, crc>>>0, true);
dv.setUint32(18, data.length, true);
dv.setUint32(22, data.length, true);
dv.setUint16(26, nameBytes.length, true);
dv.setUint16(28, 0, true); // extra len
local.set(nameBytes, 30);
local.set(data, 30 + nameBytes.length);
fileData.push(local);
// central directory entry
const centralEntry = new Uint8Array(46 + nameBytes.length);
const cv = new DataView(centralEntry.buffer);
cv.setUint32(0, 0x02014b50, true);
cv.setUint16(4, 20, true); // version made by
cv.setUint16(6, 20, true); // version needed
cv.setUint16(8, 0, true); // flags
cv.setUint16(10, 0, true); // method
cv.setUint16(12, dosTime, true);
cv.setUint16(14, dosDate, true);
cv.setUint32(16, crc>>>0, true);
cv.setUint32(20, data.length, true);
cv.setUint32(24, data.length, true);
cv.setUint16(28, nameBytes.length, true);
cv.setUint16(30, 0, true); // extra len
cv.setUint16(32, 0, true); // comment len
cv.setUint16(34, 0, true); // disk number start
cv.setUint16(36, 0, true); // internal attrs
cv.setUint32(38, 0, true); // external attrs
cv.setUint32(42, offset, true); // local header offset
centralEntry.set(nameBytes, 46);
central.push(centralEntry);
offset += local.length;
}
// end of central directory
const sizeOfCentral = central.reduce((a,b)=>a+b.length, 0);
const offsetOfCentral = offset;
const end = new Uint8Array(22);
const ev = new DataView(end.buffer);
ev.setUint32(0, 0x06054b50, true);
ev.setUint16(4, 0, true); // disk
ev.setUint16(6, 0, true); // start disk
const count = files.length;
ev.setUint16(8, count, true);
ev.setUint16(10, count, true);
ev.setUint32(12, sizeOfCentral, true);
ev.setUint32(16, offsetOfCentral, true);
ev.setUint16(20, 0, true); // comment len
return new Blob([...fileData, ...central, end], { type: "application/zip" });
}
// CRC32
const CRC_TABLE = (() => {
let c;
let table = [];
for (let n = 0; n < 256; n++) {
c = n;
for (let k = 0; k < 8; k++) {
c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1);
const harLog = {
log: {
version: "1.2",
creator: {
name: "ReqRes DevTools Lite",
version: "1.5.0"
},
entries: entries
}
table[n] = c >>> 0;
}
return table;
})();
};

const jsonStr = JSON.stringify(harLog, null, 2);
const blob = new Blob([jsonStr], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'reqres_export.har';
a.click();
URL.revokeObjectURL(url);
});

function crc32(u8) {
let c = 0 ^ (-1);
for (let i = 0; i < u8.length; i++) {
c = (c >>> 8) ^ CRC_TABLE[(c ^ u8[i]) & 0xFF];
}
return (c ^ (-1)) >>> 0;
}
// end ZIP

chrome.runtime.onMessage.addListener((msg) => {
if (!msg || !msg.__RRSTREAM) return;
Expand Down
6 changes: 3 additions & 3 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "ReqRes DevTools Lite (Auto) v3",
"version": "1.5.0",
"description": "Auto-capture. Anti-refresh log. Mode filter XHR/JS/CSS/Img/etc. Export ZIP (Readable).",
"description": "Auto-capture. Anti-refresh log. Mode filter XHR/JS/CSS/Img/etc. Export HAR.",
"minimum_chrome_version": "105",
"permissions": [
"debugger",
Expand All @@ -21,12 +21,12 @@
"128": "icons/icon128.png"
},
"background": {
"service_worker": "bg.js",
"service_worker": "js/bg.js",
"type": "module"
},
"action": {
"default_title": "Start capture & open dashboard",
"default_popup": "auto.html",
"default_popup": "html/auto.html",
"default_icon": {
"16": "icons/icon16.png"
}
Expand Down
Loading