Enhance state management and message handling in content scripts

- Implemented state restoration from storage in the background script to ensure persistent diagnostic mode across browser restarts.
- Added message listener in the content script to handle updates from the background, improving real-time state synchronization.
- Updated Dashboard component to include the missing 'inspecting' state for better UI feedback.
- Enhanced README documentation with details on recent fixes and testing procedures.

Author: HaloWang

.cursor/rules/agent.mdc

@@ -2,4 +2,5 @@
 alwaysApply: true
 ---
 
-- 当你作为 agent 时, 再帮我写完代码后, 不要跑任何 pnpm 命令
+- 不要自动跑任何 pnpm 命令
+- 不要自动书写 README.md 文件

chrome-extension/src/background/index.ts

@@ -1,7 +1,7 @@
 import 'webextension-polyfill';
 import { startListenTabs } from './tabs';
 import { ignoreHref } from '@extension/shared';
-import { exampleThemeStorage, translationModeStorage } from '@extension/storage';
+import { exampleThemeStorage, translationModeStorage, contentUIStateStorage } from '@extension/storage';
 import type { AllMessage, QueryResponse, State } from '@extension/shared';
 
 console.log('Background loaded');
@@ -24,6 +24,7 @@ let isConnecting = false;
 
 const waitingQuery: { [key: string]: { resolves: [(value: AllMessage) => void] } } = {};
 
