Skip to content

Commit b366ff1

Browse files
jlalmesjlalmes
committed
add ignoreRequestFn
1 parent d656ac7 commit b366ff1

File tree

10 files changed

+3434
-75
lines changed

10 files changed

+3434
-75
lines changed

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: "Submit to Web Store"
2+
on:
3+
workflow_dispatch:
4+
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/checkout@v3
10+
- name: Cache pnpm modules
11+
uses: actions/cache@v3
12+
with:
13+
path: ~/.pnpm-store
14+
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
15+
restore-keys: |
16+
${{ runner.os }}-
17+
- uses: pnpm/action-setup@v2.2.4
18+
with:
19+
version: latest
20+
run_install: true
21+
- name: Use Node.js 16.x
22+
uses: actions/setup-node@v3.4.1
23+
with:
24+
node-version: 16.x
25+
cache: "pnpm"
26+
- name: Build the extension
27+
run: pnpm build
28+
- name: Package the extension into a zip artifact
29+
run: pnpm package
30+
- name: Browser Platform Publish
31+
uses: PlasmoHQ/bpp@v3
32+
with:
33+
keys: ${{ secrets.SUBMIT_KEYS }}
34+
artifact: build/chrome-mv3-prod.zip

‎packages/rrweb-webextension/.gitignore

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
3+
4+
# dependencies
5+
/node_modules
6+
/.pnp
7+
.pnp.js
8+
9+
# testing
10+
/coverage
11+
12+
#cache
13+
.turbo
14+
.next
15+
.vercel
16+
17+
# misc
18+
.DS_Store
19+
*.pem
20+
21+
# debug
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*
25+
.pnpm-debug.log*
26+
27+
28+
# local env files
29+
.env*
30+
31+
out/
32+
build/
33+
dist/
34+
35+
# plasmo - https://www.plasmo.com
36+
.plasmo
37+
38+
# bpp - http://bpp.browser.market/
39+
keys.json
40+
41+
# typescript
42+
.tsbuildinfo

‎packages/rrweb-webextension/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
pnpm dev
9+
# or
10+
npm run dev
11+
```
12+
13+
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`.
14+
15+
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.
16+
17+
For further guidance, [visit our Documentation](https://docs.plasmo.com/)
18+
19+
## Making production build
20+
21+
Run the following:
22+
23+
```bash
24+
pnpm build
25+
# or
26+
npm run build
27+
```
28+
29+
This should create a production bundle for your extension, ready to be zipped and published to the stores.
30+
31+
## Submit to the webstores
32+
33+
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

77.9 KB
Loading

‎packages/rrweb-webextension/background.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export {};
2+
3+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
4+
chrome.scripting.registerContentScripts([
5+
{
6+
id: 'content',
7+
matches: ['<all_urls>'],
8+
js: ['content.1bc94c80.js'],
9+
runAt: 'document_start',
10+
world: 'MAIN',
11+
},
12+
]);

‎packages/rrweb-webextension/content.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { EventType, eventWithTime } from '@rrweb/types';
2+
import { getRecordConsolePlugin, getRecordNetworkPlugin, record } from 'rrweb';
3+
4+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
5+
const log: typeof console.log =
6+
console.log['__rrweb_original__'] || console.log;
7+
8+
record({
9+
emit(event: eventWithTime) {
10+
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
11+
if (event.type === EventType.Plugin) {
12+
log(event);
13+
}
14+
},
15+
plugins: [
16+
getRecordConsolePlugin(),
17+
getRecordNetworkPlugin({ captureHeaders: true, captureBody: true }),
18+
],
19+
});

‎packages/rrweb-webextension/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "rrweb-webextension",
3+
"displayName": "Rrweb webextension",
4+
"version": "0.0.1",
5+
"description": "A basic Plasmo extension.",
6+
"author": "jlalmes",
7+
"packageManager": "pnpm@6.11.0",
8+
"scripts": {
9+
"build": "plasmo build"
10+
},
11+
"dependencies": {
12+
"plasmo": "0.64.2",
13+
"react": "18.2.0",
14+
"react-dom": "18.2.0",
15+
"rrweb-snapshot": "^2.0.0-alpha.4"
16+
},
17+
"devDependencies": {
18+
"@types/chrome": "0.0.210",
19+
"@types/node": "18.11.18",
20+
"@types/react": "18.0.27",
21+
"@types/react-dom": "18.0.10",
22+
"prettier": "2.8.3",
23+
"typescript": "4.9.4",
24+
"@plasmohq/prettier-plugin-sort-imports": "3.6.1"
25+
},
26+
"manifest": {
27+
"host_permissions": [
28+
"https://*/*"
29+
],
30+
"permissions": [
31+
"scripting"
32+
]
33+
}
34+
}

