不依赖外部网站访问进行安装

Author: cyfung1031

rspack.config.ts

@@ -44,6 +44,7 @@ export default defineConfig({
     "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js",
     "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker.js",
     "linter.worker": `${src}/linter.worker.ts`,
+    script_installation_page: `${src}/script_installation_page.ts`,
   },
   output: {
     path: `${dist}/ext/src`,
@@ -205,6 +206,13 @@ export default defineConfig({
       minify: true,
       chunks: ["sandbox"],
     }),
+    new rspack.HtmlRspackPlugin({
+      filename: `${dist}/ext/src/script_installation_page.html`,
+      template: `${src}/pages/script_installation_page.html`,
+      inject: "head",
+      minify: true,
+      chunks: ["script_installation_page"],
+    }),
   ].filter(Boolean),
   optimization: {
     minimizer: [

src/app/service/service_worker/script.ts

@@ -28,9 +28,7 @@ import { type ResourceService } from "./resource";
 import { type ValueService } from "./value";
 import { compileScriptCode, isEarlyStartScript } from "../content/utils";
 import { type SystemConfig } from "@App/pkg/config/config";
-import { localePath } from "@App/locales/locales";
 import { arrayMove } from "@dnd-kit/sortable";
-import { DocumentationSite } from "@App/app/const";
 import type {
   TScriptRunStatus,
   TDeleteScript,
@@ -80,13 +78,35 @@ export class ScriptService {
   }
 
   listenerScriptInstall() {
+    const handleIncomingUrl = async (targetUrl: string) => {
+      const url = await this.getInstallPageUrl(targetUrl, "user");
+      if (!url) throw new Error("getInstallPageUrl failed");
+      return url;
+    };
+
+    // Runs in MV3 background (service worker)
+    chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+      switch (msg.type) {
+        case "INSTALL_PAGE:SUBMIT_URL": {
+          // Do work (can be async)
+          handleIncomingUrl(msg.url)
+            .then((result) => sendResponse({ ok: true, result }))
+            .catch((err) => sendResponse({ ok: false, error: String(err) }));
+          return true; // <-- keep the message channel open for async sendResponse
+        }
+        default:
+        // ignore
+      }
+    });
+
     // 初始化脚本安装监听
-    chrome.webRequest.onBeforeRequest.addListener(
-      (req: chrome.webRequest.OnBeforeRequestDetails) => {
-        // 处理url, 实现安装脚本
-        if (req.method !== "GET") {
-          return undefined;
+    chrome.webNavigation.onBeforeNavigate.addListener(
+      (req: chrome.webNavigation.WebNavigationParentedCallbackDetails) => {
+        const lastError = chrome.runtime.lastError;
+        if (lastError) {
+          console.error(lastError.message);
         }
+        // 处理url, 实现安装脚本
         let targetUrl: string | null = null;
         // 判断是否为 file:///*/*.user.js
         if (req.url.startsWith("file://") && req.url.endsWith(".user.js")) {
@@ -150,13 +170,16 @@ export class ScriptService {
           });
       },
       {
-        urls: [
-          `${DocumentationSite}/docs/script_installation/*`,
-          `${DocumentationSite}/en/docs/script_installation/*`,
-          "https://www.tampermonkey.net/script_installation.php*",
-          "file:///*/*.user.js*",
+        url: [
+          // { hostEquals: "docs.scriptcat.org", pathPrefix: "/docs/script_installation/" },
+          // { hostEquals: "docs.scriptcat.org", pathPrefix: "/en/docs/script_installation/" },
+          { hostEquals: "www.tampermonkey.net", pathPrefix: "/script_installation.php" },
+          { schemes: ["file"], pathSuffix: ".user.js" },
+          {
+            hostEquals: chrome.runtime.id,
+            pathPrefix: "/src/script_installation_page.html",
+          },
         ],
-        types: ["main_frame"],
       }
     );
     // 兼容 chrome 内核 < 128 处理
@@ -187,7 +210,7 @@ export class ScriptService {
             action: {
               type: "redirect" as chrome.declarativeNetRequest.RuleActionType,
               redirect: {
-                regexSubstitution: `${DocumentationSite}${localePath}/docs/script_installation/#url=\\0`,
+                regexSubstitution: `chrome-extension://${chrome.runtime.id}/src/script_installation_page.html?url=\\0`,
               },
             },
             condition: condition,
@@ -206,6 +229,18 @@ export class ScriptService {
   }
 
   public async openInstallPageByUrl(url: string, source: InstallSource): Promise<{ success: boolean; msg: string }> {
+    try {
+      const installPageUrl = await this.getInstallPageUrl(url, source);
+      if (!installPageUrl) throw new Error("getInstallPageUrl failed");
+      await openInCurrentTab(installPageUrl);
+      return { success: true, msg: "" };
+    } catch (err: any) {
+      console.error(err);
+      return { success: false, msg: err.message };
+    }
+  }
+
+  public async getInstallPageUrl(url: string, source: InstallSource): Promise<string> {
     const uuid = uuidv4();
     try {
       await this.openUpdateOrInstallPage(uuid, url, source, false);
@@ -217,11 +252,10 @@ export class ScriptService {
         },
         30 * 1000
       );
-      await openInCurrentTab(`/src/install.html?uuid=${uuid}`);
-      return { success: true, msg: "" };
+      return `/src/install.html?uuid=${uuid}`;
     } catch (err: any) {
       console.error(err);
-      return { success: false, msg: err.message };
+      return "";
     }
   }
 

src/manifest.json

@@ -42,7 +42,8 @@
     "notifications",
     "clipboardWrite",
     "unlimitedStorage",
-    "declarativeNetRequest"
+    "declarativeNetRequest",
+    "webNavigation"
   ],
   "optional_permissions": [
     "userScripts"
@@ -54,5 +55,11 @@
     "pages": [
       "src/sandbox.html"
     ]
-  }
+  },
+  "web_accessible_resources": [
+    {
+      "resources": ["/src/script_installation_page.html"],
+      "matches": ["<all_urls>"]
+    }
+  ]
 }

src/pages/script_installation_page.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Script Installation</title>
+    <style>
+        .downloading {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            column-gap: 4px;
+            align-items: center;
+        }
+        .error-message {
+            color: red;
+        }
+        .error-message:empty {
+            display:none;
+        }
+        .error-message::before {
+            content: "ERROR: ";
+        }
+
+        /* https://css-loaders.com/dots/ */
+        .loader {
+        width: 60px;
+        aspect-ratio: 2;
+        --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
+        background: 
+            var(--_g) 0%   50%,
+            var(--_g) 50%  50%,
+            var(--_g) 100% 50%;
+        background-size: calc(100%/3) 50%;
+        animation: l3 1s infinite linear;
+        transform: scale(0.5);
+        }
+        @keyframes l3 {
+            20%{background-position:0%   0%, 50%  50%,100%  50%}
+            40%{background-position:0% 100%, 50%   0%,100%  50%}
+            60%{background-position:0%  50%, 50% 100%,100%   0%}
+            80%{background-position:0%  50%, 50%  50%,100% 100%}
+        }
+    </style>
+  </head>
+  <body>
+
+    <h1>Script Installation</h1>
+    <p>This page is used as an intermediate step to install a new user script in ScriptCat.</p>
+    
+    <h2>Script Resources</h2>
+    <h3 class="downloading"><div>Downloading</div><div class="loader"></div></h3>
+    <h3 class="error-message"></h3>
+
+    <h2>Remarks</h2>
+
+    <p>After the Script Resources Downloading is complete, this page should be automatically redirected.</p>
+    <p>This page is not suitable for direct viewing. If necessary, please visit Installation Script.</p>
+
+  </body>
+</html>

src/script_installation_page.ts

@@ -0,0 +1,52 @@
+// read original URL from the hash and send to SW
+
+const showError = (errorMessage: string) => {
+  const errorMessageElement = document.querySelector(".error-message");
+  if (errorMessageElement) {
+    errorMessageElement.textContent = `${errorMessage}`;
+  }
+  const downloadingElement = document.querySelector(".downloading");
+  if (downloadingElement) {
+    downloadingElement.textContent = ``;
+  }
+  console.error("Service worker error:", errorMessage);
+};
+
+try {
+  const urlParam = new URLSearchParams(location.search).get("url");
+  // const urlParam = new URLSearchParams(location.hash.slice(1)).get("url");
+  const isValidURL = (url: string) => {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  if (!urlParam || !isValidURL(urlParam)) {
+    throw new Error("a valid URL shall be specified in the hash #url=....");
+  }
+
+  chrome.runtime.sendMessage(
+    {
+      type: "INSTALL_PAGE:SUBMIT_URL",
+      url: urlParam,
+    },
+    (resp) => {
+      const lastError = chrome.runtime.lastError;
+      if (lastError) {
+        showError(lastError.message || "chrome.runtime.lastError");
+        return;
+      }
+
+      if (!resp?.ok) {
+        showError(resp.error);
+        return;
+      }
+      location.replace(resp.result);
+    }
+  );
+} catch (e: any) {
+  showError(e?.message);
+}