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/options/App.tsx
+++ b/packages/web-extension/src/options/App.tsx
@@ -0,0 +1,31 @@
+import { Route, Routes } from 'react-router-dom';
+import SidebarWithHeader from '~/components/SidebarWithHeader';
+import { FiList, FiSettings } from 'react-icons/fi';
+import { Box } from '@chakra-ui/react';
+
+export default function App() {
+  return (
+    <SidebarWithHeader
+      title="Settings"
+      headBarItems={[
+        {
+          label: 'Sessions',
+          icon: FiList,
+          href: '/pages/index.html#',
+        },
+        {
+          label: 'Settings',
+          icon: FiSettings,
+          href: '#',
+        },
+      ]}
+      sideBarItems={[]}
+    >
+      <Box p="10">
+        <Routes>
+          <Route path="/" element={<></>} />
+        </Routes>
+      </Box>
+    </SidebarWithHeader>
+  );
+}
--- a/packages/web-extension/src/options/index.html
+++ b/packages/web-extension/src/options/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>rrweb settings</title>
+<html>
+  <body>
+    <div id="root"></div>
+  </body>
+  <script type="module" src="./index.tsx"></script>
+</html>
--- a/packages/web-extension/src/options/index.tsx
+++ b/packages/web-extension/src/options/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import * as ReactDOM from 'react-dom/client';
+import { createHashRouter, RouterProvider } from 'react-router-dom';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+const router = createHashRouter([
+  {
+    path: '/*',
+    element: <App />,
+  },
+]);
+
+rootElement &&
+  ReactDOM.createRoot(rootElement).render(
+    <React.StrictMode>
+      <ChakraProvider>
+        <RouterProvider router={router} />
+      </ChakraProvider>
+    </React.StrictMode>,
+  );