✨ 安装本地脚本时可以进行监听 #275

CodFrm · CodFrm · commit d9b0eeede1a8 · 2025-07-23T19:20:28.000+08:00
diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
@@ -418,5 +418,8 @@
   "sync_status": "同步状态",
   "search_scripts": "搜索脚本",
   "ext_update_notification": "脚本猫扩展已更新",
-  "ext_update_notification_desc": "当前版本：{{version}}，详情请查看更新日志"
+  "ext_update_notification_desc": "当前版本：{{version}}，详情请查看更新日志",
+  "watch_file_description": "监听文件变动，自动更新脚本，使用时请确保脚本文件路径不变且不能关闭页面",
+  "watch_file": "监听文件",
+  "stop_watch_file": "停止监听"
 }
diff --git a/src/pages/components/layout/MainLayout.tsx b/src/pages/components/layout/MainLayout.tsx
@@ -34,29 +34,8 @@ import { systemConfig } from "@App/pages/store/global";
 import i18n, { matchLanguage } from "@App/locales/locales";
 import "./index.css";
 import { arcoLocale } from "@App/locales/arco";
-
-const readFile = (file: File): Promise<string> => {
-  return new Promise((resolve) => {
-    // 实例化 FileReader对象
-    const reader = new FileReader();
-    reader.onload = async (processEvent) => {
-      // 创建blob url
-      const blob = new Blob([processEvent.target!.result!], {
-        type: "application/javascript",
-      });
-      const url = URL.createObjectURL(blob);
-      resolve(url);
-    };
-    // 调用readerAsText方法读取文本
-    reader.readAsText(file);
-  });
-};
-
-const uploadFiles = async (files: File[], importByUrlsFunc: (urls: string[]) => Promise<void>) => {
-  // const filterFiles = files.filter((f) => f.name.endsWith(".js"));
-  const urls = await Promise.all(files.map((file) => readFile(file)));
-  importByUrlsFunc(urls);
-};
+import { prepareScriptByCode } from "@App/pkg/utils/script";
+import type { ScriptClient } from "@App/app/service/service_worker/client";
 
 const MainLayout: React.FC<{
   children: ReactNode;
@@ -70,38 +49,72 @@ const MainLayout: React.FC<{
   const [showLanguage, setShowLanguage] = useState(false);
   const { t } = useTranslation();
 
+  const showImportResult = (stat: Awaited<ReturnType<ScriptClient["importByUrls"]>>) => {
+    if (!stat) return;
+    Modal.info({
+      title: t("script_import_result"),
+      content: (
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <div style={{ textAlign: "center" }}>
+            <Space size="small" style={{ fontSize: 18 }}>
+              <IconCheckCircle style={{ color: "green" }} />
+              {stat.success}
+              {""}
+              <IconCloseCircle style={{ color: "red" }} />
+              {stat.fail}
+            </Space>
+          </div>
+          {stat.msg.length > 0 && (
+            <>
+              <b>{t("failure_info")}:</b>
+              {stat.msg}
+            </>
+          )}
+        </Space>
+      ),
+    });
+  };
+
   const importByUrlsLocal = async (urls: string[]) => {
     const stat = await scriptClient.importByUrls(urls);
-    stat &&
-      Modal.info({
-        title: t("script_import_result"),
-        content: (
-          <Space direction="vertical" style={{ width: "100%" }}>
-            <div style={{ textAlign: "center" }}>
-              <Space size="small" style={{ fontSize: 18 }}>
-                <IconCheckCircle style={{ color: "green" }} />
-                {stat.success}
-                {""}
-                <IconCloseCircle style={{ color: "red" }} />
-                {stat.fail}
-              </Space>
-            </div>
-            {stat.msg.length > 0 && (
-              <>
-                <b>{t("failure_info")}:</b>
-                {stat.msg}
-              </>
-            )}
-          </Space>
-        ),
-      });
+    stat && showImportResult(stat);
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: { "application/javascript": [".js"] },
     onDrop: (acceptedFiles) => {
-      console.log(acceptedFiles);
-      uploadFiles(acceptedFiles, importByUrlsLocal);
+      // 本地的文件在当前页面处理，打开安装页面，将FileSystemFileHandle传递过去
+      // 实现本地文件的监听
+      const stat: Awaited<ReturnType<ScriptClient["importByUrls"]>> = { success: 0, fail: 0, msg: [] };
+      Promise.all(
+        acceptedFiles.map(async (file) => {
+          // 解析看看是不是一个标准的script文件
+          // 如果是，则打开安装页面
+          const code = await file.text();
+          try {
+            const resp = await prepareScriptByCode(code, "file://-/" + file.name);
+            if (resp) {
+              // 打开安装页面
+              const installWindow = window.open(`/src/install.html?local=true`, "_blank");
+              if (!installWindow) {
+                throw new Error(t("install_page_open_failed"));
+              }
+              installWindow.onload = () =>
+                //@ts-ignore
+                installWindow.postMessage({ type: "file", file, fileHandle: file.handle }, "*");
+              stat.success++;
+            } else {
+              stat.fail++;
+              stat.msg.push(t("script_import_failed"));
+            }
+          } catch (e: any) {
+            stat.fail++;
+            stat.msg.push(e.message);
+          }
+        })
+      ).then(() => {
+        showImportResult(stat);
+      });
     },
   });
 
@@ -164,7 +177,6 @@ const MainLayout: React.FC<{
               placeholder={t("import_script_placeholder")}
               defaultValue=""
               onKeyDown={(e) => {
-                console.log(e);
                 if (e.ctrlKey && e.key === "Enter") {
                   e.preventDefault();
                   handleImport();
diff --git a/src/pages/install/App.tsx b/src/pages/install/App.tsx
@@ -10,8 +10,10 @@ import {
   Tag,
   Tooltip,
   Typography,
+  Popover,
 } from "@arco-design/web-react";
 import { IconDown } from "@arco-design/web-react/icon";
+import { v4 as uuidv4 } from "uuid";
 import CodeEditor from "../components/CodeEditor";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { Metadata, Script } from "@App/app/repo/scripts";
@@ -20,7 +22,7 @@ import type { Subscribe } from "@App/app/repo/subscribe";
 import { i18nDescription, i18nName } from "@App/locales/locales";
 import { useTranslation } from "react-i18next";
 import type { ScriptInfo } from "@App/pkg/utils/script";
-import { prepareScriptByCode, prepareSubscribeByCode } from "@App/pkg/utils/script";
+import { prepareScriptByCode, prepareSubscribeByCode, scriptInfoByCode } from "@App/pkg/utils/script";
 import { nextTime } from "@App/pkg/utils/cron";
 import { scriptClient, subscribeClient } from "../store/features/script";
 
@@ -45,20 +47,34 @@ const useScriptInstall = () => {
   const [diffCode, setDiffCode] = useState<string>();
   const [oldScript, setOldScript] = useState<Script | Subscribe>();
   const [isUpdate, setIsUpdate] = useState<boolean>(false);
+  const [localFile, setLocalFile] = useState<File | null>(null);
+  const [localFileHandle, setLocalFileHandle] = useState<FileSystemFileHandle | null>(null);
   const { t } = useTranslation();
 
   useEffect(() => {
-    const url = new URL(window.location.href);
-    const uuid = url.searchParams.get("uuid");
-    if (!uuid) {
-      return;
-    }
-
-    const loadScriptInfo = async () => {
+    const handle = async () => {
       try {
-        const info: ScriptInfo = await scriptClient.getInstallInfo(uuid);
-        if (!info) {
-          throw new Error("fetch script info failed");
+        const url = new URL(window.location.href);
+        const uuid = url.searchParams.get("uuid");
+        let info: ScriptInfo | undefined;
+        if (!uuid) {
+          // 检查是不是本地文件安装
+          const local = url.searchParams.get("local") === "true";
+          if (!local || !window.localFile) {
+            return;
+          }
+          // 处理本地文件的安装流程
+          // 处理成info对象
+          const file = window.localFile;
+          setLocalFile(file);
+          setLocalFileHandle(window.localFileHandle!);
+          const code = await file.text();
+          info = scriptInfoByCode(code, "file:///*from-local*/" + file.name, "user", false, uuidv4());
+        } else {
+          info = await scriptClient.getInstallInfo(uuid);
+          if (!info) {
+            throw new Error("fetch script info failed");
+          }
         }
 
         let prepare:
@@ -96,8 +112,7 @@ const useScriptInstall = () => {
         Message.error(t("script_info_load_failed") + " " + e.message);
       }
     };
-
-    loadScriptInfo();
+    handle();
   }, [t]);
 
   return {
@@ -108,6 +123,8 @@ const useScriptInstall = () => {
     diffCode,
     oldScript,
     isUpdate,
+    localFile,
+    localFileHandle,
   };
 };
 
@@ -226,9 +243,13 @@ const useAntiFeatures = () => {
 function App() {
   const [enable, setEnable] = useState<boolean>(false);
   const [btnText, setBtnText] = useState<string>("");
+  const [scriptCode, setScriptCode] = useState<string>("");
   const { t } = useTranslation();
 
-  const { scriptInfo, upsertScript, setUpsertScript, code, diffCode, oldScript, isUpdate } = useScriptInstall();
+  const { scriptInfo, upsertScript, setUpsertScript, code, diffCode, oldScript, isUpdate, localFile, localFileHandle } =
+    useScriptInstall();
+
+  const [watchFile, setWatchFile] = useState(false);
 
   const metadata: Metadata = scriptInfo?.metadata || {};
   const permissions = usePermissions(scriptInfo, metadata);
@@ -242,7 +263,7 @@ function App() {
     } else {
       setBtnText(isUpdate ? t("update_script")! : t("install_script"));
     }
-
+    setScriptCode(code || "");
     if (upsertScript) {
       document.title = `${!isUpdate ? t("install_script") : t("update_script")} - ${i18nName(upsertScript)} - ScriptCat`;
     }
@@ -324,12 +345,34 @@ function App() {
     [scriptInfo]
   );
 
+  useEffect(() => {
+    if (!watchFile) {
+      return;
+    }
+    if (!upsertScript) {
+      return;
+    }
+    // @ts-ignore
+    const observer = new FileSystemObserver(async (records) => {
+      // 调用安装
+      const code = await (await records[0].root.getFile()).text();
+      setScriptCode(code);
+      scriptClient.install(upsertScript as Script, code).catch((e) => {
+        Message.error(t("install_failed") + ": " + e);
+      });
+    });
+    observer.observe(localFileHandle);
+    return () => {
+      observer.disconnect();
+    };
+  }, [watchFile]);
+
   return (
     <div className="h-full">
       <div className="h-full">
         <Grid.Row className="mb-2" gutter={8}>
           <Grid.Col flex={1} className="flex-col p-8px">
-            <Space direction="vertical">
+            <Space direction="vertical" className="w-full">
               <div>
                 {upsertScript?.metadata.icon && (
                   <Avatar size={32} shape="square" style={{ marginRight: "8px" }}>
@@ -391,6 +434,19 @@ function App() {
                       <Button type="primary" size="small" icon={<IconDown />} />
                     </Dropdown>
                   </Button.Group>
+                  {localFile && (
+                    <Popover content={t("watch_file_description")}>
+                      <Button
+                        type="secondary"
+                        size="small"
+                        onClick={() => {
+                          setWatchFile(!watchFile);
+                        }}
+                      >
+                        {watchFile ? t("stop_watch_file") : t("watch_file")}
+                      </Button>
+                    </Popover>
+                  )}
                   {isUpdate ? (
                     <Button.Group>
                       <Button type="primary" status="danger" size="small" onClick={() => handleClose()}>
@@ -498,7 +554,7 @@ function App() {
             </Grid.Row>
           </Grid.Col>
         </Grid.Row>
-        <CodeEditor id="show-code" code={code || undefined} diffCode={diffCode || ""} />
+        <CodeEditor id="show-code" code={scriptCode || undefined} diffCode={diffCode || ""} />
       </div>
     </div>
   );
diff --git a/src/pages/install/main.tsx b/src/pages/install/main.tsx
@@ -19,6 +19,19 @@ const loggerCore = new LoggerCore({
 
 loggerCore.logger().debug("install page start");
 
+// 接收FileSystemType
+window.addEventListener(
+  "message",
+  (event) => {
+    if (event.data && event.data.type === "file") {
+      // 将FileSystemType存储到全局变量中
+      window.localFile = event.data.file;
+      window.localFileHandle = event.data.fileHandle;
+    }
+  },
+  false
+);
+
 const Root = (
   <Provider store={store}>
     <MainLayout className="!flex-col !px-4 box-border">
diff --git a/src/pkg/utils/script.ts b/src/pkg/utils/script.ts
@@ -85,13 +85,24 @@ export async function fetchScriptInfo(
   }
 
   const body = await resp.text();
-  const parse = parseMetadata(body);
+  return scriptInfoByCode(body, url, source, update, uuid);
+}
+
+// 通过脚本代码处理成脚本info
+export function scriptInfoByCode(
+  code: string,
+  url: string,
+  source: InstallSource,
+  update: boolean,
+  uuid: string
+): ScriptInfo {
+  const parse = parseMetadata(code);
   if (!parse) {
     throw new Error("parse script info failed");
   }
   const ret: ScriptInfo = {
     url,
-    code: body,
+    code,
     source,
     update,
     uuid,
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
@@ -7,6 +7,11 @@ declare const sandbox: Window;
 
 declare const self: ServiceWorkerGlobalScope;
 
+declare interface Window {
+  localFile: File | undefined;
+  localFileHandle: FileSystemFileHandle | undefined;
+}
+
 declare const MessageFlag: string;
 
 // 可以让content与inject环境交换携带dom的对象
