Added session downloader for chrome extension (#1522)

* Added session downloader for chrome extension

- The session list now has a button to download sessions as .json files for use with rrweb-player
- Improved styling for the delete and download buttons

Author: kirankunigiri

.changeset/wicked-dolphins-tie.md

@@ -0,0 +1,5 @@
+---
+"@rrweb/web-extension": minor
+---
+
+Added session downloader for chrome extension

packages/web-extension/src/pages/SessionList.tsx

@@ -31,7 +31,7 @@ import { VscTriangleDown, VscTriangleUp } from 'react-icons/vsc';
 import { useNavigate } from 'react-router-dom';
 import { type Session, EventName } from '~/types';
 import Channel from '~/utils/channel';
-import { deleteSessions, getAllSessions } from '~/utils/storage';
+import { deleteSessions, getAllSessions, downloadSessions } from '~/utils/storage';
 import {
   FiChevronLeft,
   FiChevronRight,
@@ -292,24 +292,38 @@ export function SessionList() {
             ))}
           </Select>
           {Object.keys(rowSelection).length > 0 && (
-            <Button
-              mr={4}
-              size="md"
-              colorScheme="red"
-              onClick={() => {
-                if (table.getSelectedRowModel().flatRows.length === 0) return;
-                const ids = table
-                  .getSelectedRowModel()
-                  .flatRows.map((row) => row.original.id);
-                void deleteSessions(ids).then(() => {
-                  setRowSelection({});
-                  void updateSessions();
-                  channel.emit(EventName.SessionUpdated, {});
-                });
-              }}
-            >
-              Delete
-            </Button>
+            <Flex gap={1}>
+              <Button
+                mr={4}
+                size="md"
+                colorScheme="red"
+                onClick={() => {
+                  if (table.getSelectedRowModel().flatRows.length === 0) return;
+                  const ids = table
+                    .getSelectedRowModel()
+                    .flatRows.map((row) => row.original.id);
+                  void deleteSessions(ids).then(() => {
+                    setRowSelection({});
+                    void updateSessions();
+                    channel.emit(EventName.SessionUpdated, {});
+                  });
+                }}
+              >
+                Delete
+              </Button>
+              <Button
+                mr={4}
+                size="md"
+                colorScheme="green"
+                onClick={() => {
+                  const selectedRows = table.getSelectedRowModel().flatRows;
+                  if (selectedRows.length === 0) return;
+                  void downloadSessions(selectedRows.map((row) => row.original.id));
+                }}
+              >
+                Download
+              </Button>
+            </Flex>
           )}
         </Flex>
       </Flex>

packages/web-extension/src/utils/storage.ts

@@ -88,3 +88,22 @@ export async function deleteSessions(ids: string[]) {
     return Promise.all([eventTransition.done, sessionTransition.done]);
   });
 }
+
+export async function downloadSessions(ids: string[]) {
+  for (const sessionId of ids) {
+    const events = await getEvents(sessionId);
+    const session = await getSession(sessionId);
+    const blob = new Blob([JSON.stringify({ session, events }, null, 2)], {
+      type: 'application/json',
+    });
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${session.name}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+}