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

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

@@ -13,9 +13,11 @@ export default async ({ addon, console, msg }) => {
     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/";
+    const SHARE_URL = "https://soiz1-penguin-upload.hf.space/upload?id=";
 
     let accessToken = localStorage.getItem('googleDriveAccessToken') || null;
     let currentAccountEmail = localStorage.getItem('googleDriveAccountEmail') || null;
+    let currentAccountName = localStorage.getItem('googleDriveAccountName') || null;
 
     while (true) {
         const targetElem = await addon.tab.waitForElement(
@@ -50,7 +52,7 @@ export default async ({ addon, console, msg }) => {
                 <h1 style="font-size: 1.5rem; margin-bottom: 1rem;">Googleドライブに接続</h1>
                 ${accessToken ? `
                     <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
-                        <div>ログイン中: ${currentAccountEmail || 'Googleアカウント'}</div>
+                        <div>ログイン中: ${currentAccountName || currentAccountEmail || 'Googleアカウント'}</div>
                         <button id="change-account-button" class="button" style="padding: 0.25rem 0.5rem; font-size: 0.9rem;">アカウントを変更</button>
                     </div>
                 ` : `
@@ -59,7 +61,7 @@ export default async ({ addon, console, msg }) => {
                 `}
                 <div id="file-list-container" style="margin-top: 1rem; ${accessToken ? '' : 'display: none;'}">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                        <h2 style="margin: 0; font-size: 1.2rem;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000;">${window.vm.runtime.projectName || "無題"}</span></h2>
+                        <h2 style="margin: 0; font-size: 1.2rem;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000; color: #333;">${window.vm.runtime.projectName || "無題"}</span></h2>
                         <button id="new-file-button" class="button">新規保存</button>
                     </div>
                     <div id="file-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;"></div>
@@ -108,8 +110,10 @@ export default async ({ addon, console, msg }) => {
             changeAccountButton.addEventListener("click", () => {
                 accessToken = null;
                 currentAccountEmail = null;
+                currentAccountName = null;
                 localStorage.removeItem('googleDriveAccessToken');
                 localStorage.removeItem('googleDriveAccountEmail');
+                localStorage.removeItem('googleDriveAccountName');
                 showMainModal(addon);
                 modal.remove();
             });
@@ -146,11 +150,15 @@ export default async ({ addon, console, msg }) => {
                 window.removeEventListener("message", messageListener);
                 accessToken = event.data.token;
                 currentAccountEmail = event.data.email || null;
+                currentAccountName = event.data.name || null;
                 
                 localStorage.setItem('googleDriveAccessToken', accessToken);
                 if (currentAccountEmail) {
                     localStorage.setItem('googleDriveAccountEmail', currentAccountEmail);
                 }
+                if (currentAccountName) {
+                    localStorage.setItem('googleDriveAccountName', currentAccountName);
+                }
                 
                 showMainModal(addon);
                 modal.remove();
@@ -248,63 +256,64 @@ export default async ({ addon, console, msg }) => {
             fileName.style.fontSize = "1rem";
             fileName.style.textAlign = "center";
             fileName.style.fontWeight = "bold";
+            fileName.style.color = "#333";
             fileItem.appendChild(fileName);
 
-        // 共有リンク
-        const linkContainer = document.createElement("div");
-        linkContainer.style.display = "flex";
-        linkContainer.style.alignItems = "center";
-        linkContainer.style.gap = "0.5rem";
-        linkContainer.style.marginBottom = "0.5rem";
-
-        const linkLabel = document.createElement("div");
-        linkLabel.textContent = "共有リンク:";
-        linkLabel.style.fontSize = "0.9em";
-        linkLabel.style.color = "#666";
-        linkContainer.appendChild(linkLabel);
-
-        const linkUrlContainer = document.createElement("div");
-        linkUrlContainer.style.display = "flex";
-        linkUrlContainer.style.alignItems = "center";
-        linkUrlContainer.style.gap = "0.25rem";
-        linkUrlContainer.style.flexGrow = "1";
-
-        const linkUrl = document.createElement("a");
-        linkUrl.href = `${SHORT_URL}${project.id}`;
-        linkUrl.textContent = `${SHORT_URL}${project.id}`;
-        linkUrl.target = "_blank";
-        linkUrl.rel = "noopener noreferrer";
-        linkUrl.style.fontSize = "0.9em";
-        linkUrl.style.wordBreak = "break-all";
-        linkUrl.style.color = "#4d97ff";
-        linkUrl.style.textDecoration = "none";
-        linkUrl.style.borderBottom = "1px dashed #4d97ff";
-        linkUrlContainer.appendChild(linkUrl);
-
-        const copyButton = document.createElement("button");
-        copyButton.textContent = "コピー";
-        copyButton.className = "button";
-        copyButton.style.fontSize = "0.8em";
-        copyButton.style.padding = "0.2rem 0.5rem";
-        copyButton.style.whiteSpace = "nowrap";
-
-        copyButton.addEventListener("click", (e) => {
-            e.stopPropagation();
-            navigator.clipboard.writeText(`${SHORT_URL}${project.id}`)
-                .then(() => showAlert(addon, "success", "リンクをクリップボードにコピーしました"))
-                .catch(() => showAlert(addon, "error", "リンクのコピーに失敗しました"));
-        });
+            // 共有リンク
+            const linkContainer = document.createElement("div");
+            linkContainer.style.display = "flex";
+            linkContainer.style.flexDirection = "column";
+            linkContainer.style.gap = "0.25rem";
+            linkContainer.style.marginBottom = "0.5rem";
+
+            const linkHeader = document.createElement("div");
+            linkHeader.style.display = "flex";
+            linkHeader.style.justifyContent = "space-between";
+            linkHeader.style.alignItems = "center";
+
+            const linkLabel = document.createElement("span");
+            linkLabel.textContent = "共有リンク:";
+            linkLabel.style.fontSize = "0.8em";
+            linkLabel.style.color = "#555";
+
+            const copyButton = document.createElement("button");
+            copyButton.textContent = "コピー";
+            copyButton.className = "button";
+            copyButton.style.fontSize = "0.8em";
+            copyButton.style.padding = "0.1rem 0.3rem";
+            copyButton.style.backgroundColor = "#e9e9e9";
+            copyButton.style.color = "#333";
+
+            copyButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(`${SHORT_URL}${project.id}`)
+                    .then(() => showAlert(addon, "success", "リンクをクリップボードにコピーしました"))
+                    .catch(() => showAlert(addon, "error", "リンクのコピーに失敗しました"));
+            });
 
-        linkUrlContainer.appendChild(copyButton);
-        linkContainer.appendChild(linkUrlContainer);
-        fileItem.appendChild(linkContainer);
+            linkHeader.appendChild(linkLabel);
+            linkHeader.appendChild(copyButton);
+            linkContainer.appendChild(linkHeader);
 
-            // 操作ボタン
-const buttonContainer = document.createElement("div");
-buttonContainer.style.display = "grid";
-buttonContainer.style.gridTemplateColumns = "1fr 1fr 1fr"; // 3列に変更
-buttonContainer.style.gap = "0.5rem";
+            const linkUrl = document.createElement("a");
+            linkUrl.href = `${SHORT_URL}${project.id}`;
+            linkUrl.textContent = `${SHORT_URL}${project.id}`;
+            linkUrl.target = "_blank";
+            linkUrl.rel = "noopener noreferrer";
+            linkUrl.style.fontSize = "0.9em";
+            linkUrl.style.wordBreak = "break-all";
+            linkUrl.style.color = "#1155cc";
+            linkUrl.style.textDecoration = "none";
+            linkUrl.style.borderBottom = "1px solid #1155cc";
+            linkContainer.appendChild(linkUrl);
+
+            fileItem.appendChild(linkContainer);
 
+            // 操作ボタン
+            const buttonContainer = document.createElement("div");
+            buttonContainer.style.display = "grid";
+            buttonContainer.style.gridTemplateColumns = "1fr 1fr";
+            buttonContainer.style.gap = "0.5rem";
 
             const loadButton = document.createElement("button");
             loadButton.textContent = "読み込む";
@@ -339,11 +348,22 @@ buttonContainer.style.gap = "0.5rem";
                 }
             });
 
+            const shareButton = document.createElement("button");
+            shareButton.textContent = "共有";
+            shareButton.className = "button";
+            shareButton.style.width = "100%";
+            shareButton.style.backgroundColor = "#4CAF50";
+            shareButton.style.color = "white";
+
+            shareButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                window.open(`${SHARE_URL}${project.id}`, "_blank");
+            });
+
             const deleteButton = document.createElement("button");
             deleteButton.textContent = "削除";
             deleteButton.className = "button";
             deleteButton.style.width = "100%";
-            deleteButton.style.gridColumn = "1 / -1";
             deleteButton.style.backgroundColor = "#ff4444";
             deleteButton.style.color = "white";
 
@@ -375,22 +395,10 @@ buttonContainer.style.gap = "0.5rem";
                 }
             });
 
-const shareButton = document.createElement("button");
-shareButton.textContent = "共有";
-shareButton.className = "button";
-shareButton.style.width = "100%";
-shareButton.style.backgroundColor = "#4CAF50";
-shareButton.style.color = "white";
-
-shareButton.addEventListener("click", (e) => {
-    e.stopPropagation();
-    window.open(`https://scratch-school.ct.ws/upload.php?id=${project.id}`, "_blank");
-});
-
-buttonContainer.appendChild(loadButton);
-buttonContainer.appendChild(replaceButton);
-buttonContainer.appendChild(shareButton);
-buttonContainer.appendChild(deleteButton); 
+            buttonContainer.appendChild(loadButton);
+            buttonContainer.appendChild(replaceButton);
+            buttonContainer.appendChild(shareButton);
+            buttonContainer.appendChild(deleteButton);
             fileItem.appendChild(buttonContainer);
 
             fileList.appendChild(fileItem);