refactor: make the extension suitable for manifest v3

packages/web-extension/package.json

@@ -1,8 +1,10 @@
 {
   "name": "web-extension",
-  "version": "0.2.0",
+  "version": "2.0.0",
   "description": "The web extension of rrweb which helps to run rrweb on any website out of box",
   "author": "Yanzhen Yu, Yun Feng",
+  "license": "MIT",
+  "private": true,
   "scripts": {
     "dev:chrome": "cross-env TARGET_BROWSER=chrome vite dev",
     "dev:firefox": "cross-env TARGET_BROWSER=firefox vite dev",
@@ -20,12 +22,10 @@
     "@vitejs/plugin-react": "^2.1.0",
     "cross-env": "^7.0.3",
     "jest": "^29.0.3",
-    "rrweb": "^2.0.0-alpha.3",
-    "rrweb-player": "^1.0.0-alpha.3",
     "ts-jest": "^29.0.1",
     "type-fest": "^2.19.0",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.2",
+    "typescript": "^4.7.3",
+    "vite": "^3.1.8",
     "vite-plugin-web-extension": "^1.4.4",
     "vite-plugin-zip": "^1.0.1",
     "webextension-polyfill": "^0.10.0"
@@ -40,6 +40,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.4.1"
+    "react-router-dom": "^6.4.1",
+    "rrweb": "^2.0.0-alpha.3",
+    "rrweb-player": "^1.0.0-alpha.3"
   }
 }

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

@@ -1,23 +1,12 @@
 import Browser from 'webextension-polyfill';
 import { Settings, SyncData, SyncDataKey } from '../types';
