Figma插件开发postMessage报错：目标源不匹配问题求助

问题原因 #

你遇到的错误是因为调用parent.postMessage时未指定正确的targetOrigin参数。本地开发时UI页面的Origin为null，而Figma主页面的Origin是https://www.figma.com，浏览器安全机制要求postMessage的目标Origin必须与接收窗口的Origin匹配，否则会触发限制报错。

解决方案 #

在postMessage的第二个参数中明确指定Figma的Origin即可解决：

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 } },
    'https://www.figma.com' // 指定正确的目标Origin
  )
}

额外验证 #

确保你的code.ts中正确监听了UI传来的消息：

figma.ui.onmessage = (message) => {
  // 处理接收到的数据
  console.log('收到UI数据:', message);
  // 完成操作后可关闭插件
  figma.closePlugin();
};

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