[Typescript] Chrome Extension "scripting.executeScript"의 optional argument

Uncaught (in promise) TypeError: Error in invocation of scripting.executeScript(scripting.ScriptInjection injection, optional function callback): Error at parameter 'injection': Error at property 'args': Error at index 2: Value is unserializable

크롬 익스텐션에서 타겟 탭 내에 스크립트를 실행하기 위해 chrome.scripting.excuteScript()를 사용하다 위와 같은 오류를 맞닥뜨렸다.

타켓 탭에 실행시킬 함수 인자에 serialize할 수 없는 값들이 들어있어 오류가 발생했다는 메시지인데... 필자는 분명 함수나 클래스와 같은 피클링이 불가능한 인자는 전달하지 않았는데 왜 이런 오류가 발생했는지 이해되지 않았다...

그런데 알고보니 매우 간단했다. "undefined" 때문이었다. undefined는 JSON.stringify가 불가능한 값이다보니 생긴 문제였고,
어디서 undeinfed가 들어가게 됐는지 보니 optional argument가 문제가 되었다...

조건에 따라 값이 undefined이 될 수 있는 변수가 있었는데, 이 변수를 인자로 직접 전달하다보니 발생한 문제였다.
그래서 앞으론 optional argument를 사용할땐 undefined 대신 null이 들어가도록 해야할 것 같다.

const test = undefined // 이 값은 undefined가 될 수 있는 변수임.

await chrome.scripting.executeScript({
    target: {
      tabId,
    },
    func: (_test) => {
      console.log(_test);
    },
    args: [test ?? null],
    world: "MAIN",
});