Update src/addons/addons/debug-console/userscript.js

src/addons/addons/debug-console/userscript.js

@@ -1,204 +1,204 @@
-(async function setupButtons() {
-while (true) {
+export default async ({ addon }) => {
+  while (true) {
     const targetElem = await addon.tab.waitForElement(
-        'div[class*="menu-bar_file-group"] > div:last-child:not(.sa-record)',
-        { markAsSeen: true }
+      'div[class*="menu-bar_file-group"] > div:last-child:not(.sa-record)',
+      { markAsSeen: true }
     );
 
+    if (!document.querySelector('.sa-debug-modal-button')) {
+      const button = document.createElement("div");
+      button.className = "sa-debug-modal-button " + targetElem.className;
+      button.textContent = "デバッグ";
+      button.style.cursor = "pointer";
 
-    // ✅ デバッグボタンを追加
-    if (!document.querySelector('.sa-debug-button')) {
-        const debugBtn = document.createElement("div");
-        debugBtn.className = "sa-debug-button " + targetElem.className;
-        debugBtn.textContent = "デバッグ";
-        debugBtn.style.cursor = "pointer";
-        debugBtn.addEventListener("click", () => {
-            // デバッグコンソール実行スクリプト
-            (function () {
-                if (window.__injectedConsole) return;
-                window.__injectedConsole = true;
-
-  const style = `
-    #floatingConsole {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      width: 400px;
-      max-height: 60vh;
-      background: #111;
-      color: #0f0;
-      font-family: monospace;
-      font-size: 14px;
-      border: 1px solid #0f0;
-      border-radius: 8px;
-      box-shadow: 0 0 10px #0f0;
-      z-index: 999999;
-      display: flex;
-      flex-direction: column;
-      resize: both;
-      overflow: hidden;
-    }
-    #floatingConsoleHeader {
-      background: #222;
-      cursor: move;
-      padding: 5px 10px;
-      user-select: none;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    #floatingConsoleHeader button {
-      background: transparent;
-      color: #0f0;
-      border: none;
-      font-weight: bold;
-      margin-left: 5px;
-      cursor: pointer;
-    }
-    #floatingConsoleLog {
-      flex: 1;
-      overflow-y: auto;
-      padding: 10px;
-      border-top: 1px solid #0f0;
-      border-bottom: 1px solid #0f0;
-      background: #000;
-    }
-    #floatingConsoleInput {
-      display: flex;
-      border-top: 1px solid #0f0;
-    }
-    #floatingConsoleInput input {
-      flex: 1;
-      background: #000;
-      color: #0f0;
-      border: none;
-      padding: 10px;
-      font-family: monospace;
-    }
-    #floatingConsoleInput button {
-      background: #333;
-      color: #0f0;
-      border: none;
-      padding: 10px;
-      cursor: pointer;
+      button.addEventListener("click", () => {
+        injectDebugConsole();
+      });
+
+      targetElem.parentElement.appendChild(button);
     }
-    `
-  ;
-
-  const css = document.createElement("style");
-  css.textContent = style;
-  document.head.appendChild(css);
-
-  const el = document.createElement("div");
-  el.id = "floatingConsole";
-  el.innerHTML = `
-    <div id="floatingConsoleHeader">
-      <span id="consoleTitle">🖥 Console</span>
-      <div>
-        <button id="minBtn">∧</button>
-        <button id="closeBtn">×</button>
+  }
+
+  // 浮動コンソールをページに挿入する関数
+  function injectDebugConsole() {
+    if (window.__injectedConsole) return;
+    window.__injectedConsole = true;
+
+    const style = `
+      #floatingConsole {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 400px;
+        max-height: 60vh;
+        background: #111;
+        color: #0f0;
+        font-family: monospace;
+        font-size: 14px;
+        border: 1px solid #0f0;
+        border-radius: 8px;
+        box-shadow: 0 0 10px #0f0;
+        z-index: 999999;
+        display: flex;
+        flex-direction: column;
+        resize: both;
+        overflow: hidden;
+      }
+      #floatingConsoleHeader {
+        background: #222;
+        cursor: move;
+        padding: 5px 10px;
+        user-select: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      #floatingConsoleHeader button {
+        background: transparent;
+        color: #0f0;
+        border: none;
+        font-weight: bold;
+        margin-left: 5px;
+        cursor: pointer;
+      }
+      #floatingConsoleLog {
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px;
+        border-top: 1px solid #0f0;
+        border-bottom: 1px solid #0f0;
+        background: #000;
+      }
+      #floatingConsoleInput {
+        display: flex;
+        border-top: 1px solid #0f0;
+      }
+      #floatingConsoleInput input {
+        flex: 1;
+        background: #000;
+        color: #0f0;
+        border: none;
+        padding: 10px;
+        font-family: monospace;
+      }
+      #floatingConsoleInput button {
+        background: #333;
+        color: #0f0;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+      }
+    `;
+
+    const css = document.createElement("style");
+    css.textContent = style;
+    document.head.appendChild(css);
+
+    const el = document.createElement("div");
+    el.id = "floatingConsole";
+    el.innerHTML = `
+      <div id="floatingConsoleHeader">
+        <span id="consoleTitle">🖥 Console</span>
+        <div>
+          <button id="minBtn">∧</button>
+          <button id="closeBtn">×</button>
+        </div>
       </div>
-    </div>
-    <div id="floatingConsoleLog">[Console Ready]</div>
-    <div id="floatingConsoleInput">
-      <input id="floatingConsoleCmd" placeholder="JavaScriptを入力..." />
-      <button id="execBtn">実行</button>
-    </div>
-  `;
-  document.body.appendChild(el);
-
-  const logBox = el.querySelector("#floatingConsoleLog");
-  const input = el.querySelector("#floatingConsoleCmd");
-
-  const log = (msg) => {
-    const div = document.createElement("div");
-    div.textContent = "> " + msg;
-    logBox.appendChild(div);
-    logBox.scrollTop = logBox.scrollHeight;
-  };
-
-  el.querySelector("#execBtn").onclick = () => {
-    const code = input.value;
-    input.value = "";
-    try {
-      const result = eval(code);
-      log("結果: " + result);
-    } catch (e) {
-      log("エラー: " + e);
-    }
-  };
-
-  el.querySelector("#closeBtn").onclick = () => {
-    el.remove();
-    window.__injectedConsole = false;
-  };
-
-  let minimized = false;
-  const minBtn = el.querySelector("#minBtn");
-  const header = el.querySelector("#floatingConsoleHeader");
-  const title = el.querySelector("#consoleTitle");
-
-  minBtn.onclick = () => {
-    minimized = !minimized;
-    logBox.style.display = minimized ? "none" : "block";
-    el.querySelector("#floatingConsoleInput").style.display = minimized ? "none" : "flex";
-    title.style.display = minimized ? "none" : "inline"; // ✅ タイトル非表示
-    el.querySelector("#closeBtn").style.display = minimized ? "none" : "inline"; // ✅ ×ボタン非表示
-    minBtn.textContent = minimized ? "∨" : "∧";
-
-    if (minimized) {
-      el.style.width = "auto"; // ✅ 幅縮小
-      el.style.height = "auto"; // ✅ 高さ縮小
-      el.style.overflow = "visible";
-    } else {
-      el.style.width = "400px";
-      el.style.maxHeight = "60vh";
-    }
-  };
-
-  // ドラッグ移動
-  (function makeDraggable(target, handle) {
-    let offsetX = 0, offsetY = 0, dragging = false;
-    handle.addEventListener("mousedown", (e) => {
-      dragging = true;
-      offsetX = e.clientX - target.offsetLeft;
-      offsetY = e.clientY - target.offsetTop;
-      document.body.style.userSelect = "none";
-    });
-    document.addEventListener("mousemove", (e) => {
-      if (dragging) {
-        target.style.left = (e.clientX - offsetX) + "px";
-        target.style.top = (e.clientY - offsetY) + "px";
-        target.style.right = "auto";
-        target.style.bottom = "auto";
+      <div id="floatingConsoleLog">[Console Ready]</div>
+      <div id="floatingConsoleInput">
+        <input id="floatingConsoleCmd" placeholder="JavaScriptを入力..." />
+        <button id="execBtn">実行</button>
+      </div>
+    `;
+    document.body.appendChild(el);
+
+    const logBox = el.querySelector("#floatingConsoleLog");
+    const input = el.querySelector("#floatingConsoleCmd");
+
+    const log = (msg) => {
+      const div = document.createElement("div");
+      div.textContent = "> " + msg;
+      logBox.appendChild(div);
+      logBox.scrollTop = logBox.scrollHeight;
+    };
+
+    el.querySelector("#execBtn").onclick = () => {
+      const code = input.value;
+      input.value = "";
+      try {
+        const result = eval(code);
+        log("結果: " + result);
+      } catch (e) {
+        log("エラー: " + e);
       }
-    });
-    document.addEventListener("mouseup", () => {
-      dragging = false;
-      document.body.style.userSelect = "";
-    });
-  })(el, header);
-
-  // console.* フック
-  const hookConsole = (name) => {
-    const original = console[name];
-    console[name] = function (...args) {
-      original.apply(console, args);
-      log("[" + name + "] " + args.join(" "));
     };
-  };
-  ["log", "warn", "error"].forEach(hookConsole);
-
-  window.onerror = (msg, src, line, col, err) => {
-    log("[onerror] " + msg + " @ " + line + ":" + col);
-  };
-  window.addEventListener("unhandledrejection", (e) => {
-    log("[unhandledrejection] " + e.reason);
-  });
-})();
-
-        });
-        targetElem.parentElement.appendChild(debugBtn);
-    }
-}
-})();
+
+    el.querySelector("#closeBtn").onclick = () => {
+      el.remove();
+      window.__injectedConsole = false;
+    };
+
+    let minimized = false;
+    const minBtn = el.querySelector("#minBtn");
+    const header = el.querySelector("#floatingConsoleHeader");
+    const title = el.querySelector("#consoleTitle");
+
+    minBtn.onclick = () => {
+      minimized = !minimized;
+      logBox.style.display = minimized ? "none" : "block";
+      el.querySelector("#floatingConsoleInput").style.display = minimized ? "none" : "flex";
+      title.style.display = minimized ? "none" : "inline";
+      el.querySelector("#closeBtn").style.display = minimized ? "none" : "inline";
+      minBtn.textContent = minimized ? "∨" : "∧";
+
+      if (minimized) {
+        el.style.width = "auto";
+        el.style.height = "auto";
+        el.style.overflow = "visible";
+      } else {
+        el.style.width = "400px";
+        el.style.maxHeight = "60vh";
+      }
+    };
+
+    // ドラッグ移動
+    (function makeDraggable(target, handle) {
+      let offsetX = 0, offsetY = 0, dragging = false;
+      handle.addEventListener("mousedown", (e) => {
+        dragging = true;
+        offsetX = e.clientX - target.offsetLeft;
+        offsetY = e.clientY - target.offsetTop;
+        document.body.style.userSelect = "none";
+      });
+      document.addEventListener("mousemove", (e) => {
+        if (dragging) {
+          target.style.left = (e.clientX - offsetX) + "px";
+          target.style.top = (e.clientY - offsetY) + "px";
+          target.style.right = "auto";
+          target.style.bottom = "auto";
+        }
+      });
+      document.addEventListener("mouseup", () => {
+        dragging = false;
+        document.body.style.userSelect = "";
+      });
+    })(el, header);
+
+    // console.* フック
+    const hookConsole = (name) => {
+      const original = console[name];
+      console[name] = function (...args) {
+        original.apply(console, args);
+        log("[" + name + "] " + args.join(" "));
+      };
+    };
+    ["log", "warn", "error"].forEach(hookConsole);
+
+    window.onerror = (msg, src, line, col, err) => {
+      log("[onerror] " + msg + " @ " + line + ":" + col);
+    };
+    window.addEventListener("unhandledrejection", (e) => {
+      log("[unhandledrejection] " + e.reason);
+    });
+  }
+};