Skip to content

Commit 4fd55c0

Browse files
YunFeng0817YunFeng0817
authored
feat: add CI for publishing chrome extension (#1568)
* fix: remove the permission not needed and update the player style link * fix: change the way of importing worker script * improve the extension version * build: add process env to disable inline worker import * improve style file * upgrade svelte2tsx * disable eslint check for that line * merge the extension-release action into release action --------- Co-authored-by: YunFeng0817 <[email protected]>
1 parent 1db7a99 commit 4fd55c0

File tree

12 files changed

+130
-26
lines changed

12 files changed

+130
-26
lines changed

‎.changeset/odd-onions-brush.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@rrweb/web-extension": patch
3+
---
4+
5+
fix: remove the permission not needed and update the player style link

‎.github/workflows/release.yml

+14-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,17 @@ jobs:
3333
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
3434
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
3535

36-
# - name: Send a Slack notification if a publish happens
37-
# if: steps.changesets.outputs.published == 'true'
38-
# # You can do something when a publish happens.
39-
# run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
36+
- name: Build Chrome Extension
37+
if: steps.changesets.outputs.published == 'true'
38+
run: NODE_OPTIONS='--max-old-space-size=4096' DISABLE_WORKER_INLINING=true yarn turbo run prepublish --filter=@rrweb/web-extension
39+
40+
- name: Publish Chrome Extension
41+
uses: mnao305/[email protected]
42+
if: steps.changesets.outputs.published == 'true'
43+
with:
44+
extension-id: 'pdaldeopoccdhlkabbkcjmecmmoninhe'
45+
file-path: ./packages/web-extension/dist/chrome.zip
46+
client-id: ${{ secrets.CWS_CLIENT_ID }}
47+
client-secret: ${{ secrets.CWS_CLIENT_SECRET }}
48+
refresh-token: ${{ secrets.CWS_REFRESH_TOKEN }}
49+
publish: true

‎packages/rrweb-player/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"svelte": "^4.2.14",
1515
"svelte-check": "^3.4.3",
1616
"svelte-preprocess": "^5.0.3",
17-
"svelte2tsx": "^0.7.6",
17+
"svelte2tsx": "^0.7.30",
1818
"tslib": "^2.0.0",
1919
"vite": "^5.3.1"
2020
},

