extension: red highlights for routes.

This commit is contained in:
Omar Rizwan 2021-03-22 08:56:48 -07:00
parent 73f4672a8c
commit 345c7a4af5

View file

@ -538,9 +538,35 @@ Router["/runtime/reload"] = {
}; };
Router["/runtime/background.js.html"] = defineFile(async () => { Router["/runtime/background.js.html"] = defineFile(async () => {
const js = await window.fetch(chrome.runtime.getURL('background.js')) const js = await window.fetch(chrome.runtime.getURL('background.js'))
.then(r => r.text()); .then(r => r.text());
const classes = [
[/Router\["[^\]]+"\] = /, 'route']
];
const classedJs =
js.split('\n')
.map(line => {
const class_ = classes.find(([re, class_]) => re.test(line));
line = line
.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
if (!class_) { return `<span>${line}</span>`; }
return `<span class="${class_[1]}">${line}</span>`;
})
.join('\n');
return ` return `
<html> <html>
<head>
<style>
.route { background-color: red; }
span:not(.route) { height: 0px; }
</style>
</head>
<body> <body>
<dl> <dl>
${Object.entries(Router).map(([a, b]) => ` ${Object.entries(Router).map(([a, b]) => `
@ -548,7 +574,7 @@ Router["/runtime/background.js.html"] = defineFile(async () => {
<dd>${b}</dd> <dd>${b}</dd>
`).join('\n')} `).join('\n')}
</dl> </dl>
<pre><code>${js}</code></pre> <pre><code>${classedJs}</code></pre>
</body> </body>
</html> </html>
`; `;