更新：下載插件程式碼

AnChiCode · AnChiCode · commit 8e2c3f18ebcf · 2025-03-04T15:49:59.000+08:00
1. 添加了下載已建立程式碼的功能
2. 重新組織部分零散程式
3. 修正建立程式碼時混入額外字符的錯誤
diff --git a/index.html b/index.html
@@ -360,7 +360,7 @@
 </head>
 
 <body>
-  <button type="button" id="build_result_button" onclick="setBuildResult()">建立</button>
+  <button type="button" id="build_result_button" onclick="Builder.setBuildResult()">建立</button>
   <div id="root">
     <div id="root_meta" class="root">
       <div class="root_title" onclick="onRootTitleClick('meta')">
@@ -726,10 +726,11 @@
       </div>
       <!-- plugin display -->
       <div id="display_plugin" class="block" style="display: block;">
-        <button type="button" id="copy_result_button" onclick="setCopyToClipBoard()">複製到剪貼簿</button>
-        <span style="font-size: small; color: #0005;">
+        <span style="font-size: small; color: #0005; display: block;">
           請注意，如果你在此編輯器內修改了任何內容，再次建立插件時將被覆蓋
         </span>
+        <button type="button" id="copy_result_button" onclick="Builder.setCopyToClipBoard()">複製到剪貼簿</button>
+        <button type="button" id="copy_result_button" onclick="Builder.onDownloadClick()">下載為程式檔</button>
         <textarea placeholder="Your plugin" hidden></textarea>
         <div id="monaco_build_display" style="height: 1000px;"></div>
       </div>
diff --git a/src/index.js b/src/index.js
@@ -986,44 +986,74 @@ class CommandBuilder {
     }
 }
 
+class Builder {
+    static useDownloadFile(data) {
+        const file = new Blob([data], { type: "text/javascript" })
 
+        if (window?.navigator?.msSaveOrOpenBlob)
+            return void window.navigator.msSaveOrOpenBlob(file, "plugin.js")
 
-const build = () => {
-    const [commandsNote, commandsCode] = CommandBuilder.build()
-    const code = commandsCode.length > 0
-        ? `\n(()=>{
+        const a = document.createElement("a")
+        const url = URL.createObjectURL(file)
+
+        a.href = url
+        a.download = "plugin.js"
+        a.style.display = "none"
+
+        document.body.appendChild(a)
+        a.click()
+
+        setTimeout(() => {
+            document.body.removeChild(a)
+            window.URL.revokeObjectURL(url)
+        }, 0)
+    }
+
+    static onDownloadClick() {
+        if (!EDITOR_RESULT) return
+
+        const code = EDITOR_RESULT.getValue()
+        Builder.useDownloadFile(code)
+    }
+
+    static build() {
+        const [commandsNote, commandsCode] = CommandBuilder.build()
+        const code = commandsCode.length > 0
+            ? `\n(()=>{
     const filename = document.currentScript.src.split("/").pop().replace(".js", "")
 
     ${commandsCode}
 })()`
-        : ""
-
-    return "/**:"
-        + [
-            ["info", BasicInfoBuilder.build()],
-            ["params", ParameterBuilder.build()],
-            ["command", commandsNote.length > 0 ? commandsNote : false],
-        ]
-            .filter(([_, v]) => v !== false)
-            .join("")
-        + "\n */"
-        + code
-        + "\n"
-}
+            : false
+
+        return "/**:"
+            + [
+                BasicInfoBuilder.build(),
+                ParameterBuilder.build(),
+                commandsNote,
+            ]
+                .filter(([_, v]) => v !== false)
+                .join("")
+            + "\n */"
+            + code
+            + "\n"
+    }
 
-const setBuildResult = () => {
-    if (!EL_RESULT) return
+    static setBuildResult() {
+        if (!EL_RESULT) return
 
-    const res = build()
-    EDITOR_RESULT.setValue(res)
-}
+        const res = Builder.build()
+        EDITOR_RESULT.setValue(res)
+    }
 
-const setCopyToClipBoard = () => {
-    if (!EDITOR_RESULT) return
+    static setCopyToClipBoard() {
+        if (!EDITOR_RESULT) return
+
+        navigator.clipboard.writeText(EDITOR_RESULT.getValue())
+            .then(() => console.log("ok"))
+            .catch(console.error)
+    }
 
-    navigator.clipboard.writeText(EDITOR_RESULT.getValue())
-        .then(() => console.log("ok"))
-        .catch(console.error)
 }
 
 
