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>

packages/web-extension/src/components/CircleButton.tsx

@@ -0,0 +1,33 @@
+import { Button, ButtonProps } from '@chakra-ui/react';
+
+interface CircleButtonProps extends ButtonProps {
+  diameter: number;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  title?: string;
+}
+
+export function CircleButton({
+  diameter,
+  onClick,
+  children,
+  title,
+  ...rest
+}: CircleButtonProps) {
+  return (
+    <Button
+      w={`${diameter}rem`}
+      h={`${diameter}rem`}
+      padding={`${diameter / 2}rem`}
+      borderRadius={9999}
+      textAlign="center"
+      bgColor="gray.100"
+      boxSizing="content-box"
+      onClick={onClick}
+      title={title}
+      {...rest}
+    >
+      {children}
+    </Button>
+  );
+}