feat(web): plugin playground presets extension to extension messenger

web/src/beta/features/PluginPlayground/Code/hook.ts

@@ -2,6 +2,7 @@ import Visualizer from "@reearth/beta/features/Visualizer";
 import { useNotification } from "@reearth/services/state";
 import * as yaml from "js-yaml";
 import { ComponentProps, useCallback, useState } from "react";
+import { v4 } from "uuid";
 
 import { Story } from "../../Visualizer/Crust/StoryPanel/types";
 import { WidgetLocation } from "../../Visualizer/Crust/Widgets/types";
@@ -121,7 +122,10 @@ export default ({ files, resetVisualizer }: Props) => {
                   widgets: [
                     ...(areaAlignSystem.widgets ?? []),
                     {
-                      id: cur.id,
+                      id: v4(),
+                      name: cur.name,
+                      extensionId: cur.id,
+                      pluginId: ymlJson.id,
                       __REEARTH_SOURCECODE: file.sourceCode,
                       extended
                     }

web/src/beta/features/PluginPlayground/Plugins/presets/communication/extensionExtensionMessenger.ts

@@ -0,0 +1,247 @@
+import { FileType, PluginType } from "../../constants";
+import { PRESET_PLUGIN_COMMON_STYLE } from "../common";
+
+// YAML File Definition
+const yamlFile: FileType = {
+  id: "extension-to-extension-messenger-reearth-yml",
+  title: "reearth.yml",
+  sourceCode: `id: extension-to-extension-messenger-plugin
+name: Extension To Extension Messenger
+version: 1.0.0
+extensions:
+  - id: extension-1
+    type: widget
+    name: Extension 1
+    description: Extension 1 Widget
+  - id: extension-2
+    type: widget
+    name: Extension 2
+    description: Extension 2 Widget
+`,
+  disableEdit: true,
+  disableDelete: true
+};
+
+// Extension 1 Widget Source Code
+const extension1SourceCode = `
+reearth.ui.show(\`
+  ${PRESET_PLUGIN_COMMON_STYLE}
+  <style>
+    input {
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      flex-grow: 1;
+    }
+
+    button {
+      padding: 8px 16px;
+      background: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background: #45a049;
+    }
+
+    .received {
+      background: white;
+      padding: 10px;
+      border-radius: 4px;
+      margin-top: 10px;
+    }
+
+    .messages-container {
+      min-height: 50px;
+      margin-top: 10px;
+    }
+
+    .message {
+      padding: 8px;
+      margin: 4px 0;
+      background: #f8f9fa;
+      border-radius: 4px;
+    }
+  </style>
+
+   <div id="wrapper">
+    <h2>Extension 1</h2>
+    <div class="flex-center">
+      <input id="messageInput" type="text" placeholder="Enter message"/>
+      <button id="sendButton">Send</button>
+    </div>
+    <h3>Received Messages</h3>
+    <div class="received">
+      <div id="messagesContainer" class="messages-container"></div>
+    </div>
+  </div>
+
+   <script>
+   // Listen for UI button clicks and send message to extension
+    document.getElementById("sendButton").addEventListener("click", () => {
+      const input = document.getElementById("messageInput");
+      const message = input.value.trim();
+      if (message) {
+      // Send message from UI to extension
+        parent.postMessage({ type: "send", message }, "*");
+        input.value = "";
+      }
+    });
+
+     // Listen for messages from extension to update UI
+    window.addEventListener("message", (e) => {
+      const msg = e.data;
+      if (msg.type === "received") {
+        const container = document.getElementById("messagesContainer");
+        const div = document.createElement("div");
+        div.textContent = msg.message;
+        div.style.margin = "4px 0";
+        container.appendChild(div);
+      }
+    });
+  </script>
+\`);
+
+// Handle messages from UI to send to other extension
+reearth.extension.on("message", msg => {
+  if (msg.type === "send") {
+    const extensions = reearth.extension.list;
+    const target = extensions.find(ext => ext.extensionId === "extension-2");
+    if (target) {
+      reearth.extension.postMessage(target.id, msg.message);
+    }
+  }
+});
+
+// Handle messages received from other extension
+reearth.extension.on("extensionMessage", msg => {
+  reearth.ui.postMessage({
+    type: "received",
+    message: msg.data
+  });
+});`;
+
+// Extension 2 Widget Source Code
+const extension2SourceCode = `
+reearth.ui.show(\`
+  ${PRESET_PLUGIN_COMMON_STYLE}
+  <style>
+    input {
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      flex-grow: 1;
+    }
+
+    button {
+      padding: 8px 16px;
+      background: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background: #45a049;
+    }
+
+    .received {
+      background: white;
+      padding: 10px;
+      border-radius: 4px;
+      margin-top: 10px;
+    }
+
+    .messages-container {
+      min-height: 50px;
+      margin-top: 10px;
+    }
+
+    .message {
+      padding: 8px;
+      margin: 4px 0;
+      background: #f8f9fa;
+      border-radius: 4px;
+    }
+  </style>
+
+    <div id="wrapper">
+    <h2>Extension 2</h2>
+    <div class="flex-center">
+      <input id="messageInput" type="text" placeholder="Enter message"/>
+      <button id="sendButton">Send</button>
+    </div>
+    <h3>Received Messages</h3>
+    <div class="received">
+      <div id="messagesContainer" class="messages-container"></div>
+    </div>
+  </div>
+
+  <script>
+    document.getElementById("sendButton").addEventListener("click", () => {
+      const input = document.getElementById("messageInput");
+      const message = input.value.trim();
+      if (message) {
+        parent.postMessage({ type: "send", message }, "*");
+        input.value = "";
+      }
+    });
+
+    window.addEventListener("message", (e) => {
+      const msg = e.data;
+      if (msg.type === "received") {
+        const container = document.getElementById("messagesContainer");
+        const div = document.createElement("div");
+        div.textContent = msg.message;
+        div.style.margin = "4px 0";
+        container.appendChild(div);
+      }
+    });
+  </script>
+\`);
+
+// Note: Re:Earth visualizer requires using msg.data for message content
+// and extensionId for finding extensions
+
+// Handle messages from UI to send to other extension
+reearth.extension.on("message", msg => {
+  if (msg.type === "send") {
+    const extensions = reearth.extension.list;
+    const target = extensions.find(ext => ext.extensionId === "extension-1");
+    if (target) {
+      reearth.extension.postMessage(target.id, msg.message);
+    }
+  }
+});
+
+// Handle messages received from other extension
+reearth.extension.on("extensionMessage", msg => {
+  reearth.ui.postMessage({
+    type: "received",
+    message: msg.data
+  });
+});`;
+
+// Widget File Definitions
+const extension1File: FileType = {
+  id: "extension-to-extension-messenger-extension1",
+  title: "extension-1.js",
+  sourceCode: extension1SourceCode
+};
+
+const extension2File: FileType = {
+  id: "extension-to-extension-messenger-extension2",
+  title: "extension-2.js",
+  sourceCode: extension2SourceCode
+};
+
+// Plugin Definition
+export const extensionExtensionMessenger: PluginType = {
+  id: "extension-to-extension-messenger",
+  title: "Extension To Extension Messenger",
+  files: [yamlFile, extension1File, extension2File]
+};

web/src/beta/features/PluginPlayground/Plugins/presets/ui/uiExtensionMessenger.ts → web/src/beta/features/PluginPlayground/Plugins/presets/communication/uiExtensionMessenger.ts

@@ -52,10 +52,43 @@ const widgetFile: FileType = {
       button:hover {
         background: #45a049;
       }
+
+      #info-section {
+        margin: 20px 0;
+        text-align: left;
+      }
+
+      #info-toggle {
+        padding: 6px 12px;  /* Smaller button */
+        background: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;    /* Smaller text */
+      }
+
+      #info-content {
+        background: #f9f9f9;  /* Light gray background */
+        padding: 10px;
+        border-radius: 5px;
+        margin-top: 15px;    /* Space between button and content */
+        font-size: 14px;
+        line-height: 1.4;
+      }
     </style>
 
     <div id="wrapper">
       <h2>Coordinate Viewer</h2>
