Developing plugins for web browsers is undoubtedly a challenging task, as it involves addressing various technical complexities before achieving a functional product. As such, plug-in developers must embrace the unique constraints that set them apart from conventional HTML and JavaScript implementations.

The Re-Earth plugin system is predominantly built using JavaScript but employs a two-fold approach: one part functions through WebAssembly, while the other operates within an iframe.

WebAssembly, being both synchronous and efficient allows for swift code execution and seamless access to Re-Earth's data. However, it has limitations in utilizing web browsers' APIs and user interfaces. On the other hand, iframes excel in leveraging all web browser-supported APIs and can display user interfaces using HTML. Nevertheless, they are unable to access Re-Earth's data directly and run asynchronously.

To overcome these challenges, Re-Earth adopts a hybrid approach. The WebAssembly part and the iframe can communicate and exchange information using the postMessage feature, enabling the secure transfer of essential data from Re-Earth to the iframe. This empowers developers to manipulate HTML content within the iframe, retrieve relevant server information, and subsequently pass this data to the WebAssembly component.

By combining the strengths of WebAssembly and iframes and skillfully utilizing postMessage for seamless communication, Re-Earth maximizes the potential of plugins. This innovative approach offers plug-in developers the flexibility to create powerful and feature-rich extensions that work harmoniously within the Re-Earth environment.

WebAssembly side

The WebAssembly side serves as the entry point when the plugin is initially loaded into Re-Earth and operates synchronously within the same thread as the application.

Within this context, you can perform the following actions:

• Get Re-Earth Scene Data: Access and retrieve essential data from the Re-Earth scene, empowering your plugin with valuable information to enhance its functionality.
• Call Re-Earth Plugin API: Utilize the Re-Earth plugin API to execute various commands and interact with the platform's core features, expanding the capabilities of your plugin.
• Modify Re-Earth Scene Partially: You have the ability to partially modify the Re-Earth scene, enabling changes to specific properties of layers. This feature allows for dynamic scene customization.
• Subscribe to Scene Events: Subscribe and listen to events occurring within the Re-Earth scene, enabling your plugin to respond to specific actions or triggers effectively.
• Interact with the IFrame side: Establish seamless communication between the WebAssembly side and the IFrame side using the reearth.ui.postMessage method to send data and reearth.on("message", () => {}) to receive data from the IFrame side. This facilitates effective data exchange and cooperation between the two components of the plugin.

However, there are certain limitations on the WebAssembly side:

• No Direct HTML Rendering and UI Creation: Rendering of HTML and direct UI creation is restricted on the WebAssembly side. Instead, these tasks must be carried out on the IFrame side.
• Limited Use of Web Browser APIs: Most APIs provided by web browsers are not accessible on the WebAssembly side. Only specific APIs, such as console.log, are available for use.
• No External Server Communication via HTTP: Communication with external servers via HTTP is not permitted on the WebAssembly side. Any data exchange with external servers must be facilitated through the IFrame side.