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

Lines changed: 5 additions & 0 deletions
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

Lines changed: 14 additions & 4 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 2 additions & 4 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 5 additions & 2 deletions
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

Lines changed: 12 additions & 7 deletions
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

Lines changed: 28 additions & 3 deletions
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

Lines changed: 1 addition & 1 deletion
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"],

0 commit comments

Comments
 (0)