‎packages/web-extension/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,12 @@
1919
},
2020
"devDependencies": {
2121
"@rrweb/types": "^2.0.0-alpha.18",
22+
"@types/chrome": "^0.0.287",
2223
"@types/react-dom": "^18.0.6",
24+
"@types/semver": "^7.5.8",
2325
"@types/webextension-polyfill": "^0.9.1",
2426
"@vitejs/plugin-react": "^4.2.1",
27+
"semver": "^7.6.3",
2528
"type-fest": "^2.19.0",
2629
"vite": "^5.3.1",
2730
"vite-plugin-web-extension": "^4.1.3",

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Browser, { type Storage } from 'webextension-polyfill';
1+
import Browser from 'webextension-polyfill';
22
import { nanoid } from 'nanoid';
33
import type { eventWithTime } from '@rrweb/types';
44
import {
@@ -166,9 +166,7 @@ async function initMainPage() {
166166
async function initCrossOriginIframe() {
167167
Browser.storage.local.onChanged.addListener((change) => {
168168
if (change[LocalDataKey.recorderStatus]) {
169-
const statusChange = change[
170-
LocalDataKey.recorderStatus
171-
] as Storage.StorageChange;
169+
const statusChange = change[LocalDataKey.recorderStatus];
172170
const newStatus =
173171
statusChange.newValue as LocalData[LocalDataKey.recorderStatus];
174172
if (newStatus.status === RecorderStatus.RECORDING) startRecord();

‎packages/web-extension/src/manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"48": "icon48.png",
1515
"128": "icon128.png"
1616
},
17-
"permissions": ["activeTab", "tabs", "storage", "unlimitedStorage"]
17+
"permissions": ["activeTab", "storage", "unlimitedStorage"]
1818
},
1919
"v2": {
2020
"common": {

‎packages/web-extension/src/pages/Player.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/// <reference types="chrome"/>
12
import { useRef, useEffect, useState } from 'react';
23
import { useParams } from 'react-router-dom';
34
import Replayer from 'rrweb-player';
@@ -29,9 +30,10 @@ export default function Player() {
2930
.then((events) => {
3031
if (!playerElRef.current) return;
3132

33+
const manifest = chrome.runtime.getManifest();
34+
const rrwebPlayerVersion = manifest.version_name || manifest.version;
3235
const linkEl = document.createElement('link');
33-
linkEl.href =
34-
'https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css';
36+
linkEl.href = `https://cdn.jsdelivr.net/npm/rrweb-player@${rrwebPlayerVersion}/dist/style.min.css`;
3537
linkEl.rel = 'stylesheet';
3638
document.head.appendChild(linkEl);
3739
playerRef.current = new Replayer({
@@ -46,6 +48,7 @@ export default function Player() {
4648
console.error(err);
4749
});
4850
return () => {
51+
// eslint-disable-next-line
4952
playerRef.current?.pause();
5053
};
5154
}, [sessionId]);

‎packages/web-extension/src/pages/index.html

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<!DOCTYPE html>
2-
<meta charset="utf-8" />
3-
<title>rrweb</title>
42
<html>
5-
<body>
6-
<div id="root"></div>
7-
</body>
8-
<script type="module" src="./index.tsx"></script>
9-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>rrweb</title>
7+
</head>
8+
9+
<body>
10+
<div id="root"></div>
11+
</body>
12+
<script type="module" src="./index.tsx"></script>
13+
14+
</html>

‎packages/web-extension/vite.config.ts

+28-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import zip from 'vite-plugin-zip-pack';
44
import * as path from 'path';
55
import type { PackageJson } from 'type-fest';
66
import react from '@vitejs/plugin-react';
7+
import semver from 'semver';
78

89
const emptyOutDir = !process.argv.includes('--watch');
910

@@ -39,6 +40,29 @@ function useSpecialFormat(
3940
};
4041
}
4142

43+
/**
44+
* Get the extension version based on the rrweb version.
45+
*/
46+
function getExtensionVersion(rrwebVersion: string): string {
47+
const parsedVersion = semver.parse(rrwebVersion.replace('^', ''));
48+
49+
if (!parsedVersion) {
50+
throw new Error('Invalid version format');
51+
}
52+
53+
if (parsedVersion.prerelease.length > 0) {
54+
// If it's a pre-release version like alpha or beta, strip the pre-release identifier
55+
return `${parsedVersion.major}.${parsedVersion.minor}.${
56+
parsedVersion.patch
57+
}.${parsedVersion.prerelease[1] || 0}`;
58+
} else if (rrwebVersion === '2.0.0') {
59+
// This version has already been released as the first version. We need to add a patch version to it to avoid publishing conflicts.
60+
return '2.0.0.100';
61+
} else {
62+
return rrwebVersion;
63+
}
64+
}
65+
4266
export default defineConfig({
4367
root: 'src',
4468
// Configure our outputs - nothing special, this is normal vite config
@@ -73,10 +97,11 @@ export default defineConfig({
7397
const BrowserName =
7498
process.env.TARGET_BROWSER === 'chrome' ? 'chrome' : 'firefox';
7599
const commonManifest = originalManifest.common;
100+
const rrwebVersion = packageJson.dependencies!.rrweb!.replace('^', '');
76101
const manifest = {
77-
version: '2.0.0',
102+
version: getExtensionVersion(rrwebVersion),
78103
author: packageJson.author,
79-
version_name: packageJson.dependencies?.rrweb?.replace('^', ''),
104+
version_name: rrwebVersion,
80105
...commonManifest,
81106
};
82107
Object.assign(
@@ -92,7 +117,7 @@ export default defineConfig({
92117
watchIgnored: ['*.md', '*.log'],
93118
},
94119
additionalInputs: ['pages/index.html', 'content/inject.ts'],
95-
}),
120+
}) as PluginOption,
96121
// https://github.com/aklinker1/vite-plugin-web-extension/issues/50#issuecomment-1317922947
97122
// transfer inject.ts to iife format to avoid error
98123
useSpecialFormat(

‎turbo.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"vite.config.defaults.ts",
88
"tsconfig.json"
99
],
10-
"globalPassThroughEnv": ["PUPPETEER_HEADLESS"],
10+
"globalPassThroughEnv": ["PUPPETEER_HEADLESS", "DISABLE_WORKER_INLINING"],
1111
"tasks": {
1212
"prepublish": {
1313
"dependsOn": ["^prepublish", "//#references:update"],

‎vite.config.default.ts

+18-1
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@
22
import dts from 'vite-plugin-dts';
33
import { copyFileSync } from 'node:fs';
44
import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
5-
import glob from 'fast-glob';
65
import { build, Format } from 'esbuild';
76
import { resolve } from 'path';
87
import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
98

109
// don't empty out dir if --watch flag is passed
1110
const emptyOutDir = !process.argv.includes('--watch');
11+
/**
12+
* Chrome web store does not allow base64 inline workers.
13+
* For chrome extension, we need to disable worker inlining to pass the review.
14+
*/
15+
const disableWorkerInlining = process.env.DISABLE_WORKER_INLINING === 'true';
1216

1317
function minifyAndUMDPlugin({
1418
name,
@@ -157,6 +161,19 @@ export default function (
157161
},
158162
}),
159163
minifyAndUMDPlugin({ name, outDir }),
164+
{
165+
name: 'remove-worker-inline',
166+
enforce: 'pre',
167+
transform(code, id) {
168+
if (!disableWorkerInlining) return;
169+
if (/\.(js|ts|jsx|tsx)$/.test(id)) {
170+
return {
171+
code: code.replace(/\?worker&inline/g, '?worker'),
172+
map: null,
173+
};
174+
}
175+
},
176+
},
160177
...plugins,
161178
],
162179
}));

‎yarn.lock

+40-2
Original file line numberDiff line numberDiff line change
@@ -2585,6 +2585,14 @@
25852585
dependencies:
25862586
"@babel/types" "^7.20.7"
25872587

2588+
"@types/chrome@^0.0.287":
2589+
version "0.0.287"
2590+
resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.287.tgz#239969b1195b441836d2137125543b5241c41157"
2591+
integrity sha512-wWhBNPNXZHwycHKNYnexUcpSbrihVZu++0rdp6GEk5ZgAglenLx+RwdEouh6FrHS0XQiOxSd62yaujM1OoQlZQ==
2592+
dependencies:
2593+
"@types/filesystem" "*"
2594+
"@types/har-format" "*"
2595+
25882596
"@types/cookie@^0.6.0":
25892597
version "0.6.0"
25902598
resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.6.0.tgz#eac397f28bf1d6ae0ae081363eca2f425bedf0d5"
@@ -2622,6 +2630,18 @@
26222630
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
26232631
integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
26242632

2633+
"@types/filesystem@*":
2634+
version "0.0.36"
2635+
resolved "https://registry.yarnpkg.com/@types/filesystem/-/filesystem-0.0.36.tgz#7227c2d76bfed1b21819db310816c7821d303857"
2636+
integrity sha512-vPDXOZuannb9FZdxgHnqSwAG/jvdGM8Wq+6N4D/d80z+D4HWH+bItqsZaVRQykAn6WEVeEkLm2oQigyHtgb0RA==
2637+
dependencies:
2638+
"@types/filewriter" "*"
2639+
2640+
"@types/filewriter@*":
2641+
version "0.0.33"
2642+
resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.33.tgz#d9d611db9d9cd99ae4e458de420eeb64ad604ea8"
2643+
integrity sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g==
2644+
26252645
"@types/[email protected]":
26262646
version "11.0.1"
26272647
resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-11.0.1.tgz#f542ec47810532a8a252127e6e105f487e0a6ea5"
@@ -2637,6 +2657,11 @@
26372657
dependencies:
26382658
"@types/node" "*"
26392659

2660+
"@types/har-format@*":
2661+
version "1.2.16"
2662+
resolved "https://registry.yarnpkg.com/@types/har-format/-/har-format-1.2.16.tgz#b71ede8681400cc08b3685f061c31e416cf94944"
2663+
integrity sha512-fluxdy7ryD3MV6h8pTfTYpy/xQzCFC7m89nOH9y94cNqJ1mDIDPut7MnRHI3F6qRmh/cT2fUjG1MLdCNb4hE9A==
2664+
26402665
"@types/http-cache-semantics@^4.0.2":
26412666
version "4.0.4"
26422667
resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz#b979ebad3919799c979b17c72621c0bc0a31c6c4"
@@ -2820,7 +2845,7 @@
28202845
"@types/prop-types" "*"
28212846
csstype "^3.0.2"
28222847

2823-
"@types/semver@^7.3.12", "@types/semver@^7.5.0":
2848+
"@types/semver@^7.3.12", "@types/semver@^7.5.0", "@types/semver@^7.5.8":
28242849
version "7.5.8"
28252850
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
28262851
integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
@@ -8985,6 +9010,11 @@ semver@^6.3.0, semver@^6.3.1:
89859010
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
89869011
integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
89879012

9013+
semver@^7.6.3:
9014+
version "7.6.3"
9015+
resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
9016+
integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
9017+
89889018
semver@~7.5.4:
89899019
version "7.5.4"
89909020
resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
@@ -9560,7 +9590,15 @@ svelte-preprocess@^5.0.3, svelte-preprocess@^5.1.3:
95609590
sorcery "^0.11.0"
95619591
strip-indent "^3.0.0"
95629592

9563-
svelte2tsx@^0.7.6, svelte2tsx@~0.7.0:
9593+
svelte2tsx@^0.7.30:
9594+
version "0.7.30"
9595+
resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.7.30.tgz#5dbd9e38c2fe54170b441409ebb2ee46c807be9e"
9596+
integrity sha512-sHXK/vw/sVJmFuPSq6zeKrtuZKvo0jJyEi8ybN0dfrqSYVvHu8zFbO0zQKAL8y/fYackYojH41EJGe6v8rd5fw==
9597+
dependencies:
9598+
dedent-js "^1.0.1"
9599+
pascal-case "^3.1.1"
9600+
9601+
svelte2tsx@~0.7.0:
95649602
version "0.7.9"
95659603
resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.7.9.tgz#a2b42e218e8808b9bd4b292dedba18ae8468abb0"
95669604
integrity sha512-Rm+0LAwg9wT4H2IsR8EaM9EWErTzi9LmuZKxkH5b1ua94XjQmwHstBP4VabLgA9AE6XmwBg+xK7Cjzwfm6ustQ==

0 commit comments

Comments
 (0)