From 0ff33cbeb36649f1d4fb8a82f68070d523733e3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= Date: Thu, 29 Jan 2026 19:35:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=A6=BB=E5=B1=8F?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=9B=E5=BB=BA=E5=92=8C=E4=B8=8B=E8=BD=BD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E5=BD=95=E5=88=B6?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entrypoints/background.ts | 24 ++++++++++++++++++++ entrypoints/offscreen/index.html | 7 ++++++ entrypoints/offscreen/main.tsx | 28 +++++++++++++++++++++++ entrypoints/popup/App.css | 1 - entrypoints/popup/App.tsx | 6 ++--- hooks/useRecorder.tsx | 39 ++++++++++++++++++-------------- pages/RecordeReplayPage.tsx | 5 +--- wxt.config.ts | 10 ++------ 8 files changed, 87 insertions(+), 33 deletions(-) create mode 100644 entrypoints/offscreen/index.html create mode 100644 entrypoints/offscreen/main.tsx diff --git a/entrypoints/background.ts b/entrypoints/background.ts index f96fa48..eda83e4 100644 --- a/entrypoints/background.ts +++ b/entrypoints/background.ts @@ -1,3 +1,27 @@ export default defineBackground(() => { console.log('Hello background!', { id: browser.runtime.id }); + + chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => { + if (msg.type === 'CREATE_OFFSCREEN') { + const exists = await chrome.offscreen.hasDocument(); + if (!exists) { + await chrome.offscreen.createDocument({ + url: 'offscreen.html', + reasons: ['DISPLAY_MEDIA', 'USER_MEDIA', 'BLOBS', 'AUDIO_PLAYBACK'], + justification: 'rrweb record & replay', + }); + console.log('[bg] offscreen created'); + } + sendResponse({ ok: true }); + } + + if (msg.type === 'DOWNLOAD') { + console.log('[bg] DOWNLOAD received'); + chrome.downloads.download({ + url: msg.dataUrl, + filename: `rrweb-${Date.now()}.json`, + saveAs: true, + }); + } + }); }); diff --git a/entrypoints/offscreen/index.html b/entrypoints/offscreen/index.html new file mode 100644 index 0000000..dbb6b48 --- /dev/null +++ b/entrypoints/offscreen/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/entrypoints/offscreen/main.tsx b/entrypoints/offscreen/main.tsx new file mode 100644 index 0000000..f55d820 --- /dev/null +++ b/entrypoints/offscreen/main.tsx @@ -0,0 +1,28 @@ +import { useRef } from 'react'; +console.log('[offscreen] loaded'); + +const events = []; + +chrome.runtime.onMessage.addListener((msg) => { + if (msg.type === 'SAVE_EVENT') { + console.log('[offscreen] rrweb event', msg.event); + events.push(msg.event); + // 这里你可以存 IndexedDB / memory / file + } + + if (msg.type === 'SAVE_EVENTS') { + console.log('[offscreen] SAVE_EVENTS received'); + console.log('[offscreen] total events:', events.length); + console.log('[offscreen] events:', JSON.stringify(events)); + // const blob = new Blob([JSON.stringify(events)], { + // type: 'application/json', + // }); + // reader.onload = () => { + // chrome.runtime.sendMessage({ + // type: 'DOWNLOAD', + // dataUrl: reader.result, + // }); + // }; + // reader.readAsDataURL(blob); + } +}); diff --git a/entrypoints/popup/App.css b/entrypoints/popup/App.css index 4fe74ff..78f1bea 100644 --- a/entrypoints/popup/App.css +++ b/entrypoints/popup/App.css @@ -311,7 +311,6 @@ body { .nav-list { width: 100%; - justify-content: space-between; align-items: center; } diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx index bf42483..6c20c07 100644 --- a/entrypoints/popup/App.tsx +++ b/entrypoints/popup/App.tsx @@ -1,13 +1,13 @@ import { HashRouter as Router, Routes, Route, NavLink } from 'react-router-dom'; import { useState, useEffect } from 'react'; import TimestampPage from '../../pages/TimestampPage'; -// import {RecordeReplayPage} from '../../pages/RecordeReplayPage'; +import RecordeReplayPage from '../../pages/RecordeReplayPage'; import './App.css'; const navItems = [ { path: '/', label: '时间戳', element: }, // {path: '/dzmy', label: '电子木鱼', element: }, - // { path: '/recorde-replay', label: '录制与回放', element: }, + { path: '/recorde-replay', label: '录制与回放', element: }, ]; function App() { @@ -43,7 +43,7 @@ function App() { const collapsedNavItems = navItems.slice(visibleItems); return ( - +