rrweb-io · Juice10 · Dec 10, 2024 · Aug 26, 2024 · Aug 26, 2024 · Aug 28, 2024
diff --git a/.changeset/odd-onions-brush.md b/.changeset/odd-onions-brush.md
@@ -0,0 +1,5 @@
+---
+"@rrweb/web-extension": patch
+---
+
+fix: remove the permission not needed and update the player style link
diff --git a/.github/workflows/extension-release.yml b/.github/workflows/extension-release.yml
@@ -0,0 +1,29 @@
+name: Extension Release
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish-extension:
+    name: Publish to Chrome Web Store
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.head_ref }}
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build Project
+        run: NODE_OPTIONS='--max-old-space-size=4096' DISABLE_WORKER_INLINING=true yarn turbo run prepublish --filter=@rrweb/web-extension
+
+      - uses: mnao305/[email protected]
+        with:
+          extension-id: 'pdaldeopoccdhlkabbkcjmecmmoninhe'
+          file-path: ./packages/web-extension/dist/chrome.zip
+          client-id: ${{ secrets.CWS_CLIENT_ID }}
+          client-secret: ${{ secrets.CWS_CLIENT_SECRET }}
+          refresh-token: ${{ secrets.CWS_REFRESH_TOKEN }}
+          publish: true
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
@@ -14,7 +14,7 @@
     "svelte": "^4.2.14",
     "svelte-check": "^3.4.3",
     "svelte-preprocess": "^5.0.3",
-    "svelte2tsx": "^0.7.6",
+    "svelte2tsx": "^0.7.30",
     "tslib": "^2.0.0",
     "vite": "^5.3.1"
   },

diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json
@@ -20,8 +20,10 @@
   "devDependencies": {
     "@rrweb/types": "^2.0.0-alpha.18",
     "@types/react-dom": "^18.0.6",
+    "@types/semver": "^7.5.8",
     "@types/webextension-polyfill": "^0.9.1",
     "@vitejs/plugin-react": "^4.2.1",
+    "semver": "^7.6.3",
     "type-fest": "^2.19.0",
     "vite": "^5.3.1",
     "vite-plugin-web-extension": "^4.1.3",

diff --git a/packages/web-extension/src/content/index.ts b/packages/web-extension/src/content/index.ts
@@ -1,4 +1,4 @@
-import Browser, { type Storage } from 'webextension-polyfill';
+import Browser from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
 import type { eventWithTime } from '@rrweb/types';
 import {
@@ -166,9 +166,7 @@ async function initMainPage() {
 async function initCrossOriginIframe() {
   Browser.storage.local.onChanged.addListener((change) => {
     if (change[LocalDataKey.recorderStatus]) {
-      const statusChange = change[
-        LocalDataKey.recorderStatus
-      ] as Storage.StorageChange;
+      const statusChange = change[LocalDataKey.recorderStatus];
       const newStatus =
         statusChange.newValue as LocalData[LocalDataKey.recorderStatus];
       if (newStatus.status === RecorderStatus.RECORDING) startRecord();

diff --git a/packages/web-extension/src/manifest.json b/packages/web-extension/src/manifest.json
@@ -14,7 +14,7 @@
       "48": "icon48.png",
       "128": "icon128.png"
     },
-    "permissions": ["activeTab", "tabs", "storage", "unlimitedStorage"]
+    "permissions": ["activeTab", "storage", "unlimitedStorage"]
   },
   "v2": {
     "common": {

diff --git a/packages/web-extension/src/pages/Player.tsx b/packages/web-extension/src/pages/Player.tsx
@@ -31,7 +31,7 @@ export default function Player() {
 
         const linkEl = document.createElement('link');
         linkEl.href =
-          'https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css';
+          'https://cdn.jsdelivr.net/npm/rrweb-player@alpha/dist/style.min.css';
         linkEl.rel = 'stylesheet';
         document.head.appendChild(linkEl);
         playerRef.current = new Replayer({

diff --git a/packages/web-extension/src/pages/index.html b/packages/web-extension/src/pages/index.html
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
-<meta charset="utf-8" />
-<title>rrweb</title>
 <html>
-  <body>
-    <div id="root"></div>
-  </body>
-  <script type="module" src="./index.tsx"></script>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>rrweb</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+<script type="module" src="./index.tsx"></script>
+
+</html>
diff --git a/packages/web-extension/vite.config.ts b/packages/web-extension/vite.config.ts
@@ -4,6 +4,7 @@ import zip from 'vite-plugin-zip-pack';
 import * as path from 'path';
 import type { PackageJson } from 'type-fest';
 import react from '@vitejs/plugin-react';
+import semver from 'semver';
 
 const emptyOutDir = !process.argv.includes('--watch');
 
@@ -39,6 +40,29 @@ function useSpecialFormat(
   };
 }
 
+/**
+ * Get the extension version based on the rrweb version.
+ */
+function getExtensionVersion(rrwebVersion: string): string {
+  const parsedVersion = semver.parse(rrwebVersion.replace('^', ''));
+
+  if (!parsedVersion) {
+    throw new Error('Invalid version format');
+  }
+
+  if (parsedVersion.prerelease.length > 0) {
+    // If it's a pre-release version like alpha or beta, strip the pre-release identifier
+    return `${parsedVersion.major}.${parsedVersion.minor}.${
+      parsedVersion.patch
+    }.${parsedVersion.prerelease[1] || 0}`;
+  } else if (rrwebVersion === '2.0.0') {
+    // This version has already been released as the first version. We need to add a patch version to it to avoid publishing conflicts.
+    return '2.0.0.100';
+  } else {
+    return rrwebVersion;
+  }
+}
+
 export default defineConfig({
   root: 'src',
   // Configure our outputs - nothing special, this is normal vite config
@@ -73,10 +97,11 @@ export default defineConfig({
         const BrowserName =
           process.env.TARGET_BROWSER === 'chrome' ? 'chrome' : 'firefox';
         const commonManifest = originalManifest.common;
+        const rrwebVersion = packageJson.dependencies!.rrweb!.replace('^', '');
         const manifest = {
-          version: '2.0.0',
+          version: getExtensionVersion(rrwebVersion),
           author: packageJson.author,
-          version_name: packageJson.dependencies?.rrweb?.replace('^', ''),
+          version_name: rrwebVersion,
           ...commonManifest,
         };
         Object.assign(
@@ -92,7 +117,7 @@ export default defineConfig({
         watchIgnored: ['*.md', '*.log'],
       },
       additionalInputs: ['pages/index.html', 'content/inject.ts'],
-    }),
+    }) as PluginOption,
     // https://github.com/aklinker1/vite-plugin-web-extension/issues/50#issuecomment-1317922947
     // transfer inject.ts to iife format to avoid error
     useSpecialFormat(

diff --git a/turbo.json b/turbo.json
@@ -7,7 +7,7 @@
     "vite.config.defaults.ts",
     "tsconfig.json"
   ],
-  "globalPassThroughEnv": ["PUPPETEER_HEADLESS"],
+  "globalPassThroughEnv": ["PUPPETEER_HEADLESS", "DISABLE_WORKER_INLINING"],
   "tasks": {
     "prepublish": {
       "dependsOn": ["^prepublish", "//#references:update"],

diff --git a/vite.config.default.ts b/vite.config.default.ts
@@ -2,13 +2,17 @@
 import dts from 'vite-plugin-dts';
 import { copyFileSync } from 'node:fs';
 import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
-import glob from 'fast-glob';
 import { build, Format } from 'esbuild';
 import { resolve } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
 
 // don't empty out dir if --watch flag is passed
 const emptyOutDir = !process.argv.includes('--watch');
+/**
+ * Chrome web store does not allow base64 inline workers.
+ * For chrome extension, we need to disable worker inlining to pass the review.
+ */
+const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === 'true';
 
 function minifyAndUMDPlugin({
   name,
@@ -157,6 +161,19 @@ export default function (
         },
       }),
       minifyAndUMDPlugin({ name, outDir }),
+      {
+        name: 'remove-worker-inline',
+        enforce: 'pre',
+        transform(code, id) {
+          if (!disableWorkerInlining) return;
+          if (/\.(js|ts|jsx|tsx)$/.test(id)) {
+            return {
+              code: code.replace(/\?worker&inline/g, '?worker'),
+              map: null,
+            };
+          }
+        },
+      },
       ...plugins,
     ],
   }));

diff --git a/yarn.lock b/yarn.lock
@@ -2820,7 +2820,7 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/semver@^7.3.12", "@types/semver@^7.5.0":
+"@types/semver@^7.3.12", "@types/semver@^7.5.0", "@types/semver@^7.5.8":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
@@ -8985,6 +8985,11 @@ semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.6.3:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 semver@~7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -9560,7 +9565,15 @@ svelte-preprocess@^5.0.3, svelte-preprocess@^5.1.3:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
-svelte2tsx@^0.7.6, svelte2tsx@~0.7.0:
+svelte2tsx@^0.7.30:
+  version "0.7.30"
+  resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.7.30.tgz#5dbd9e38c2fe54170b441409ebb2ee46c807be9e"
+  integrity sha512-sHXK/vw/sVJmFuPSq6zeKrtuZKvo0jJyEi8ybN0dfrqSYVvHu8zFbO0zQKAL8y/fYackYojH41EJGe6v8rd5fw==
+  dependencies:
+    dedent-js "^1.0.1"
+    pascal-case "^3.1.1"
+
+svelte2tsx@~0.7.0:
   version "0.7.9"
   resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.7.9.tgz#a2b42e218e8808b9bd4b292dedba18ae8468abb0"
   integrity sha512-Rm+0LAwg9wT4H2IsR8EaM9EWErTzi9LmuZKxkH5b1ua94XjQmwHstBP4VabLgA9AE6XmwBg+xK7Cjzwfm6ustQ==