refactor: migrate session storage from chrome local storage to indexedDB

packages/web-extension/package.json

@@ -33,6 +33,7 @@
     "@emotion/styled": "^11.10.4",
     "@tanstack/react-table": "^8.5.22",
     "framer-motion": "^7.3.6",
+    "idb": "^7.1.1",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
     "react": "^18.2.0",

packages/web-extension/src/content/index.ts

@@ -57,9 +57,8 @@ void (async () => {
     return new Promise((resolve) => {
       stopResponseCb = (response: RecordStoppedMessage) => {
         stopResponseCb = undefined;
-        const session = saveEvents(response.events);
-        session.events = [];
-        response.session = session;
+        const newSession = generateSession();
+        response.session = newSession;
         storedEvents = [];
         resolve(response);
       };
@@ -133,24 +132,14 @@ function startRecord() {
   };
 }
 
-function saveEvents(events: eventWithTime[]) {
+function generateSession() {
   const newSession: Session = {
     id: nanoid(),
     name: document.title,
     tags: [],
-    events,
     createTimestamp: Date.now(),
     modifyTimestamp: Date.now(),
     recorderVersion: Browser.runtime.getManifest().version_name || 'unknown',
   };
-  void Browser.storage.local.get(LocalDataKey.sessions).then((res) => {
-    const data = res as LocalData;
-    if (!data.sessions) data.sessions = {};
-    data.sessions[newSession.id] = newSession;
-    void Browser.storage.local.set(data);
-  });
-
-  return {
-    ...newSession,
-  };
+  return newSession;
 }

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

@@ -1,16 +1,15 @@
 import { useRef, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Browser from 'webextension-polyfill';
-import type rrwebPlayer from 'rrweb-player';
+import rrwebPlayer from 'rrweb-player';
 import Replayer from 'rrweb-player';
-import { LocalData } from '../types';
 import {
   Box,
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   Center,
 } from '@chakra-ui/react';
+import { getEvents, getSession } from '../utils';
 
 export default function Player() {
   const playerElRef = useRef<HTMLDivElement>(null);
@@ -19,27 +18,38 @@ export default function Player() {
   const [sessionName, setSessionName] = useState('');
 
   useEffect(() => {
-    void Browser.storage.local.get().then((data) => {
-      if (!playerElRef.current || !sessionId) return;
-      const localData = data as LocalData;
-      const session = localData.sessions[sessionId];
-      if (!session) return;
-      setSessionName(session.name);
+    if (!sessionId) return;
+    getSession(sessionId)
+      .then((session) => {
+        setSessionName(session.name);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+    getEvents(sessionId)
+      .then((events) => {
+        if (!playerElRef.current || !sessionId) return;
 
-      const linkEl = document.createElement('link');
-      linkEl.href =
-        'https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css';
-      linkEl.rel = 'stylesheet';
-      document.head.appendChild(linkEl);
-      playerRef.current = new Replayer({
-        target: playerElRef.current as HTMLElement,
-        props: {
-          events: session.events,
-          autoPlay: true,
-        },
+        const linkEl = document.createElement('link');
+        linkEl.href =
+          'https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css';
+        linkEl.rel = 'stylesheet';
+        document.head.appendChild(linkEl);
+        playerRef.current = new Replayer({
+          target: playerElRef.current as HTMLElement,
+          props: {
+            events,
+            autoPlay: true,
+          },
+        });
+      })
+      .catch((err) => {
+        console.error(err);
       });
-    });
-  }, []);
+    return () => {
+      playerRef.current?.pause();
+    };
+  }, [sessionId]);
 
   return (
     <>

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

@@ -22,11 +22,13 @@ import {
   getSortedRowModel,
 } from '@tanstack/react-table';
 import { VscTriangleDown, VscTriangleUp } from 'react-icons/vsc';
-import { LocalData, LocalDataKey, Session } from '../types';
-import Browser from 'webextension-polyfill';
 import { useNavigate } from 'react-router-dom';
+import { Session, EventName } from '../types';
+import Channel from '../utils/channel';
+import { deleteSessions, getAllSessions } from '../utils';
 
 const columnHelper = createColumnHelper<Session>();
+const channel = new Channel();
 
 export function SessionList() {
   const [sessions, setSessions] = useState<Session[]>([]);
@@ -88,19 +90,15 @@ export function SessionList() {
     },
   });
 
+  const updateSessions = async () => {
+    const sessions = await getAllSessions();
+    setSessions(sessions);
+  };
+
   useEffect(() => {
-    const getSessions = (sessions?: LocalData['sessions']) => {
-      if (!sessions) return;
-      const sessionArray = [];
-      for (const id in sessions) sessionArray.push(sessions[id]);
-      setSessions(sessionArray);
-    };
-    void Browser.storage.local
-      .get(LocalDataKey.sessions)
-      .then((data) => getSessions((data as LocalData).sessions));
-    Browser.storage.onChanged.addListener((changes, area) => {
-      if (area === 'local' && changes.sessions)
-        getSessions(changes.sessions.newValue as LocalData['sessions']);
+    void updateSessions();
+    channel.on(EventName.SessionUpdated, () => {
+      void updateSessions();
     });
   }, []);
 
@@ -179,27 +177,26 @@ export function SessionList() {
       </TableContainer>
       <Flex mt={4}>
         <Spacer />
-        <Button
-          mr={4}
-          colorScheme="red"
-          onClick={() => {
-            if (table.getSelectedRowModel().flatRows.length === 0) return;
-            void Browser.storage.local
-              .get(LocalDataKey.sessions)
-              .then((data) => {
-                const sessions = (data as LocalData).sessions;
-                if (!sessions) return;
-                for (const row of table.getSelectedRowModel().flatRows)
-                  delete sessions[row.original.id];
-                return Browser.storage.local.set({ sessions });
-              })
-              .then(() => {
+        {Object.keys(rowSelection).length > 0 && (
+          <Button
+            mr={4}
+            size="sm"
+            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>
+            }}
+          >
+            Delete
+          </Button>
+        )}
       </Flex>
     </>
   );

packages/web-extension/src/popup/App.tsx

@@ -18,11 +18,12 @@ import {
   RecordStartedMessage,
   RecordStoppedMessage,
   Session,
+  EventName,
 } from '../types';
 import Browser from 'webextension-polyfill';
 import { CircleButton } from '../components/CircleButton';
 import { Timer } from './Timer';
-import { pauseRecording, resumeRecording } from '../utils';
+import { pauseRecording, resumeRecording, saveSession } from '../utils';
 const RECORD_BUTTON_SIZE = 3;
 
 const channel = new Channel();
@@ -111,6 +112,12 @@ export function App() {
                       });
                       if (res.session) {
                         setNewSession(res.session);
+                        await saveSession(res.session, res.events).catch(
+                          (e) => {
+                            setErrorMessage((e as { message: string }).message);
+                          },
+                        );
+                        channel.emit(EventName.SessionUpdated, {});
                       }
                     })
                     .catch((error: Error) => {

packages/web-extension/src/popup/Timer.tsx

@@ -18,7 +18,7 @@ export function Timer({
     return () => clearInterval(interval);
   }, [startTime, ticking]);
   return (
-    <Stat textAlign="center">
+    <Stat textAlign="center" mt={4}>
       <StatNumber fontSize="3xl">{formatTime(time)}</StatNumber>
     </Stat>
   );

packages/web-extension/src/types.ts

@@ -13,13 +13,11 @@ export type Settings = {
 };
 
 export enum LocalDataKey {
-  sessions = 'sessions',
   recorderStatus = 'recorder_status',
   bufferedEvents = 'buffered_events',
 }
 
 export type LocalData = {
-  [LocalDataKey.sessions]: Record<string, Session>;
   [LocalDataKey.recorderStatus]: {
     status: RecorderStatus;
     activeTabId: number;
@@ -42,7 +40,6 @@ export type Session = {
   id: string;
   name: string;
   tags: string[];
-  events: eventWithTime[];
   createTimestamp: number;
   modifyTimestamp: number;
   recorderVersion: string;
@@ -55,6 +52,10 @@ export enum ServiceName {
   ResumeRecord = 'resume-record',
 }
 
+export enum EventName {
+  SessionUpdated = 'session-updated',
+}
+
 export enum MessageName {
   RecordScriptReady = 'rrweb-extension-record-script-ready',
   StartRecord = 'rrweb-extension-start-record',

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

@@ -143,8 +143,8 @@ class Channel {
    * @param event - event name
    * @param detail - event detail
    */
-  public emit(eventName: string, detail: unknown) {
-    const message = JSON.stringify({ type: 'event', eventName, detail });
+  public emit(event: string, detail: unknown) {
+    const message = JSON.stringify({ type: 'event', event, detail });
     void Browser.runtime.sendMessage(message);
   }
 
@@ -155,11 +155,7 @@ class Channel {
    * @param event - event name
    * @param detail - event detail
    */
-  public emitToTabs(
-    tabIds: number | number[],
-    eventName: string,
-    detail: unknown,
-  ) {
+  public emitToTabs(tabIds: number | number[], event: string, detail: unknown) {
     if (!Browser.tabs || !Browser.tabs.sendMessage)
       return Promise.reject('Can not send message to tabs in current context!');
 
@@ -168,7 +164,7 @@ class Channel {
       tabIds = [tabIds];
     }
 
-    const message = JSON.stringify({ type: 'event', eventName, detail });
+    const message = JSON.stringify({ type: 'event', event, detail });
     tabIds.forEach((tabId) => void Browser.tabs.sendMessage(tabId, message));
   }