feat: enhance web extension with export functionality and utility improvements

- Add export functionality to SessionList and Player pages
- Add new utility modules: dataOperations, format, path, settings
- Update manifest with export and download permissions
- Enhance storage utility with new data operations
- Add various test scripts and documentation files

detailed-button-test.js

@@ -0,0 +1,201 @@
+const puppeteer = require('puppeteer-core');
+
+(async () => {
+  const browser = await puppeteer.launch({
+    headless: false,
+    executablePath: 'C:\\Users\\xgp\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe',
+    args: ['--allow-file-access-from-files', '--disable-web-security'],
+    timeout: 120000
+  });
+
+  const page = await browser.newPage();
+
+  // 监听 console 日志
+  page.on('console', msg => {
+    console.log('CONSOLE:', msg.text());
+  });
+
+  page.on('pageerror', error => {
+    console.log('PAGE ERROR:', error.message);
+  });
+
+  await page.goto('file:///C:/Users/xgp/projects/rrweb/index.html', {
+    waitUntil: 'networkidle2',
+    timeout: 120000
+  });
+
+  console.log('=== 详细按钮状态检查 ===\n');
+
+  // 等待 rrweb 加载
+  await page.waitForFunction(() => {
+    return typeof rrweb !== 'undefined' &&
+           typeof rrweb.record === 'function' &&
+           typeof rrweb.Replayer === 'function';
+  }, { timeout: 10000 });
+
+  console.log('✓ rrweb 已加载完成');
+
+  // 步骤 1: 检查初始状态
+  console.log('\n1. 检查初始状态...');
+  const initialState = await page.evaluate(() => {
+    const results = {
+      buttons: {},
+      functions: {},
+      window: {}
+    };
+
+    // 检查所有按钮
+    const buttons = {
+      playToggle: 'play-toggle-btn',
+      startBtn: 'start-btn',
+      stopBtn: 'stop-btn',
+      timeline: 'timeline',
+      speedBtn1: '.speed-controls button[data-speed="0.5"]',
+      speedBtn2: '.speed-controls button[data-speed="1"]',
+      speedBtn3: '.speed-controls button[data-speed="2"]',
+      speedBtn4: '.speed-controls button[data-speed="4"]',
+      exportBtn: 'button[onclick="exportRecording()"]'
+    };
+
+    for (const [key, selector] of Object.entries(buttons)) {
+      const element = document.querySelector(selector);
+      if (element) {
+        results.buttons[key] = {
+          exists: true,
+          disabled: element.disabled,
+          text: element.textContent.trim(),
+          tagName: element.tagName,
+          hasOnclick: element.hasAttribute('onclick'),
+          listeners: element._ ? element._.events : {}
+        };
+      } else {
+        results.buttons[key] = { exists: false };
+      }
+    }
+
+    // 检查函数是否存在
+    const functions = {
+      rrwebRecord: typeof rrweb.record,
+      rrwebReplayer: typeof rrweb.Replayer,
+      exportRecording: typeof window.exportRecording,
+      toggleReplay: typeof window.toggleReplay,
+      changeReplaySpeed: typeof window.changeReplaySpeed,
+      seekReplay: typeof window.seekReplay
+    };
+
+    for (const [key, type] of Object.entries(functions)) {
+      results.functions[key] = type;
+    }
+
+    // 检查全局变量
+    results.window.events = window.events ? window.events.length : 'undefined';
+    results.window.replayer = window.replayer ? 'exists' : 'undefined';
+    results.window.isReplaying = window.isReplaying;
+    results.window.currentSpeed = window.currentSpeed;
+
+    return results;
+  });
+
+  console.log('\n初始状态详情:');
+  console.log('按钮状态:');
+  for (const [key, info] of Object.entries(initialState.buttons)) {
+    console.log(`  ${key}:`, info);
+  }
+
+  console.log('\n函数状态:');
+  for (const [key, type] of Object.entries(initialState.functions)) {
+    console.log(`  ${key}:`, type);
+  }
+
+  console.log('\n全局变量状态:');
+  for (const [key, value] of Object.entries(initialState.window)) {
+    console.log(`  ${key}:`, value);
+  }
+
+  // 步骤 2: 开始录制
+  console.log('\n2. 开始录制...');
+  await page.click('#start-btn');
+  await new Promise(r => setTimeout(r, 1500));
+
+  // 步骤 3: 执行一些操作
+  console.log('\n3. 执行操作...');
+  await page.evaluate(() => {
+    document.querySelector('button[onclick="changeColor()"]').click();
+    document.querySelector('button[onclick="addCounter()"]').click();
+  });
+  await new Promise(r => setTimeout(r, 1000));
+
+  // 步骤 4: 停止录制
+  console.log('\n4. 停止录制...');
+  await page.click('#stop-btn');
+  await new Promise(r => setTimeout(r, 3000));
+
+  // 步骤 5: 检查停止后的状态
+  console.log('\n5. 检查停止后状态...');
+  const afterRecordState = await page.evaluate(() => {
+    const results = {
+      buttons: {},
+      functions: {},
+      events: window.events ? window.events.length : 'undefined',
+      replayer: window.replayer ? 'exists' : 'undefined'
+    };
+
+    const buttons = {
+      playToggle: 'play-toggle-btn',
+      timeline: 'timeline',
+      exportBtn: 'button[onclick="exportRecording()"]',
+      speedBtn1: '.speed-controls button[data-speed="0.5"]'
+    };
+
+    for (const [key, selector] of Object.entries(buttons)) {
+      const element = document.querySelector(selector);
+      if (element) {
+        results.buttons[key] = {
+          disabled: element.disabled,
+          text: element.textContent.trim()
+        };
+      }
+    }
+
+    // 检查按钮是否有点击事件
+    const playToggle = document.querySelector('#play-toggle-btn');
+    if (playToggle) {
+      results.buttons.playToggle.hasClickHandler = playToggle.onclick ? 'has handler' : 'no handler';
+      results.buttons.playToggle.eventListeners = playToggle._ ? Object.keys(playToggle._.events || {}) : [];
+    }
+
+    return results;
+  });
+
+  console.log('\n停止后状态:');
+  console.log('按钮状态:');
+  for (const [key, info] of Object.entries(afterRecordState.buttons)) {
+    console.log(`  ${key}:`, info);
+  }
+
+  // 步骤 6: 尝试点击播放按钮
+  console.log('\n6. 测试播放按钮点击...');
+  try {
+    await page.click('#play-toggle-btn');
+    await new Promise(r => setTimeout(r, 1000));
+    console.log('✓ 播放按钮点击成功');
+  } catch (e) {
+    console.log('✗ 播放按钮点击失败:', e.message);
+  }
+
+  // 步骤 7: 检查播放状态
+  const playState = await page.evaluate(() => {
+    const playToggle = document.getElementById('play-toggle-btn');
+    return {
+      text: playToggle ? playToggle.textContent : 'null',
+      isReplaying: window.isReplaying,
+      currentTime: window.replayer ? window.replayer.getCurrentTime() : 'no replayer'
+    };
+  });
+  console.log('播放状态:', playState);
+
+  await browser.close();
+})().catch(e => {
+  console.error(e);
+  process.exit(1);
+});