Firefox下webextension-polyfill存储Proxy对象报错的解决咨询

这个问题不是Vue/Pinia的Bug，是对浏览器storage API序列化规则的理解偏差，以及Chrome和Firefox对Proxy的处理差异导致的。

核心原因 #

Firefox的browser.storage.local.set使用结构化克隆算法存储数据，而Proxy实例本身不在该算法支持的可克隆类型范围内。Chrome可能在底层做了兼容，自动解包了Proxy的原始对象，但Firefox严格遵循规范，直接拒绝克隆Proxy。

你用Object.assign({}, project)无效，是因为这只是浅拷贝——如果project是嵌套对象，深层的子属性依然是Proxy实例，Firefox仍然会检测到并报错。

解决方案 #

直接用Pinia提供的toRaw方法，它可以获取到Proxy包裹的原始对象，完全解包所有响应式代理：

import { toRaw } from 'pinia';

// 存储前先转成原始对象
await browser.storage.local.set({
  project: toRaw(project)
});

toRaw是Pinia/Vue为处理这类场景专门提供的API，能确保拿到完全未被代理的纯JS对象，符合结构化克隆的要求，在Chrome和Firefox中都能正常工作。

额外说明 #

如果不用Pinia的toRaw，也可以手动递归遍历对象，把所有嵌套的Proxy都转成原始值，但这种方法容易出错且冗余，官方API是最优解。

内容的提问来源于stack exchange，提问作者Bruno Francisco