iframe潜入的code-server与宿主页面通讯问题

背景

1. 网页iframe嵌入了code-server web，两个网页是同站，现在需要code-server下在触发操作后发送消息给宿主页面。

需求细化

1. code-server 进行定制UI，支持显示一些按钮，比如可以在顶部右侧工具栏
2. code-server可以与宿主页面进行通讯

方案

首先需要知道code-server的限制，code-server extension是无法在title位置增加自定义按钮的。通过插件方案也只可以改变底部状态栏及左侧activity按钮

1. 宿主页面元素绘制，通过定位移动到code-server处
   • 该方案优势：不需要定制code-server，
   • 弊端：code-server的title bar/布局控件是可以自由设置开关，如果关闭了，即显的很突兀，这样又需要watch编辑器中的显示变动
2. code-server extension
   • activitybar注册按钮或直接编辑器中增加右键菜单
   • 注册Action
   • 当点击菜单/按钮，Action执行发送消息到宿主页面服务端
   • 服务端发送消息到宿主页面前端，进而执行相关动作
   • 该方案优势：灵活
   • 弊端：链路挺长

方案2细节

fetch请求，node下也内置fetch对象，因此fetch方案也可以让extension在code-server还是vsc均支持。但fetch方案并不双通。

相关问题

• https://github.com/coder/code-server/issues/621
• https://github.com/coder/code-server/discussions/4644