在CRXJS Vite扩展中无法使用更新后的Zustand Store求助

问题原因 #

Chrome扩展的Background Service Worker和Popup属于完全独立的执行上下文（进程），Zustand默认将状态存储在内存中，每个上下文加载store.js时都会创建一个独立的Store实例。这就导致Background里更新的状态只存在于它自己的实例中，Popup读取的是另一个全新的初始实例，自然拿不到更新后的数据。

解决方案 #

方案1：用Zustand Persist中间件结合Chrome Storage（推荐） #

通过将状态持久化到Chrome的storage.local，让两个上下文共享同一份持久化状态，Zustand会自动同步两边的状态。

1. 修改store.js，引入persist中间件并配置使用chrome.storage：

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

const useStoriesStore = create(
  persist(
    (set) => ({
      stories: [],
      updateStories: (newStories) => set({ stories: newStories }),
    }),
    {
      name: 'stories-storage', // 存储在chrome.storage中的键名
      storage: createJSONStorage(() => chrome.storage.local), // 指定使用chrome.storage.local
    }
  )
);

export { useStoriesStore };

2. 在manifest.json中添加storage权限：

{
  "permissions": ["storage"]
}

3. 原有代码无需额外修改，Background更新状态后，Popup的Store会自动从chrome.storage加载最新数据。

方案2：手动使用Chrome消息通信 #

通过chrome.runtime.sendMessage和chrome.runtime.onMessage实现Background与Popup的状态同步。

步骤1：Popup侧主动请求并监听状态更新

import { useEffect } from 'react';
import { useStoriesStore } from './store';

const App = () => {
  const stories = useStoriesStore((state) => state.stories);
  const updateStories = useStoriesStore((state) => state.updateStories);

  useEffect(() => {
    // 初始化时从Background获取最新状态
    chrome.runtime.sendMessage({ type: 'GET_STORIES' }, (response) => {
      if (response?.stories) {
        updateStories(response.stories);
      }
    });

    // 监听Background发送的状态变更通知
    const handleMessage = (message) => {
      if (message.type === 'STORIES_UPDATED') {
        updateStories(message.stories);
      }
    };
    chrome.runtime.onMessage.addListener(handleMessage);

    // 组件卸载时移除监听
    return () => chrome.runtime.onMessage.removeListener(handleMessage);
  }, [updateStories]);

  console.log(stories);
  return <button>change color</button>;
};

export default App;

步骤2：Background侧处理请求并主动推送更新

import { useStoriesStore } from './store';

// 更新状态
useStoriesStore.setState({ stories: ["Hello", "world"] });
console.log(useStoriesStore.getState());

// 处理Popup的状态请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'GET_STORIES') {
    sendResponse({ stories: useStoriesStore.getState().stories });
  }
  return true; // 保持消息通道开放，支持异步响应
});

// 如果需要在状态更新时主动通知所有打开的Popup
// const currentState = useStoriesStore.getState();
// chrome.runtime.sendMessage({ type: 'STORIES_UPDATED', stories: currentState.stories });

内容的提问来源于stack exchange，提问作者Amit Kumar