Figma 插件开发错误：无法在“DOMWindow”上执行“postMessage”

Question

我正在遵循 Figma 插件教程 (https://www.youtube.com/watch?v=ExwP3Kmh-vI)，但我陷入了数据从 ui.html 传输到 code.ts 的部分.

这是提交脚本，它一直运行到最终的 PostMessage 命令：

  document.getElementById( 'submit-post' ).onclick = () => {
    const name = document.getElementById( 'name' ).value
    const username = document.getElementById( 'username' ).value
    const description = document.getElementById( 'description' ).value
    const darkModeState = document.getElementById( 'dark-mode-on' ).value
    const imageVariant = document.querySelector( 'input[name=variantGroup]:checked' ).value
    parent.postMessage( { pluginMessage: { name, username, description, darkModeState, imageVariant } } )
  }

产生的错误是：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('null') does not match the recipient window's origin ('https://www.figma.com').

因为开发是在 Visual Studio 本地进行，测试是在 Figma 窗口中进行，所以我不知道如何解决这个问题。

Answer 1

为了防止这种情况发生在其他人身上，解决方案是将原始“*”添加到 postMessage 调用中。它存在于我正在关注的视频演示中，但我没有注意到。基本上，我有一个错字。

在ui.html中，确保添加origin“*”作为postMessage的最后一个参数，即：

   parent.postMessage( { pluginMessage: { date:data } }, "*" )