iframe-embedded code-server communication issues with host page

Background

1. A web page embeds code-server web in an iframe, both pages are same-site, and now we need code-server to send messages to the host page after triggering operations.

Requirements

1. Customize code-server UI to support displaying buttons, such as in the top-right toolbar
2. Enable communication between code-server and the host page

Solutions

First, it’s important to understand code-server’s limitations: code-server extensions cannot add custom buttons in the title position. Through plugin solutions, only the bottom status bar and left activity buttons can be modified.

1. Host page element rendering, positioned to move to code-server area

   • Advantage: No need to customize code-server
   • Disadvantage: code-server’s title bar/layout controls can be freely toggled on/off. If turned off, it looks awkward and requires watching for display changes in the editor

2. code-server extension

   • Register buttons in activity bar or add right-click menu directly in editor
   • Register Actions
   • When menu/button is clicked, Action executes and sends message to host page server
   • Server sends message to host page frontend, which then executes related actions
   • Advantage: Flexible
   • Disadvantage: The communication chain is quite long

Solution 2 Details

Fetch requests: Node.js also has built-in fetch object, so the fetch solution can support extensions in both code-server and VS Code. However, the fetch solution is not bidirectional.

Related Issues

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

Final Thoughts

When dealing with iframe-embedded code-server communication, it’s crucial to consider the trade-offs between implementation complexity and flexibility. The extension-based approach, while more complex, offers better integration and maintainability in the long run. For simpler use cases, the host page element positioning approach might suffice, but be prepared to handle layout changes dynamically. Always test both same-origin and cross-origin scenarios to ensure robust communication channels.