+      <div id="info-section">
+        <button id="info-toggle">Show Info</button>
+        <div id="info-content" style="display: none;">
+          <strong>How to use this plugin:</strong><br>
+          1. Click anywhere on the map to see its coordinates<br>
+          2. Click the "Fly to Position" button to move the camera to that location<br>
+          3. Coordinates update dynamically when you click anywhere on the map<br><br>
+        </div>
+      </div>
       <div class="coordinates">
         <p>Latitude: <span id="lat" class="coordinate-value">-</span>°</p>
         <p>Longitude: <span id="lng" class="coordinate-value">-</span>°</p>
@@ -89,6 +122,14 @@ const widgetFile: FileType = {
           alt: 1000 // Fixed camera height for better viewing
         }, "*");
       });
+
+      // Toggle info section
+      document.getElementById("info-toggle").addEventListener("click", () => {
+        const infoContent = document.getElementById("info-content");
+        const isHidden = infoContent.style.display === "none";
+        infoContent.style.display = isHidden ? "block" : "none";
+        document.getElementById("info-toggle").textContent = isHidden ? "Hide Info" : "Show Info";
+      });
     </script>
 \`);
 

web/src/beta/features/PluginPlayground/Plugins/presets/index.ts

@@ -1,5 +1,7 @@
 import { PluginType } from "../constants";
 
+import { extensionExtensionMessenger } from "./communication/extensionExtensionMessenger";
+import { uiExtensionMessenger } from "./communication/uiExtensionMessenger";
 import { myPlugin } from "./custom/myPlugin";
 import { add3dTiles } from "./layers/add-3Dtiles";
 import { addCsv } from "./layers/add-csv";
@@ -13,7 +15,6 @@ import { hideFlyToDeleteLayer } from "./layers/hideFlyToDeleteLayer";
 import { header } from "./ui/header";
 import { responsivePanel } from "./ui/responsivePanel";
 import { sidebar } from "./ui/sidebar";
-import { uiExtensionMessenger } from "./ui/uiExtensionMessenger";
 
 type PresetPluginCategory = {
   id: string;
@@ -37,7 +38,7 @@ export const presetPlugins: PresetPlugins = [
   {
     id: "communication",
     title: "Communication",
-    plugins: [uiExtensionMessenger]
+    plugins: [uiExtensionMessenger, extensionExtensionMessenger]
   },
   {
     id: "viewerScene",

web/src/beta/features/Visualizer/Crust/Plugins/Plugin/hooks/usePluginAPI.ts

@@ -116,6 +116,7 @@ export function usePluginAPI({
     uiEvents.current = events<UIEventType>();
     modalEvents.current = events<ModalEventType>();
     popupEvents.current = events<PopupEventType>();
+    extensionEvents.current = events<ExtensionEventType>();
 
     initAndMergeEvents(ctx.viewerEvents, viewerEventsRef, [
       "click",