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 ( - +