🎨 sourceURL 调整，方便debug (#987)

Author: cyfung1031

src/app/service/content/utils.ts

@@ -2,6 +2,7 @@ import type { SCMetadata, ScriptRunResource, TScriptInfo } from "@App/app/repo/s
 import type { ScriptFunc } from "./types";
 import type { ScriptLoadInfo } from "../service_worker/types";
 import { DefinedFlags } from "../service_worker/runtime.consts";
+import { sourceMapTo } from "@App/pkg/utils/utils";
 
 export type CompileScriptCodeResource = {
   name: string;
@@ -41,17 +42,16 @@ export function compileScriptCode(scriptRes: ScriptRunResource, scriptCode?: str
 }
 
 export function compileScriptCodeByResource(resource: CompileScriptCodeResource): string {
-  const sourceURL = `//# sourceURL=${chrome.runtime.getURL(`/${encodeURI(resource.name)}.user.js`)}`;
   const requireCode = resource.require.map((r) => r.content).join("\n;");
   const preCode = requireCode; // 不需要 async 封装
-  const code = [resource.code, sourceURL].join("\n"); // 需要 async 封装, 可top-level await
+  const code = resource.code; // 需要 async 封装, 可top-level await
   // context 和 name 以unnamed arguments方式导入。避免代码能直接以变量名存取
   // this = context: globalThis
   // arguments = [named: Object, scriptName: string]
   // 使用sandboxContext时，arguments[0]为undefined, this.$则为一次性Proxy变量，用于全域拦截context
   // 非沙盒环境时，先读取 arguments[0]，因此不会读取页面环境的 this.$
   // 在UserScripts API中，由于执行不是在物件导向里呼叫，使用arrow function的话会把this改变。须使用 .call(this) [ 或 .bind(this)() ]
-  return `try {
+  const codeBody = `try {
   with(arguments[0]||this.$){
 ${preCode}
     return (async function(){
@@ -66,6 +66,7 @@ ${code}
       console.error(e);
   }
 }`;
+  return `${codeBody}${sourceMapTo(`${resource.name}.user.js`)}\n`;
 }
 
 // 通过脚本代码编译脚本函数

src/app/service/service_worker/runtime.ts

@@ -22,6 +22,7 @@ import {
   getMetadataStr,
   getUserConfigStr,
   obtainBlackList,
+  sourceMapTo,
 } from "@App/pkg/utils/utils";
 import { cacheInstance } from "@App/app/cache";
 import { UrlMatch } from "@App/pkg/utils/match";
@@ -832,9 +833,11 @@ export class RuntimeService {
     const retScript: chrome.userScripts.RegisteredUserScript[] = [];
     const contentJs = await this.getContentJsCode();
     if (contentJs) {
+      const codeBody = `(function (MessageFlag) {\n${contentJs}\n})('${messageFlag}')`;
+      const code = `${codeBody}${sourceMapTo("scriptcat-content.js")}\n`;
       retScript.push({
         id: "scriptcat-content",
-        js: [{ code: `(function (MessageFlag) {\n${contentJs}\n})('${messageFlag}')` }],
+        js: [{ code }],
         matches: ["<all_urls>"],
         allFrames: true,
         runAt: "document_start",
@@ -1293,7 +1296,8 @@ export class RuntimeService {
     { excludeMatches, excludeGlobs }: { excludeMatches: string[] | undefined; excludeGlobs: string[] | undefined }
   ) {
     // 构建inject.js的脚本注册信息
-    const code = `(function (MessageFlag) {\n${injectJs}\n})('${messageFlag}')`;
+    const codeBody = `(function (MessageFlag) {\n${injectJs}\n})('${messageFlag}')`;
+    const code = `${codeBody}${sourceMapTo("scriptcat-inject.js")}\n`;
     const script: chrome.userScripts.RegisteredUserScript = {
       id: "scriptcat-inject",
       js: [{ code }],

src/pkg/utils/utils.ts

@@ -390,6 +390,11 @@ export function cleanFileName(name: string): string {
   return name.replace(/[\x00-\x1F\\\/:*?"<>|]+/g, "-").trim();
 }
 
+export const sourceMapTo = (scriptName: string) => {
+  const url = chrome.runtime.getURL(`/${encodeURI(scriptName)}`);
+  return `\n//# sourceURL=${url}`;
+};
+
 export const stringMatching = (main: string, sub: string): boolean => {
   // If no wildcards, use simple includes check
   if (!sub.includes("*") && !sub.includes("?")) {