[SOLVED] How to set an proxy object in webextension-polyfill [firefox]

How to set an proxy object in webextension-polyfill [firefox]

I'm currently working on an extension. The extension was done firstly in Chrome and everything works there, but when I try to use the same extension in Firefox I get Error: DataCloneError: Proxy object could not be cloned.

I'm using VueJS and Pinia and both of these libraries uses Proxies to handle their reactivity.

The special piece of code that is currently breaking my app is:

import browser from 'webextension-polyfill'

interface ProjectCodec { id: string; }

export const setProjectForRecording = async (project: ProjectCodec) => {
  await browser.storage.local.set({
    [CURRENT_PROJECT_FOR_RECORDING_KEY]: project
  })
}

When I do a console.log(project) I get:

Proxy { <target>: {…}, <handler>: {…} }

From what it looks like when we use browser.storage.local.set we can't pass a Proxy object to it. Then I tried:

await browser.storage.local.set({
    [CURRENT_PROJECT_FOR_RECORDING_KEY]: Object.assign({}, project)
  })

But the same error happens. Is this a bug with the library or am I doing something wrong? I tried a couple other variations of Object.assign() but no luck there.

Solution

It's a super annoying bug in Firefox that they claim as intentional behavior, so you'll have to make a clone yourself e.g. JSON.parse(JSON.stringify(project)) or a deepCopy function (there are multiple examples around).