feat: add HTML logs to offscreen page

radixdlt · Jan 25, 2024 · 5b19ad7 · 5b19ad7
1 parent cf30f9d
commit 5b19ad7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/chrome/offscreen/index.html b/src/chrome/offscreen/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <body>
+    <div id="logs"></div>
     <script type="module" src="/src/chrome/offscreen/offscreen.ts"></script>
   </body>
 </html>
diff --git a/src/chrome/offscreen/logs-client.ts b/src/chrome/offscreen/logs-client.ts
@@ -6,11 +6,13 @@ export type Log = ILogObjMeta & ILogObj
 export type LogsClient = ReturnType<typeof LogsClient>
 
 export const LogsClient = (
-  { maxLogsLength } = {
+  { maxLogsLength, htmlElementId } = {
+    htmlElementId: 'logs',
     maxLogsLength: 1000,
   },
 ) => {
   let browser: string
+  const element = document.getElementById(htmlElementId)
   const logs: string[] = []
   return {
     add: (logObj: Log) => {
@@ -24,15 +26,17 @@ export const LogsClient = (
         .filter(Boolean)
         .join('-')
 
-      logs.push(
-        `[${prefix}] ${Object.values(rest)
-          .map((singleLog) =>
-            typeof singleLog === 'object'
-              ? JSON.stringify(singleLog, null, 2)
-              : singleLog,
-          )
-          .join(' ')}`,
-      )
+      const log = `[${prefix}] ${Object.values(rest)
+        .map((singleLog) =>
+          typeof singleLog === 'object'
+            ? JSON.stringify(singleLog, null, 2)
+            : singleLog,
+        )
+        .join(' ')}`
+
+      logs.push(log)
+      element?.prepend(log)
+      element?.prepend(document.createElement('br'))
 
       if (logs.length > maxLogsLength) {
         logs.shift()