‎packages/rrweb-webextension/tsconfig.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"extends": "plasmo/templates/tsconfig.base",
3+
"exclude": [
4+
"node_modules"
5+
],
6+
"include": [
7+
".plasmo/index.d.ts",
8+
"./**/*.ts",
9+
"./**/*.tsx"
10+
],
11+
"compilerOptions": {
12+
"paths": {
13+
"~*": [
14+
"./*"
15+
]
16+
},
17+
"baseUrl": "."
18+
},
19+
"references": [
20+
{
21+
"path": "../rrweb-snapshot"
22+
}
23+
]
24+
}

‎packages/rrweb/src/plugins/network/record/index.ts

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export type InitiatorType =
2727

2828
type NetworkRecordOptions = {
2929
initiatorType?: InitiatorType[];
30+
ignoreRequestFn?: (data: NetworkRequest) => boolean;
3031
recordHeaders?:
3132
| boolean
3233
| StringifyOptions
@@ -68,6 +69,7 @@ const defaultNetworkOptions: NetworkRecordOptions = {
6869
'video',
6970
'xmlhttprequest',
7071
],
72+
ignoreEventFn: () => false,
7173
recordHeaders: false,
7274
recordBody: false,
7375
recordInitialEvents: false,
@@ -91,14 +93,10 @@ export type NetworkData = {
9193

9294
type networkCallback = (data: NetworkData) => void;
9395

94-
type NetworkObserverOptions = NetworkRecordOptions & {
95-
initiatorType: InitiatorType[];
96-
};
97-
9896
function initPerformanceObserver(
9997
cb: networkCallback,
10098
win: IWindow,
101-
options: NetworkObserverOptions,
99+
options: Required<NetworkRecordOptions>,
102100
) {
103101
if (!('performance' in win)) {
104102
return () => {
@@ -151,7 +149,7 @@ function initPerformanceObserver(
151149
function initXhrObserver(
152150
cb: networkCallback,
153151
win: IWindow,
154-
options: NetworkObserverOptions,
152+
options: Required<NetworkRecordOptions>,
155153
): listenerHandler {
156154
if (!options.initiatorType.includes('xmlhttprequest')) {
157155
return () => {
@@ -166,7 +164,7 @@ function initXhrObserver(
166164
function initFetchObserver(
167165
cb: networkCallback,
168166
win: IWindow,
169-
options: NetworkObserverOptions,
167+
options: Required<NetworkRecordOptions>,
170168
): listenerHandler {
171169
if (!options.initiatorType.includes('fetch')) {
172170
return () => {
@@ -283,15 +281,19 @@ function initFetchObserver(
283281
}
284282

285283
function initNetworkObserver(
286-
cb: networkCallback,
284+
callback: networkCallback,
287285
win: IWindow, // top window or in an iframe
288286
options: NetworkRecordOptions,
289287
): listenerHandler {
290288
const networkOptions = (options
291289
? Object.assign({}, defaultNetworkOptions, options)
292-
: defaultNetworkOptions) as {
293-
initiatorType: InitiatorType[];
294-
recordInitialEvents: boolean;
290+
: defaultNetworkOptions) as Required<NetworkRecordOptions>;
291+
292+
const cb: networkCallback = (data) => {
293+
const requests = data.requests.filter((request) =>
294+
networkOptions.ignoreRequestFn(request),
295+
);
296+
callback({ ...data, requests });
295297
};
296298

297299
const performanceObserver = initPerformanceObserver(cb, win, networkOptions);

0 commit comments

Comments
 (0)