Update src/addons/addons/save-to-google/userscript.js

src/addons/addons/save-to-google/userscript.js

@@ -1,49 +1,62 @@
 export default async ({ addon, console, msg }) => {
   while (true) {
-    const elem = await addon.tab.waitForElement('div[class*="menu-bar_file-group"] > div:last-child:not(.custom-menu)', {
-      markAsSeen: true,
-      reduxEvents: ["scratch-gui/mode/SET_PLAYER", "fontsLoaded/SET_FONTS_LOADED", "scratch-gui/locales/SELECT_LOCALE"],
+    // 既存のメニューバーの最後の要素を取得（カスタムボタンが重複しないようにする）
+    const elem = await addon.tab.waitForElement(
+      'div[class*="menu-bar_file-group"] > div:last-child:not(.custom-menu)',
+      {
+        markAsSeen: true,
+        reduxEvents: [
+          "scratch-gui/mode/SET_PLAYER",
+          "fontsLoaded/SET_FONTS_LOADED",
+          "scratch-gui/locales/SELECT_LOCALE"
+        ],
+      }
+    );
+
+    // カスタムメニューバーのボタンを作成
+    const menuBarButton = Object.assign(document.createElement("div"), {
+      className: "custom-menu " + elem.className,
+      textContent: msg("menu-button") || "メニュー",
     });
-    
-    const createModal = () => {
-      const { backdrop, container, content, closeButton, remove } = addon.tab.createModal(msg("option-title"), {
-        isOpen: true,
-        useEditorClasses: true,
+
+    // ボタンクリックでモーダルを表示
+    menuBarButton.addEventListener("click", () => {
+      // モーダル作成（addon.tab.createModal を利用）
+      const { backdrop, container, content, closeButton, remove } = addon.tab.createModal(
+        msg("menu-title") || "メニュー",
+        {
+          isOpen: true,
+          useEditorClasses: true,
+        }
+      );
+
+      // モーダル内に説明用のHTML要素を追加
+      const description = Object.assign(document.createElement("p"), {
+        textContent: msg("menu-description") || "ここに任意のHTML内容を記述できます。"
       });
-      
-      container.classList.add("customModal");
-      content.classList.add("customModalContent");
-      
-      content.innerHTML = `
-        <h2>カスタムオプション</h2>
-        <p>ここにカスタムHTMLコンテンツを追加できます。</p>
-      `;
-      
-      backdrop.addEventListener("click", remove);
-      closeButton.addEventListener("click", remove);
-    };
-    
-    if (!document.querySelector(".custom-menu")) {
-      const menuContainer = document.createElement("div");
-      menuContainer.className = "custom-menu " + elem.className;
-      
-      // オプションボタン
-      const optionButton = document.createElement("div");
-      optionButton.textContent = "オプション";
-      optionButton.className = "custom-button";
-      optionButton.addEventListener("click", createModal);
-      menuContainer.appendChild(optionButton);
-      
-      // Googleドライブに保存ボタン
-      const saveButton = document.createElement("div");
-      saveButton.textContent = "Googleドライブに保存";
-      saveButton.className = "custom-button";
-      saveButton.addEventListener("click", () => {
-        console.log("Googleドライブに保存処理をここに追加");
+      content.appendChild(description);
+
+      // 「Googleドライブに保存」ボタンを追加
+      const googleDriveButton = document.createElement("button");
+      googleDriveButton.textContent = "Googleドライブに保存";
+      googleDriveButton.addEventListener("click", () => {
+        // Googleドライブへの保存処理をここに記述
+        console.log("Googleドライブに保存ボタンがクリックされました");
       });
-      menuContainer.appendChild(saveButton);
-      
-      elem.parentElement.appendChild(menuContainer);
-    }
+      content.appendChild(googleDriveButton);
+
+      // 閉じるボタンを追加
+      const closeBtn = document.createElement("button");
+      closeBtn.textContent = msg("close") || "閉じる";
+      closeBtn.addEventListener("click", () => remove());
+      content.appendChild(closeBtn);
+
+      // backdropクリックでモーダルを閉じる
+      backdrop.addEventListener("click", () => remove());
+      closeButton.addEventListener("click", () => remove());
+    });
+
+    // カスタムボタンをメニューバーに追加
+    elem.parentElement.appendChild(menuBarButton);
   }
 };