+// 初始化状态，从 storage 中恢复
 const state: State = {
   interactionMode: 'full',
   demoMode: false,
@@ -33,6 +34,29 @@ const state: State = {
   inspecting: false,
 };
 
+// 从 storage 中恢复状态
+const initializeStateFromStorage = async () => {
+  try {
+    console.log('background: 从 storage 中恢复状态');
+    const storedState = await contentUIStateStorage.get();
+    console.log('background: 恢复的状态', storedState);
+
+    // 更新状态，但保持 running 状态为 false（需要 WebSocket 连接）
+    state.interactionMode = storedState.interactionMode;
+    state.demoMode = storedState.demoMode;
+    state.inspecting = storedState.inspecting;
+    state.ignored = storedState.ignored;
+    state.running = false; // 初始时设为 false，等 WebSocket 连接成功后再设为 true
+
+    console.log('background: 状态已恢复', state);
+  } catch (error) {
+    console.error('background: 恢复状态失败', error);
+  }
+};
+
+// 在 background script 启动时恢复状态
+initializeStateFromStorage();
+
 const syncStateToContent = async () => {
   const tabs = await chrome.tabs.query({});
   tabs.forEach(tab => {
@@ -83,9 +107,21 @@ const listenMessageForUI = (
       }
       case 'SetState': {
         const { interactionMode, demoMode, inspecting } = message;
+        console.log('background: 收到 SetState', { interactionMode, demoMode, inspecting });
+
         state.interactionMode = interactionMode;
         state.demoMode = demoMode;
         state.inspecting = inspecting;
+
+        // 同步到 storage
+        contentUIStateStorage.updateGlobalState({
+          running: state.running,
+          ignored: state.ignored,
+          interactionMode,
+          demoMode,
+          inspecting,
+        });
+
         syncStateToContent();
         return false;
       }
@@ -132,6 +168,16 @@ const connectWebSocket = () => {
       isConnecting = false;
       ws?.send(JSON.stringify({ type: 'ping' }));
       state.running = true;
+
+      // 更新 storage 中的 running 状态
+      contentUIStateStorage.updateGlobalState({
+        running: true,
+        ignored: state.ignored,
+        interactionMode: state.interactionMode,
+        demoMode: state.demoMode,
+        inspecting: state.inspecting,
+      });
+
       syncStateToContent();
     };
 
@@ -152,6 +198,16 @@ const connectWebSocket = () => {
       console.error('❌ WebSocket 错误:', err);
       ws?.close(); // 主动触发 onclose
       state.running = false;
+
+      // 更新 storage 中的 running 状态
+      contentUIStateStorage.updateGlobalState({
+        running: false,
+        ignored: state.ignored,
+        interactionMode: state.interactionMode,
+        demoMode: state.demoMode,
+        inspecting: state.inspecting,
+      });
+
       syncStateToContent();
     };
 
@@ -160,6 +216,16 @@ const connectWebSocket = () => {
       isConnecting = false;
       ws = null;
       state.running = false;
+
+      // 更新 storage 中的 running 状态
+      contentUIStateStorage.updateGlobalState({
+        running: false,
+        ignored: state.ignored,
+        interactionMode: state.interactionMode,
+        demoMode: state.demoMode,
+        inspecting: state.inspecting,
+      });
+
       syncStateToContent();
     };
 
@@ -169,6 +235,16 @@ const connectWebSocket = () => {
     isConnecting = false;
     success = false;
     state.running = false;
+
+    // 更新 storage 中的 running 状态
+    contentUIStateStorage.updateGlobalState({
+      running: false,
+      ignored: state.ignored,
+      interactionMode: state.interactionMode,
+      demoMode: state.demoMode,
+      inspecting: state.inspecting,
+    });
+
     syncStateToContent();
   }
 

pages/content-ui/README.md

@@ -30,23 +30,51 @@ Content Script 接收状态更新
 UI 组件更新显示状态
 ```
 
+### 问题修复记录
+
+#### 修复的问题：浏览器重启后诊断模式状态未恢复
+
+**问题原因**：
+
+1. Background script 中的状态是硬编码的，没有从 storage 中恢复
+2. Content script 没有监听来自 background 的消息
+3. Dashboard 组件缺少 `inspecting` 状态的解构
+
+**修复方案**：
+
+1. ✅ 在 background script 中添加 `initializeStateFromStorage()` 函数，从 storage 中恢复状态
+2. ✅ 在 content script 中添加 Chrome 扩展消息监听器
+3. ✅ 修复 Dashboard 组件中缺失的 `inspecting` 状态
+4. ✅ 添加详细的日志记录，便于调试
+
 ### 测试验证
 
-1. **持久化测试**：
-   - 开启诊断模式
-   - 关闭浏览器
-   - 重新打开浏览器
-   - 验证诊断模式状态是否保持
-
-2. **多页面同步测试**：
-   - 打开多个标签页
-   - 在其中一个页面开启诊断模式
-   - 验证其他页面是否同步显示诊断状态
-
-3. **实时同步测试**：
-   - 在页面 A 开启诊断模式
-   - 在页面 B 关闭诊断模式
-   - 验证页面 A 是否立即同步关闭状态
+#### 1. 持久化测试
+
+1. 开启诊断模式
+2. 关闭浏览器
+3. 重新打开浏览器
+4. 验证诊断模式状态是否保持
+
+#### 2. 多页面同步测试
+
+1. 打开多个标签页
+2. 在其中一个页面开启诊断模式
+3. 验证其他页面是否同步显示诊断状态
+
+#### 3. 实时同步测试
+
+1. 在页面 A 开启诊断模式
+2. 在页面 B 关闭诊断模式
+3. 验证页面 A 是否立即同步关闭状态
+
+#### 4. 调试日志验证
+
+打开浏览器开发者工具，查看控制台日志：
+
+- `background: 从 storage 中恢复状态`
+- `content: 收到状态更新`
+- `content-ui: 收到状态更新`
 
 ### Add New Script
 

pages/content-ui/src/BaseWidget.tsx

@@ -9,6 +9,7 @@ export const BaseWidget: React.FC<{
   style?: React.CSSProperties;
 }> = ({ icon, title, value, onClick, style: additionalStyle }) => {
   const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+  const [isHovered, setIsHovered] = useState(false);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
@@ -29,7 +30,8 @@ export const BaseWidget: React.FC<{
     borderRadius: '8px',
     padding: '2px 4px',
     userSelect: 'none',
-    transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out',
+    transition: 'transform 0.15s ease-in-out, opacity 0.3s ease-in-out',
+    transform: isHovered ? 'translateX(-5px)' : 'translateX(0)',
     ...(isDarkMode
       ? {
           backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -51,7 +53,11 @@ export const BaseWidget: React.FC<{
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div onClick={onClick} style={style}>
+    <div
+      onClick={onClick}
+      style={style}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
       <div
         style={{
           width: '24px',

pages/content-ui/src/Dashboard.tsx

@@ -14,6 +14,7 @@ export const Dashboard: FC = () => {
     hovered,
     shouldShowOthers,
     running,
+    inspecting, // 添加缺失的 inspecting 状态
     // 操作方法
     setHovered,
     setHoveringOthers,

pages/content-ui/src/DashboardEntry.tsx

@@ -6,6 +6,7 @@ export const DashboardEntry: React.FC<{
   style?: React.CSSProperties;
 }> = ({ onClick, style: additionalStyle }) => {
   const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+  const [isHovered, setIsHovered] = useState(false);
 
   const icon = (
     <img
@@ -40,7 +41,8 @@ export const DashboardEntry: React.FC<{
     borderBottomLeftRadius: '12px',
     padding: '2px 4px',
     userSelect: 'none',
-    transition: 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out',
+    transition: 'transform 0.15s ease-in-out, opacity 0.3s ease-in-out',
+    transform: isHovered ? 'translateX(-5px)' : 'translateX(0)',
     cursor: 'pointer',
     ...(isDarkMode
       ? {
@@ -62,7 +64,11 @@ export const DashboardEntry: React.FC<{
   }
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div onClick={onClick} style={style}>
+    <div
+      onClick={onClick}
+      style={style}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
       {icon}
       <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '4px' }}>
         <div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>RWKV</div>

pages/content/src/contentStart.ts

@@ -2,6 +2,7 @@ import { handleNode } from './handleNode';
 import { injectCss } from './injectcss';
 import { state } from './state';
 import { ignoreHref } from '@extension/shared';
+import type { AllMessage } from '@extension/shared';
 
 export const contentStart = () => {
   injectCss();
@@ -60,8 +61,48 @@ export const contentStart = () => {
     }
   };
 
+  // 监听来自 background 的消息
+  const handleMessage = (
+    message: AllMessage,
+    sender: chrome.runtime.MessageSender,
+    sendResponse: (response?: any) => void,
+  ) => {
+    console.log('content: 收到消息', message.func);
+
+    const { func } = message;
+    switch (func) {
+      case 'GetStateResponse':
+      case 'OnStateChanged': {
+        console.log('content: 收到状态更新', message);
+        // 触发自定义事件，让现有的监听器处理
+        document.dispatchEvent(new CustomEvent('state-changed', { detail: message }));
+        break;
+      }
+      case 'QueryRequest':
+      case 'QueryResponse':
+      case 'SetState':
+      case 'GetState': {
+        // 这些消息在 content script 中不需要处理
+        break;
+      }
+    }
+  };
+
+  // 添加消息监听器
+  chrome.runtime.onMessage.addListener(handleMessage);
+
   document.addEventListener('state-changed', handleStateChanged as EventListener);
 
+  // 初始化时请求状态
+  setTimeout(() => {
+    console.log('content: 请求初始状态');
+    try {
+      chrome.runtime.sendMessage({ func: 'GetState' });
+    } catch (error) {
+      console.error('content: 请求状态失败', error);
+    }
+  }, 100);
+
   const handleMouseOver = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
     const isTarget = target.classList.contains('rwkv_offline_target');