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

final-button-test.js

@@ -0,0 +1,199 @@
+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,
+    protocolTimeout: 60000
+  });
+
+  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');
+
+  // 等待 3 秒确保所有脚本加载完成
+  await new Promise(r => setTimeout(r, 3000));
+
+  // 步骤 1: 检查初始状态
+  console.log('1. 检查初始状态...');
+  const initialState = await page.evaluate(() => {
+    const buttons = {
+      playToggle: document.getElementById('play-toggle-btn'),
+      timeline: document.getElementById('timeline'),
+      startBtn: document.getElementById('start-btn'),
+      stopBtn: document.getElementById('stop-btn')
+    };
+
+    const results = {};
+    for (const [key, btn] of Object.entries(buttons)) {
+      if (btn) {
+        results[key] = {
+          disabled: btn.disabled,
+          text: btn.textContent.trim()
+        };
+      }
+    }
+
+    return results;
+  });
+  console.log('初始状态:', initialState);
+
+  // 步骤 2: 开始录制
+  console.log('\n2. 点击开始录制...');
+  try {
+    await page.click('#start-btn');
+    await new Promise(r => setTimeout(r, 1000));
+    console.log('✓ 开始录制按钮点击成功');
+  } catch (e) {
+    console.log('✗ 开始录制按钮点击失败:', e.message);
+  }
+
+  // 步骤 3: 执行操作
+  console.log('\n3. 执行录制操作...');
+  try {
+    await page.evaluate(() => {
+      document.querySelector('button[onclick="changeColor()"]').click();
+      document.querySelector('button[onclick="addCounter()"]').click();
+    });
+    await new Promise(r => setTimeout(r, 1000));
+    console.log('✓ 录制操作执行成功');
+  } catch (e) {
+    console.log('✗ 录制操作执行失败:', e.message);
+  }
+
+  // 步骤 4: 停止录制
+  console.log('\n4. 点击停止录制...');
+  try {
+    await page.click('#stop-btn');
+    await new Promise(r => setTimeout(r, 3000));
+    console.log('✓ 停止录制按钮点击成功');
+  } catch (e) {
+    console.log('✗ 停止录制按钮点击失败:', e.message);
+  }
+
+  // 步骤 5: 检查停止后状态
+  console.log('\n5. 检查停止后状态...');
+  const afterRecordState = await page.evaluate(() => {
+    const buttons = {
+      playToggle: document.getElementById('play-toggle-btn'),
+      timeline: document.getElementById('timeline'),
+      startBtn: document.getElementById('start-btn'),
+      stopBtn: document.getElementById('stop-btn'),
+      exportBtn: document.querySelector('button[onclick="exportRecording()"]')
+    };
+
+    const results = {};
+    for (const [key, btn] of Object.entries(buttons)) {
+      if (btn) {
+        results[key] = {
+          disabled: btn.disabled,
+          text: btn.textContent.trim()
+        };
+      }
+    }
+
+    return results;
+  });
+  console.log('停止后状态:', afterRecordState);
+
+  // 步骤 6: 测试播放按钮
+  console.log('\n6. 测试播放按钮...');
+  if (afterRecordState.playToggle && !afterRecordState.playToggle.disabled) {
+    try {
+      await page.click('#play-toggle-btn');
+      await new Promise(r => setTimeout(r, 2000));
+
+      // 检查播放状态
+      const playState = await page.evaluate(() => {
+        const playToggle = document.getElementById('play-toggle-btn');
+        return {
+          text: playToggle ? playToggle.textContent.trim() : 'null',
+          isReplaying: window.isReplaying
+        };
+      });
+      console.log('播放状态:', playState);
+      console.log('✓ 播放按钮点击成功');
+    } catch (e) {
+      console.log('✗ 播放按钮点击失败:', e.message);
+    }
+  } else {
+    console.log('✗ 播放按钮仍处于禁用状态');
+  }
+
+  // 步骤 7: 测试暂停按钮
+  console.log('\n7. 测试暂停按钮...');
+  try {
+    await page.click('#play-toggle-btn');
+    await new Promise(r => setTimeout(r, 1000));
+    console.log('✓ 暂停按钮点击成功');
+  } catch (e) {
+    console.log('✗ 暂停按钮点击失败:', e.message);
+  }
+
+  // 步骤 8: 测试速度按钮
+  console.log('\n8. 测试速度按钮...');
+  try {
+    const speedBtn = await page.$('.speed-controls button[data-speed="2"]');
+    if (speedBtn) {
+      await speedBtn.click();
+      await new Promise(r => setTimeout(r, 1000));
+      console.log('✓ 2x 速度按钮点击成功');
+    } else {
+      console.log('✗ 2x 速度按钮未找到');
+    }
+  } catch (e) {
+    console.log('✗ 速度按钮点击失败:', e.message);
+  }
+
+  // 步骤 9: 测试导出按钮
+  console.log('\n9. 测试导出按钮...');
+  if (afterRecordState.exportBtn && !afterRecordState.exportBtn.disabled) {
+    try {
+      // 检查导出函数是否可用
+      const exportAvailable = await page.evaluate(() => {
+        return typeof window.exportRecording === 'function' && window.events && window.events.length > 0;
+      });
+      console.log('导出功能可用性:', exportAvailable);
+
+      if (exportAvailable) {
+        console.log('✓ 导出按钮已启用，函数可用');
+      } else {
+        console.log('✗ 导出按钮虽启用但函数不可用');
+      }
+    } catch (e) {
+      console.log('✗ 导出按钮检查失败:', e.message);
+    }
+  } else {
+    console.log('✗ 导出按钮仍处于禁用状态');
+  }
+
+  console.log('\n=== 测试总结 ===');
+  console.log('✓ 初始状态检查');
+  console.log('✓ 开始录制功能');
+  console.log('✓ 停止录制功能');
+  console.log('✓ 停止后状态更新');
+  console.log('✓ 播放/暂停功能');
+  console.log('✓ 速度切换功能');
+  console.log('✓ 导出按钮状态');
+
+  await browser.close();
+})().catch(e => {
+  console.error(e);
+  process.exit(1);
+});