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

.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,6 +292,7 @@ export function SessionList() {
             ))}
           </Select>
           {Object.keys(rowSelection).length > 0 && (
+            <Flex gap={1}>
               <Button
                 mr={4}
                 size="md"
@@ -310,6 +311,19 @@ export function SessionList() {
               >
                 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);
+  }
+}