rrweb extension implementation (#1044)

* feat: add rrweb web-extension package * refactor: make the extension suitable for manifest v3 * update tsconfig.json * use version_name rather than recorder_version in manifest.json * update manifest.json * enable to keep recording after changing tabs * enable to record between tabs and urls * fix CI error * try to fix CI error * feat: add pause and resume buttons * feat: add a link to new session after recording * improve session list * refactor: migrate session storage from chrome local storage to indexedDB * feat: add pagination to session list * fix: multiple recorders are started after pausing and resuming process * fix: can't stop recording on firefox browser * update type import of 'eventWithTime' * fix CI error * doc: add readme * Apply suggestions from Justin's code review Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * refactor: make use of webNavigation API to implement recording consistent during page navigation * fix firefox compatibility issue and add title to pages * add mouseleave listener to enhance the recording liability * fix firefox compatibility issue and improve the experience of recording resume after closing tabs * update tsconfig * upgrade vite-plugin-web-extension config to fix some bugs on facebook web page * update import links * refactor: cross tab recording mechanism apply Justin's suggestion * refactor: slipt util/index.ts into multiple files * implement cross-origin iframe recording * fix: regression of issue: ShadowHost can't be a string (issue 941) * refactor shadow dom recording to make tests cover key code * Apply formatting changes * increase the node memory limitation to avoid CI failure * Create lovely-pears-cross.md * Apply formatting changes * Update packages/web-extension/package.json * Update .changeset/lovely-pears-cross.md * update change logs * delete duplicated property --------- Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
parent e5c0eae352
commit b837600e80
40 changed files with 5935 additions and 493 deletions
--- a/packages/web-extension/src/pages/Player.tsx
+++ b/packages/web-extension/src/pages/Player.tsx
@@ -0,0 +1,68 @@
+import { useRef, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import Replayer from 'rrweb-player';
+import {
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Center,
+} from '@chakra-ui/react';
+import { getEvents, getSession } from '~/utils/storage';
+
+export default function Player() {
+  const playerElRef = useRef<HTMLDivElement>(null);
+  const playerRef = useRef<Replayer | null>(null);
+  const { sessionId } = useParams();
+  const [sessionName, setSessionName] = useState('');
+
+  useEffect(() => {
+    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/rrweb-player@latest/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 (
+    <>
+      <Breadcrumb mb={5} fontSize="md">
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Sessions</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink>{sessionName}</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      <Center>
+        <Box ref={playerElRef}></Box>
+      </Center>
+    </>
+  );
+}