add ignoreRequestFn

Author: jlalmes

packages/rrweb-webextension/.github/workflows/submit.yml

@@ -0,0 +1,34 @@
+name: "Submit to Web Store"
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+      - uses: pnpm/[email protected]
+        with:
+          version: latest
+          run_install: true
+      - name: Use Node.js 16.x
+        uses: actions/[email protected]
+        with:
+          node-version: 16.x
+          cache: "pnpm"
+      - name: Build the extension
+        run: pnpm build
+      - name: Package the extension into a zip artifact
+        run: pnpm package
+      - name: Browser Platform Publish
+        uses: PlasmoHQ/bpp@v3
+        with:
+          keys: ${{ secrets.SUBMIT_KEYS }}
+          artifact: build/chrome-mv3-prod.zip

packages/rrweb-webextension/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

packages/rrweb-webextension/README.md

@@ -0,0 +1,33 @@
+This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+pnpm dev
+# or
+npm run dev
+```
+
+Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+
+You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+
+For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+
+## Making production build
+
+Run the following:
+
+```bash
+pnpm build
+# or
+npm run build
+```
+
+This should create a production bundle for your extension, ready to be zipped and published to the stores.
+
+## Submit to the webstores
+
+The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!

packages/rrweb-webextension/assets/icon.png

@@ -0,0 +1,12 @@
+export {};
+
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+chrome.scripting.registerContentScripts([
+  {
+    id: 'content',
+    matches: ['<all_urls>'],
+    js: ['content.1bc94c80.js'],
+    runAt: 'document_start',
+    world: 'MAIN',
+  },
+]);

packages/rrweb-webextension/background.ts

@@ -0,0 +1,19 @@
+import { EventType, eventWithTime } from '@rrweb/types';
+import { getRecordConsolePlugin, getRecordNetworkPlugin, record } from 'rrweb';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const log: typeof console.log =
+  console.log['__rrweb_original__'] || console.log;
+
+record({
+  emit(event: eventWithTime) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (event.type === EventType.Plugin) {
+      log(event);
+    }
+  },
+  plugins: [
+    getRecordConsolePlugin(),
+    getRecordNetworkPlugin({ captureHeaders: true, captureBody: true }),
+  ],
+});

packages/rrweb-webextension/content.ts

@@ -0,0 +1,34 @@
+{
+  "name": "rrweb-webextension",
+  "displayName": "Rrweb webextension",
+  "version": "0.0.1",
+  "description": "A basic Plasmo extension.",
+  "author": "jlalmes",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "build": "plasmo build"
+  },
+  "dependencies": {
+    "plasmo": "0.64.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rrweb-snapshot": "^2.0.0-alpha.4"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.210",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
+    "prettier": "2.8.3",
+    "typescript": "4.9.4",
+    "@plasmohq/prettier-plugin-sort-imports": "3.6.1"
+  },
+  "manifest": {
+    "host_permissions": [
+      "https://*/*"
+    ],
+    "permissions": [
+      "scripting"
+    ]
+  }
+}

packages/rrweb-webextension/package.json

@@ -0,0 +1,24 @@
+{
+  "extends": "plasmo/templates/tsconfig.base",
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    ".plasmo/index.d.ts",
+    "./**/*.ts",
+    "./**/*.tsx"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "~*": [
+        "./*"
+      ]
+    },
+    "baseUrl": "."
+  },
+  "references": [
+    {
+      "path": "../rrweb-snapshot"
+    }
+  ]
+}

packages/rrweb-webextension/tsconfig.json

@@ -27,6 +27,7 @@ export type InitiatorType =
 
 type NetworkRecordOptions = {
   initiatorType?: InitiatorType[];
+  ignoreRequestFn?: (data: NetworkRequest) => boolean;
   recordHeaders?:
     | boolean
     | StringifyOptions
@@ -68,6 +69,7 @@ const defaultNetworkOptions: NetworkRecordOptions = {
     'video',
     'xmlhttprequest',
   ],
+  ignoreEventFn: () => false,
   recordHeaders: false,
   recordBody: false,
   recordInitialEvents: false,
@@ -91,14 +93,10 @@ export type NetworkData = {
 
 type networkCallback = (data: NetworkData) => void;
 
-type NetworkObserverOptions = NetworkRecordOptions & {
-  initiatorType: InitiatorType[];
-};
-
 function initPerformanceObserver(
   cb: networkCallback,
   win: IWindow,
-  options: NetworkObserverOptions,
+  options: Required<NetworkRecordOptions>,
 ) {
   if (!('performance' in win)) {
     return () => {
@@ -151,7 +149,7 @@ function initPerformanceObserver(
 function initXhrObserver(
   cb: networkCallback,
   win: IWindow,
-  options: NetworkObserverOptions,
+  options: Required<NetworkRecordOptions>,
 ): listenerHandler {
   if (!options.initiatorType.includes('xmlhttprequest')) {
     return () => {
@@ -166,7 +164,7 @@ function initXhrObserver(
 function initFetchObserver(
   cb: networkCallback,
   win: IWindow,
-  options: NetworkObserverOptions,
+  options: Required<NetworkRecordOptions>,
 ): listenerHandler {
   if (!options.initiatorType.includes('fetch')) {
     return () => {
@@ -283,15 +281,19 @@ function initFetchObserver(
 }
 
 function initNetworkObserver(
-  cb: networkCallback,
+  callback: networkCallback,
   win: IWindow, // top window or in an iframe
   options: NetworkRecordOptions,
 ): listenerHandler {
   const networkOptions = (options
     ? Object.assign({}, defaultNetworkOptions, options)
-    : defaultNetworkOptions) as {
-    initiatorType: InitiatorType[];
-    recordInitialEvents: boolean;
+    : defaultNetworkOptions) as Required<NetworkRecordOptions>;
+
+  const cb: networkCallback = (data) => {
+    const requests = data.requests.filter((request) =>
+      networkOptions.ignoreRequestFn(request),
+    );
+    callback({ ...data, requests });
   };
 
   const performanceObserver = initPerformanceObserver(cb, win, networkOptions);