Adobe XD插件开发：如何注册文档内交互并向外部服务器上报事件

事件注册可行性说明 #

• 插件自有UI内的交互事件可正常注册：你可以在插件的面板、模态弹窗等自定义UI中添加按钮等组件，直接绑定click等交互事件，这部分能力不受文档只读API的限制。
• 画布内原生元素的交互事件目前无法直接监听：Adobe XD 未开放针对画布中普通设计元素、原生交互组件的用户操作事件回调接口，无法直接捕获用户点击画布内元素的触发动作。

点击事件上报外部服务器实现方案 #

如果你的需求是监听插件自有UI内的按钮点击并上报，直接按以下步骤实现即可：

1. 在插件的manifest.json配置文件中声明network权限，允许插件发起网络请求
2. 在按钮的点击回调函数中直接调用XD插件环境内置的fetch接口，向你的外部服务器发起POST等请求完成事件上报，无需引入额外依赖。

示例代码逻辑：

document.querySelector("#yourReportBtn").addEventListener("click", async () => {
  await fetch("你的服务器上报地址", {
    method: "POST",
    body: JSON.stringify({ event: "button_click", time: Date.now() })
  })
})

如果你的需求是监听画布内原生元素的点击并上报，目前无官方原生实现方案，只能通过间接方式实现有限效果：可以引导用户先在插件中配置需要监听的元素规则，后续用户操作对应元素后主动唤起插件触发上报，或通过插件后台定时轮询画布状态的方式间接采集操作记录，该方案存在体验延迟、无法覆盖全场景的局限。

关于WebSocket的使用必要性 #

仅实现单向点击事件上报的场景无需使用WebSocket，标准HTTP请求即可满足需求。只有当你需要实现服务端主动向插件推送消息的双向通信场景时，才需要使用WebSocket，XD插件运行环境原生支持标准WebSocket接口。

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