✨ 批量脚本链接导入 (#395)

修复 链接导入失败时模态框卡死的问题
实现 批量脚本链接导入

Author: DreamNya

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scriptcat",
-  "version": "0.17.0-beta",
+  "version": "0.17.0-beta.1",
   "description": "脚本猫,一个可以执行用户脚本的浏览器扩展,万物皆可脚本化,让你的浏览器可以做更多的事情!",
   "author": "CodFrm",
   "license": "GPLv3",

packages/message/server.ts

@@ -94,9 +94,13 @@ export class Server {
       try {
         const ret = func(params, new GetSender(sender!));
         if (ret instanceof Promise) {
-          ret.then((data) => {
-            sendResponse({ code: 0, data });
-          });
+          ret
+            .then((data) => {
+              sendResponse({ code: 0, data });
+            })
+            .catch((err) => {
+              sendResponse({ code: -1, message: err });
+            });
           return true;
         } else {
           sendResponse({ code: 0, data: ret });

src/app/service/service_worker/client.ts

@@ -87,6 +87,72 @@ export class ScriptClient extends Client {
   importByUrl(url: string) {
     return this.do("importByUrl", url);
   }
+
+  async formatUrl(url: string) {
+    try {
+      const newUrl = new URL(url.replace(/\/$/, ""));
+      const { hostname, pathname } = newUrl;
+      // 判断是否为脚本猫脚本页
+      if (hostname === "scriptcat.org" && /script-show-page\/\d+$/.test(pathname)) {
+        const scriptId = pathname.match(/\d+$/)![0];
+        // 请求脚本信息
+        const scriptInfo = await fetch(`https://scriptcat.org/api/v2/scripts/${scriptId}`)
+          .then((res) => {
+            return res.json();
+          })
+          .then((json) => {
+            return json;
+          });
+        const { code, data, msg } = scriptInfo;
+        if (code != 0) {
+          // 无脚本访问权限
+          return { success: false, msg };
+        } else {
+          // 返回脚本实际安装地址
+          const scriptName = data.name;
+          return `https://scriptcat.org/scripts/code/${scriptId}/${scriptName}.user.js`;
+        }
+      } else {
+        return url;
+      }
+    } catch {
+      return url;
+    }
+  }
+
+  importByUrls(urls: string[]) {
+    if (urls.length == 0) {
+      return;
+    }
+    return (
+      Promise.allSettled(
+        urls.map(async (url) => {
+          const formattedResult = await this.formatUrl(url);
+          if (formattedResult instanceof Object) {
+            return Promise.resolve(formattedResult);
+          } else {
+            return this.do("importByUrl", formattedResult);
+          }
+        })
+        // this.do 只会resolve 不会reject
+      ) as Promise<PromiseFulfilledResult<{ success: boolean; msg: string }>[]>
+    ).then((results) => {
+      console.log(results);
+      const stat = results.reduce(
+        (obj, result, index) => {
+          if (result.value.success) {
+            obj.success++;
+          } else {
+            obj.fail++;
+            obj.msg.push(`#${index + 1}: ${result.value.msg}`);
+          }
+          return obj;
+        },
+        { success: 0, fail: 0, msg: [] as string[] }
+      );
+      return stat;
+    });
+  }
 }
 
 export class ResourceClient extends Client {

src/app/service/service_worker/script.ts

@@ -143,16 +143,22 @@ export class ScriptService {
     );
   }
 
-  public openInstallPageByUrl(url: string, source: InstallSource) {
+  public openInstallPageByUrl(url: string, source: InstallSource): Promise<{ success: boolean; msg: string }> {
     const uuid = uuidv4();
-    return fetchScriptInfo(url, source, false, uuidv4()).then((info) => {
-      Cache.getInstance().set(CacheKey.scriptInstallInfo(uuid), info);
-      setTimeout(() => {
-        // 清理缓存
-        Cache.getInstance().del(CacheKey.scriptInstallInfo(uuid));
-      }, 30 * 1000);
-      openInCurrentTab(`/src/install.html?uuid=${uuid}`);
-    });
+    return fetchScriptInfo(url, source, false, uuidv4())
+      .then((info) => {
+        Cache.getInstance().set(CacheKey.scriptInstallInfo(uuid), info);
+        setTimeout(() => {
+          // 清理缓存
+          Cache.getInstance().del(CacheKey.scriptInstallInfo(uuid));
+        }, 30 * 1000);
+        openInCurrentTab(`/src/install.html?uuid=${uuid}`);
+        return { success: true, msg: "" };
+      })
+      .catch((err) => {
+        console.error(err);
+        return { success: false, msg: err.message };
+      });
   }
 
   // 直接通过url静默安装脚本

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_scriptcat__",
-  "version": "0.17.0.1100",
+  "version": "0.17.0.1200",
   "author": "CodFrm",
   "description": "__MSG_scriptcat_description__",
   "options_ui": {

src/pages/components/layout/MainLayout.tsx

@@ -11,8 +11,16 @@ import {
   Space,
   Typography,
 } from "@arco-design/web-react";
-import { RefInputType } from "@arco-design/web-react/es/Input/interface";
-import { IconDesktop, IconDown, IconLink, IconMoonFill, IconSunFill } from "@arco-design/web-react/icon";
+import { RefTextAreaType } from "@arco-design/web-react/es/Input";
+import {
+  IconCheckCircle,
+  IconCloseCircle,
+  IconDesktop,
+  IconDown,
+  IconLink,
+  IconMoonFill,
+  IconSunFill,
+} from "@arco-design/web-react/icon";
 import React, { ReactNode, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import "./index.css";
@@ -28,7 +36,7 @@ const MainLayout: React.FC<{
 }> = ({ children, className, pageName }) => {
   const lightMode = useAppSelector(selectThemeMode);
   const dispatch = useAppDispatch();
-  const importRef = useRef<RefInputType>(null);
+  const importRef = useRef<RefTextAreaType>(null);
   const [importVisible, setImportVisible] = useState(false);
   const { t } = useTranslation();
 
@@ -50,8 +58,32 @@ const MainLayout: React.FC<{
             title={t("import_link")}
             visible={importVisible}
             onOk={async () => {
+              const urls = importRef.current!.dom.value.split("\n").filter((v) => v);
               try {
-                await scriptClient.importByUrl(importRef.current!.dom.value);
+                const stat = await scriptClient.importByUrls(urls);
+                stat &&
+                  Modal.info({
+                    title: "链接导入结果",
+                    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>失败信息:</b>
+                            {stat.msg}
+                          </>
+                        )}
+                      </Space>
+                    ),
+                  });
                 setImportVisible(false);
               } catch (e) {
                 Message.error(`${t("import_link_failure")}: ${e}`);
@@ -61,7 +93,12 @@ const MainLayout: React.FC<{
               setImportVisible(false);
             }}
           >
-            <Input ref={importRef} defaultValue="" />
+            <Input.TextArea
+              ref={importRef}
+              rows={8}
+              placeholder={`支持输入.user.js结尾的脚本绝对链接 或 脚本猫安装页链接\n可多行填写，每行一条\n示例：\nhttps://example.com/test.user.js \nhttps://scriptcat.org/zh-CN/script-show-page/1234`}
+              defaultValue=""
+            />
           </Modal>
           <div className="flex row items-center">
             <img style={{ height: "40px" }} src="/assets/logo.png" alt="ScriptCat" />