-import { fetchPackageVersions, getPlayerURL, getRecorderURL } from '../utils';
 
 void (async () => {
-  const recorderVersions = await fetchPackageVersions('rrweb');
-  const playerVersions = await fetchPackageVersions('rrweb-player');
-  // Use the latest version.
-  const defaultRecorderVersion = recorderVersions[0];
-  const defaultPlayerVersion = playerVersions[0];
   // assign default value to settings of this extension
   const result =
     ((await Browser.storage.sync.get(SyncDataKey.settings)) as SyncData) ||
     undefined;
-  const defaultSettings: Settings = {
-    recorderURL: getRecorderURL(defaultRecorderVersion),
-    recorderVersion: defaultRecorderVersion,
-    playerURL: getPlayerURL(defaultPlayerVersion),
-    playerVersion: defaultPlayerVersion,
-  };
+  const defaultSettings: Settings = {};
   let settings = defaultSettings;
   if (result && result.settings) {
     setDefaultSettings(result.settings, defaultSettings);
@@ -26,16 +15,8 @@ void (async () => {
   await Browser.storage.sync.set({
     settings,
   } as SyncData);
-  void fetchSourceCode(settings);
 })();
 
-Browser.storage.onChanged.addListener((changes, area) => {
-  if (area === 'sync' && changes.settings) {
-    const newValue = changes.settings.newValue as Settings;
-    void fetchSourceCode(newValue);
-  }
-});
-
 /**
  * Update existed settings with new settings.
  * Set new setting values if these properties don't exist in older versions.
@@ -66,21 +47,3 @@ function setDefaultSettings(
     }
   }
 }
-
-/**
- * Fetch rrweb source code from recorder URL and player URL.
- */
-async function fetchSourceCode(settings: Settings) {
-  if (settings.recorderURL) {
-    const code = await (await fetch(settings.recorderURL)).text();
-    await Browser.storage.local.set({
-      recorder_code: code,
-    });
-  }
-  if (settings.playerURL) {
-    const code = await (await fetch(settings.playerURL)).text();
-    await Browser.storage.local.set({
-      player_code: code,
-    });
-  }
-}

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

@@ -7,151 +7,107 @@ import {
   RecorderStatus,
   ServiceName,
   Session,
-  StartRecordResponse,
-  StopRecordResponse,
-  SyncData,
-  SyncDataKey,
+  RecordStartedMessage,
+  RecordStoppedMessage,
+  HeartBreathMessage,
+  MessageName,
 } from '../types';
 import Channel from '../utils/channel';
 
 const channel = new Channel();
 
 void (async () => {
   let storedEvents: eventWithTime[] = [];
-  let startResponseCb: ((response: StartRecordResponse) => void) | undefined =
-    undefined;
+  let startResponseCb:
+    | ((response: RecordStartedMessage) => void)
+    | undefined = undefined;
   // The callback function to remove the recorder from the page.
   let clearRecorderCb: (() => void) | undefined = undefined;
   channel.provide(ServiceName.StartRecord, async () => {
-    clearRecorderCb = await startRecord();
-    window.postMessage({ message: 'start-record' });
+    clearRecorderCb = startRecord();
     return new Promise((resolve) => {
       startResponseCb = (response) => {
         resolve(response);
       };
     });
   });
-  let stopResponseCb: ((response: StopRecordResponse) => void) | undefined =
-    undefined;
+  let stopResponseCb:
+    | ((response: RecordStoppedMessage) => void)
+    | undefined = undefined;
   channel.provide(ServiceName.StopRecord, () => {
-    window.postMessage({ message: 'stop-record' });
+    window.postMessage({ message: MessageName.StopRecord });
     return new Promise((resolve) => {
-      stopResponseCb = (response: StopRecordResponse) => {
+      stopResponseCb = (response: RecordStoppedMessage) => {
         resolve(response);
       };
     });
   });
 
-  window.addEventListener('message', (event) => {
-    const data = event.data as
-      | StartRecordResponse
-      | StopRecordResponse
-      | HeartBreathMessage;
-    if (data.message === 'start-record-response' && startResponseCb)
-      startResponseCb(data);
-    else if (data.message === 'stop-record-response' && stopResponseCb) {
-      stopResponseCb(data);
-      void saveEvents(storedEvents.concat(data.events));
-      clearRecorderCb?.();
-      clearRecorderCb = undefined;
-      storedEvents = [];
-    } else if (data.message === 'heart-beat') {
-      const events = data.events;
-      void Browser.storage.local.set({
-        [LocalDataKey.bufferedEvents]: storedEvents.concat(events),
-      });
-    }
-  });
+  window.addEventListener(
+    'message',
+    (event: {
+      data:
+        | RecordStartedMessage
+        | RecordStoppedMessage
+        | HeartBreathMessage
+        | {
+            message: MessageName;
+          };
+    }) => {
+      if (event.data.message === MessageName.RecordScriptReady)
+        window.postMessage({ message: MessageName.StartRecord });
+      else if (
+        event.data.message === MessageName.RecordStarted &&
+        startResponseCb
+      )
+        startResponseCb(event.data as RecordStartedMessage);
+      else if (
+        event.data.message === MessageName.RecordStopped &&
+        stopResponseCb
+      ) {
+        const data = event.data as RecordStoppedMessage;
+        stopResponseCb(data);
+        void saveEvents(storedEvents.concat(data.events));
+        clearRecorderCb?.();
+        clearRecorderCb = undefined;
+        storedEvents = [];
+      } else if (event.data.message === MessageName.HeartBeat) {
+        void Browser.storage.local.set({
+          [LocalDataKey.bufferedEvents]: storedEvents.concat(
+            (event.data as HeartBreathMessage).events,
+          ),
+        });
+      }
+    },
+  );
 
   const localData = (await Browser.storage.local.get()) as LocalData;
   if (localData?.recorder_status?.status === RecorderStatus.RECORDING) {
-    clearRecorderCb = await startRecord();
+    clearRecorderCb = startRecord();
     storedEvents = localData.buffered_events || [];
   }
 })();
 
-async function startRecord() {
-  const data = await Browser.storage.local.get('recorder_code');
-  const recorderCode = data['recorder_code'] as string | undefined;
-  if (!recorderCode || recorderCode.length === 0) return;
-
+function startRecord() {
   const scriptEl = document.createElement('script');
-  try {
-    const uniqueVariablePrefix = '__rrweb_extension_unique_prefix_';
-    const events = `${uniqueVariablePrefix}events`;
-    const stopFn = `${uniqueVariablePrefix}stopFn`;
-    const setIntervalId = `${uniqueVariablePrefix}setIntervalId`;
-    const record = `${uniqueVariablePrefix}record`;
-    scriptEl.textContent = `
-    ${recorderCode}
-    var ${events} = [];
-    var ${stopFn} = null;
-    var ${setIntervalId} = null;
-
-    function ${record}() {
-      ${events} = [];
-      let recorder;
-      try {
-        recorder = rrwebRecord;
-      } catch (e) {
-        recorder = rrweb.record;
-      }
-      ${stopFn} = recorder({
-        emit: (event) => {
-          ${events}.push(event);
-        },
-      });
-    }
-
-    window.addEventListener('message', (event) => {
-      const data = event.data;
-      if (data.message === 'stop-record') {
-        if (${stopFn}) ${stopFn}();
-        clearInterval(${setIntervalId});
-        window.postMessage({
-          message: 'stop-record-response',
-          events: ${events},
-          endTimestamp: Date.now(),
-        });
-      }
-    });
-
-    window.postMessage({
-      message: 'start-record-response',
-      startTimestamp: Date.now(),
-    });
-    ${record}();
-
-    ${setIntervalId} = setInterval(() => {
-      window.postMessage({
-        message: 'heart-beat',
-        events: ${events},
-      });
-    }, 50);
-    `;
-    document.documentElement.appendChild(scriptEl);
-    return () => {
-      document.documentElement.removeChild(scriptEl);
-    };
-  } catch (e) {
+  scriptEl.src = Browser.runtime.getURL('content/inject.js');
+  document.documentElement.appendChild(scriptEl);
+  return () => {
     document.documentElement.removeChild(scriptEl);
-  }
+  };
 }
 
 async function saveEvents(events: eventWithTime[]) {
-  const recorderSettings = (await Browser.storage.sync.get(
-    SyncDataKey.settings,
-  )) as SyncData;
-  const { recorderVersion, recorderURL } = recorderSettings.settings;
   const newSession: Session = {
     id: nanoid(),
     name: document.title,
     tags: [],
     events,
     createTimestamp: Date.now(),
     modifyTimestamp: Date.now(),
-    recorderVersion,
-    recorderURL,
+    recorderVersion: ((Browser.runtime.getManifest() as unknown) as {
+      recorder_version: string;
+    }).recorder_version,
   };
   const data = (await Browser.storage.local.get(
     LocalDataKey.sessions,
@@ -160,8 +116,3 @@ async function saveEvents(events: eventWithTime[]) {
   data.sessions[newSession.id] = newSession;
   await Browser.storage.local.set(data);
 }
-
-type HeartBreathMessage = {
-  message: 'heart-beat';
-  events: eventWithTime[];
-};

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

@@ -0,0 +1,59 @@
+import { record } from 'rrweb';
+import { eventWithTime, recordOptions } from 'rrweb/typings/types';
+import { MessageName, RecordStartedMessage } from '../types';
+
+const events: eventWithTime[] = [];
+let stopFn: (() => void) | null = null;
+let setIntervalId: number | null = null;
+
+function startRecord(config: recordOptions<eventWithTime>) {
+  events.length = 0;
+  stopFn =
+    record({
+      emit: (event) => {
+        events.push(event);
+      },
+      ...config,
+    }) || null;
+  window.postMessage({
+    message: MessageName.RecordStarted,
+    startTimestamp: Date.now(),
+  } as RecordStartedMessage);
+  setIntervalId = (setInterval(() => {
+    window.postMessage({
+      message: MessageName.HeartBeat,
+      events,
+    });
+  }, 50) as unknown) as number;
+}
+
+window.addEventListener(
+  'message',
+  (event: {
+    data: {
+      message: MessageName;
+      config?: recordOptions<eventWithTime>;
+    };
+  }) => {
+    const data = event.data;
+    const eventHandler = {
+      [MessageName.StartRecord]: () => {
+        startRecord(data.config || {});
+      },
+      [MessageName.StopRecord]: () => {
+        if (stopFn) stopFn();
+        if (setIntervalId) clearInterval(setIntervalId);
+        window.postMessage({
+          message: MessageName.RecordStopped,
+          events,
+          endTimestamp: Date.now(),
+        });
+      },
+    } as Record<MessageName, () => void>;
+    if (eventHandler[data.message]) eventHandler[data.message]();
+  },
+);
+
+window.postMessage({
+  message: MessageName.RecordScriptReady,
+});