Upload 4 files

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

@@ -0,0 +1,17 @@
+/* generated by pull.js */
+const manifest = {
+  "name": "Save project to Google drive",
+  "description": " \"Googleに保存\" を追加し、Googleドライブに保存するようにします。",
+  "tags": [
+    "recommended"
+  ],
+  "userscripts": [
+    {
+      "url": "userscript.js"
+    }
+  ],
+  "enabledByDefault": true
+};
+import {mediaRecorderSupported} from "../../environment";
+if (!mediaRecorderSupported) manifest.unsupported = true;
+export default manifest;

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

@@ -0,0 +1,7 @@
+/* generated by pull.js */
+import _js from "./userscript.js";
+import _css from "!css-loader!./style.css";
+export const resources = {
+  "userscript.js": _js,
+  "style.css": _css,
+};

src/addons/addons/save-to-google/style.css

@@ -0,0 +1,55 @@
+.mediaRecorderPopup {
+  box-sizing: border-box;
+  width: 700px;
+  max-height: min(800px, 80vh);
+  max-width: 85%;
+  margin-top: 12vh;
+  overflow-y: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mediaRecorderPopupContent {
+  padding: 1.5rem 2.25rem;
+}
+
+.mediaRecorderPopup p {
+  font-size: 1rem;
+  margin: 0.5rem auto;
+}
+
+.mediaRecorderPopup p :last-child {
+  margin-left: 1rem;
+}
+
+.mediaRecorderPopup[dir="rtl"] p :last-child {
+  margin-left: 0;
+  margin-right: 1rem;
+}
+
+p.mediaRecorderPopupOption {
+  display: flex;
+  align-items: center;
+}
+
+.mediaRecorderPopupOption input[type="checkbox"] {
+  height: 1.5rem;
+}
+
+#recordOptionSecondsInput,
+#recordOptionDelayInput {
+  width: 6rem;
+}
+
+.mediaRecorderPopupButtons {
+  margin-top: 1.5rem;
+}
+
+.mediaRecorderPopupButtons button {
+  margin-left: 0.5rem;
+}
+
+/* TW: Fixes cancel button in dark mode */
+.mediaRecorderPopupButtons button:nth-of-type(1) {
+  color: black;
+}

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

@@ -0,0 +1,307 @@
+import SB3Downloader from "/src/containers/sb3-downloader.jsx";
+import { getProjectFilename } from '/src/containers/sb3-downloader.jsx';
+export default async ({ addon, console, msg }) => {
+  const CLIENT_ID = "1033286471224-n9mv8l869fqikubj2e8q92n8ige3qr6r.apps.googleusercontent.com";
+  const REDIRECT_URI = "https://soiz1-penguin-upload.hf.space/close";
+  const SCOPES = "https://www.googleapis.com/auth/drive.file";
+  const PROXY_URL = "https://soiz1-drive-proxy.hf.space/?file_id=";
+  const SHORT_URL = "https://s4.rf.gd/";
+
+  let accessToken = null;
+
+  while (true) {
+    const targetElem = await addon.tab.waitForElement(
+      'div[class*="menu-bar_file-group"] > div:last-child:not(.sa-record)',
+      { markAsSeen: true }
+    );
+
+    if (!document.querySelector('.sa-custom-modal-button')) {
+      const button = document.createElement("div");
+      button.className = "sa-custom-modal-button " + targetElem.className;
+      button.textContent = "保存";
+      button.style.cursor = "pointer";
+
+      button.addEventListener("click", () => {
+        showMainModal(addon);
+      });
+
+      targetElem.parentElement.appendChild(button);
+    }
+  }
+
+  function showMainModal(addon) {
+    const modal = addon.tab.createModal("Googleドライブに保存", { isOpen: true, useEditorClasses: true });
+    
+    modal.content.innerHTML = `
+      <div style="padding: 1rem;">
+        <h1>Googleドライブに接続</h1>
+        <p>Googleでログインして、プロジェクトを保存または更新します。</p>
+        <button id="google-login-button" class="button">Googleでログイン</button>
+        <div id="file-list-container" style="margin-top: 1rem; display: none;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+            <h2 style="margin: 0;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000;">${window.vm.runtime.projectName || "無題"}</span></h2>
+            <button id="new-file-button" class="button">新規保存</button>
+          </div>
+          <div id="file-list" style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 0.5rem;"></div>
+        </div>
+      </div>
+    `;
+
+    const loginButton = modal.content.querySelector("#google-login-button");
+    const fileListContainer = modal.content.querySelector("#file-list-container");
+    const fileList = modal.content.querySelector("#file-list");
+    const newFileButton = modal.content.querySelector("#new-file-button");
+    const projectTitle = modal.content.querySelector("#project-title");
+
+    // プロジェクトタイトルの編集機能
+    if (projectTitle) {
+      projectTitle.addEventListener("dblclick", () => {
+        const currentName = projectTitle.textContent;
+        const input = document.createElement("input");
+        input.type = "text";
+        input.value = currentName;
+        input.style.width = "200px";
+        
+        projectTitle.replaceWith(input);
+        input.focus();
+
+        const handleBlur = () => {
+          const newName = input.value.trim() || "無題";
+          window.vm.runtime.projectName = newName;
+          projectTitle.textContent = newName;
+          input.replaceWith(projectTitle);
+        };
+
+        input.addEventListener("blur", handleBlur);
+        input.addEventListener("keypress", (e) => {
+          if (e.key === "Enter") {
+            handleBlur();
+          }
+        });
+      });
+    }
+
+    if (loginButton) {
+      loginButton.addEventListener("click", () => {
+        const messageListener = (event) => {
+          if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
+            window.removeEventListener("message", messageListener);
+            accessToken = event.data.token;
+            
+            loginButton.style.display = "none";
+            
+            fetchDriveFiles(accessToken)
+              .then(files => {
+                displayFileList(files, accessToken, modal, addon);
+                fileListContainer.style.display = "block";
+              })
+              .catch(error => {
+                console.error("ファイル一覧取得エラー:", error);
+                showAlert(addon, "error", "ファイル一覧の取得に失敗しました");
+              });
+          }
+        };
+        window.addEventListener("message", messageListener);
+
+        const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
+          `client_id=${CLIENT_ID}` +
+          `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+          `&response_type=token` +
+          `&scope=${encodeURIComponent(SCOPES)}`;
+        
+        window.open(authUrl, "_blank", "width=500,height=600");
+      });
+    }
+
+    if (newFileButton) {
+      newFileButton.addEventListener("click", () => {
+        saveToGoogleDrive(null, null, modal.remove, addon)
+          .catch(error => {
+            console.error("新規保存エラー:", error);
+            showAlert(addon, "error", "新規保存に失敗しました");
+          });
+      });
+    }
+
+    modal.backdrop.addEventListener("click", modal.remove);
+    modal.closeButton.addEventListener("click", modal.remove);
+  }
+
+  async function fetchDriveFiles(accessToken) {
+    const response = await fetch("https://www.googleapis.com/drive/v3/files?q=mimeType='application/x-scratch'", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(await response.text());
+    }
+
+    const data = await response.json();
+    return data.files || [];
+  }
+
+  function displayFileList(files, accessToken, modal, addon) {
+    const fileList = modal.content.querySelector("#file-list");
+    fileList.innerHTML = "";
+
+    if (files.length === 0) {
+      fileList.innerHTML = "<p>保存されたファイルが見つかりません</p>";
+      return;
+    }
+
+    files.forEach(file => {
+      const fileItem = document.createElement("div");
+      fileItem.style.padding = "0.5rem";
+      fileItem.style.borderBottom = "1px solid #eee";
+      fileItem.style.display = "grid";
+      fileItem.style.gridTemplateColumns = "1fr auto auto";
+      fileItem.style.gap = "1rem";
+      fileItem.style.alignItems = "center";
+
+      const fileName = document.createElement("span");
+      fileName.textContent = file.name.replace('.sb3.txt', '');
+      
+      const loadButton = document.createElement("button");
+      loadButton.textContent = "読み込む";
+      loadButton.className = "button";
+      loadButton.style.width = "80px";
+
+      loadButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (confirm(`"${file.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
+          const url = `${PROXY_URL}${file.id}`;
+          window.location.href = `?project_url=${encodeURIComponent(url)}`;
+        }
+      });
+
+      const replaceButton = document.createElement("button");
+      replaceButton.textContent = "上書き保存";
+      replaceButton.className = "button";
+      replaceButton.style.width = "100px";
+
+      replaceButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (confirm(`"${file.name}"を現在のプロジェクトで上書きしますか？`)) {
+          saveToGoogleDrive(file.id, file.name, modal.remove, addon)
+            .catch(error => {
+              console.error("ファイル上書きエラー:", error);
+              showAlert(addon, "error", "ファイルの上書きに失敗しました");
+            });
+        }
+      });
+
+      // 共有リンクとコピーボタン
+      const linkContainer = document.createElement("div");
+      linkContainer.style.gridColumn = "1 / -1";
+      linkContainer.style.display = "flex";
+      linkContainer.style.alignItems = "center";
+      linkContainer.style.gap = "0.5rem";
+      linkContainer.style.fontSize = "0.9em";
+
+      const link = document.createElement("a");
+      link.href = `${SHORT_URL}${file.id}`;
+      link.textContent = `${SHORT_URL}${file.id}`;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+
+      const copyButton = document.createElement("button");
+      copyButton.textContent = "リンクをコピー";
+      copyButton.className = "button";
+      copyButton.style.fontSize = "0.8em";
+      copyButton.style.padding = "0.2rem 0.5rem";
+
+      copyButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        navigator.clipboard.writeText(`${SHORT_URL}${file.id}`)
+          .then(() => showAlert(addon, "success", "リンクをクリップボードにコピーしました"))
+          .catch(() => showAlert(addon, "error", "リンクのコピーに失敗しました"));
+      });
+
+      linkContainer.appendChild(document.createTextNode("共有リンク: "));
+      linkContainer.appendChild(link);
+      linkContainer.appendChild(copyButton);
+
+      fileItem.appendChild(fileName);
+      fileItem.appendChild(loadButton);
+      fileItem.appendChild(replaceButton);
+      fileItem.appendChild(linkContainer);
+      fileList.appendChild(fileItem);
+    });
+  }
+
+  async function saveToGoogleDrive(fileId, fileName, onSuccess, addon) {
+    try {
+      const blob = await window.vm.saveProjectSb3();
+      const projectName = window.vm.runtime.projectName || getProjectFilename || "無題";
+      const nameToUse = fileName || `${projectName}.sb3.txt`;
+      
+      const metadata = {
+        name: nameToUse,
+        mimeType: "application/x-scratch",
+      };
+
+      const url = fileId 
+        ? `https://www.googleapis.com/upload/drive/v3/files/${fileId}?uploadType=multipart`
+        : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+
+      const form = new FormData();
+      form.append("metadata", new Blob([JSON.stringify(metadata)], { type: "application/json" }));
+      form.append("file", blob);
+
+      const method = fileId ? "PATCH" : "POST";
+
+      const uploadResponse = await fetch(url, {
+        method,
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: form,
+      });
+
+      if (!uploadResponse.ok) {
+        throw new Error(await uploadResponse.text());
+      }
+
+      const fileData = await uploadResponse.json();
+      console.log("ファイルがGoogleドライブに保存/更新されました:", fileData);
+
+      if (!fileId) {
+        const permissionResponse = await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            role: "reader",
+            type: "anyone",
+          }),
+        });
+
+        if (!permissionResponse.ok) {
+          console.warn("権限の設定に失敗しましたが、ファイルは保存されました");
+        }
+      }
+
+      const action = fileId ? "上書き保存" : "新規保存";
+      showAlert(addon, "success", `Googleドライブに${action}しました`);
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      console.error("保存エラー:", error);
+      showAlert(addon, "error", `保存に失敗しました: ${error.message}`);
+      throw error;
+    }
+  }
+
+  function showAlert(addon, type, message) {
+    addon.tab.redux.dispatch({
+      type: "scratch-gui/alerts/SHOW_ALERT",
+      payload: {
+        alertType: type,
+        message: message
+      }
+    });
+  }
+};