🐛 修复 GM_addElement 问题，将操作放到content环境 (#1233)

* 配合 1.3 scripting, 重构 `GM_addElement`

* Update scripting.ts

* Create gm_add_element.js

* Update src/app/service/content/gm_api/gm_api.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* API parameter for GM.addElement

* event.detail.createElement as string

* if (!(frag instanceof DocumentFragment))  throw Error

* 测试改一下

* 整合测试用例

* 重构（删除了native、insertBefore、和特定属性）

* 优化lint和测试问题

* 删除不兼容的示例

* 根据copilot的处理

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: 王一之 <yz@ggnb.top>

Author: 3 people

example/gm_add_element.js

@@ -22,9 +22,36 @@
  * 2. 元素标签名
  * 3. 属性对象
  */
-const el = GM_addElement(document.querySelector('.BorderGrid-cell'), "img", {
-    src: "https://bbs.tampermonkey.net.cn/uc_server/avatar.php?uid=4&size=small&ts=1"
+
+// ------------- 基础用法 ----------------
+
+const el = GM_addElement(document.querySelector(".BorderGrid-cell"), "img", {
+  src: "https://bbs.tampermonkey.net.cn/uc_server/avatar.php?uid=4&size=small&ts=1",
 });
 
 // 打印创建出来的 DOM 元素
 console.log(el);
+
+// ------------- 基础用法 - textContent ----------------
+
+const span3 = GM_addElement("span", {
+  textContent: "Hello",
+});
+
+console.log(`span text: ${span3.textContent}`);
+
+// ------------- 基础用法 - onload & onerror ----------------
+
+new Promise((resolve, reject) => {
+  img = GM_addElement(document.body, "img", {
+    src: "https://www.tampermonkey.net/favicon.ico",
+    onload: resolve,
+    onerror: reject,
+  });
+})
+  .then(() => {
+    console.log("img insert ok");
+  })
+  .catch(() => {
+    console.log("img insert failed");
+  });

example/tests/gm_api_test.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         GM API 完整测试
 // @namespace    https://docs.scriptcat.org/
-// @version      1.0.0
+// @version      1.1.0
 // @description  全面测试ScriptCat的所有GM API功能
 // @author       ScriptCat
 // @match        https://content-security-policy.com/
@@ -234,7 +234,7 @@
   });
 
   // ============ GM_addElement 测试 ============
-  test("GM_addElement - 创建元素", () => {
+  await testAsync("GM_addElement - 创建元素", async () => {
     assert("function", typeof GM_addElement, "GM_addElement 应该是函数");
 
     const div = GM_addElement("div", {
@@ -244,8 +244,39 @@
     assert(true, div && div.tagName === "DIV", "应该返回 div 元素");
     console.log("添加的元素:", div);
 
+    // 创建脚本元素测试
+    const script = GM_addElement("script", {
+      textContent: 'window.foo = "bar";',
+    });
+    assert(true, script && script.tagName === "SCRIPT", "应该返回 script 元素");
+    assert("bar", unsafeWindow.foo, "脚本内容应该执行，unsafeWindow.foo 应该是 'bar'");
+    console.log("添加的脚本元素:", script);
+
+    document.querySelector(".container").insertBefore(script, document.querySelector(".masthead"));
+
+    // onload 和 onerror 测试 - 插入图片元素
+    let img;
+    await new Promise((resolve, reject) => {
+      img = GM_addElement(document.body, "img", {
+        src: "https://www.tampermonkey.net/favicon.ico",
+        onload: () => {
+          console.log("图片加载成功");
+          resolve();
+        },
+        onerror: (error) => {
+          reject(new Error("图片加载失败: " + error));
+        },
+      });
+    });
+    assert(true, img && img.tagName === "IMG", "应该返回 img 元素");
+    console.log("添加的图片元素:", img);
+
     // 3秒后移除
-    setTimeout(() => div.remove(), 3000);
+    setTimeout(() => {
+      script.remove();
+      div.remove();
+      img.remove();
+    }, 3000);
   });
 
   // ============ GM_getResourceText/URL 测试 ============

packages/message/common.ts

@@ -14,8 +14,8 @@ export const pageDispatchEvent = performanceClone.dispatchEvent.bind(performance
 export const pageAddEventListener = performanceClone.addEventListener.bind(performanceClone);
 export const pageRemoveEventListener = performanceClone.removeEventListener.bind(performanceClone);
 const detailClone = typeof cloneInto === "function" ? cloneInto : null;
-export const pageDispatchCustomEvent = (eventType: string, detail: any) => {
-  if (detailClone && detail) detail = detailClone(detail, performanceClone);
+export const pageDispatchCustomEvent = <T = any>(eventType: string, detail: T) => {
+  if (detailClone && detail) detail = <T>detailClone(detail, performanceClone);
   const ev = new CustomEventClone(eventType, {
     detail,
     cancelable: true,

packages/message/custom_event_message.ts

@@ -51,6 +51,7 @@ export class CustomEventMessage implements Message {
         event.preventDefault(); // 告知另一端这边已准备好
         this.readyWrap.setReady(); // 两端已准备好，则 setReady()
       } else if (event instanceof MouseEventClone && event.movementX && event.relatedTarget) {
+        if (event.cancelable) event.preventDefault(); // 告知另一端
         relatedTargetMap.set(event.movementX, event.relatedTarget);
       } else if (event instanceof CustomEventClone) {
         this.messageHandle(event.detail, new CustomEventPostMessage(this));

src/app/service/content/create_context.ts

@@ -14,6 +14,7 @@ export const createContext = (
   GMInfo: any,
   envPrefix: string,
   message: Message,
+  contentMsg: Message,
   scriptGrants: Set<string>
 ) => {
   // 按照GMApi构建
@@ -31,6 +32,7 @@ export const createContext = (
   const context = createGMBase({
     prefix: envPrefix,
     message,
+    contentMsg,
     scriptRes,
     valueChangeListener,
     EE,

src/app/service/content/exec_script.test.ts

@@ -28,8 +28,13 @@ const envInfo: GMInfoEnv = {
   isIncognito: false,
 };
 
-// @ts-ignore
-const noneExec = new ExecScript(scriptRes, undefined, undefined, nilFn, envInfo);
+const noneExec = new ExecScript(scriptRes, {
+  envPrefix: "scripting",
+  message: undefined as any,
+  contentMsg: undefined as any,
+  code: nilFn,
+  envInfo,
+});
 
 const scriptRes2 = {
   id: 0,
@@ -42,8 +47,13 @@ const scriptRes2 = {
   value: {},
 } as unknown as ScriptLoadInfo;
 
-// @ts-ignore
-const sandboxExec = new ExecScript(scriptRes2, undefined, undefined, nilFn, envInfo);
+const sandboxExec = new ExecScript(scriptRes2, {
+  envPrefix: "scripting",
+  message: undefined as any,
+  contentMsg: undefined as any,
+  code: nilFn,
+  envInfo,
+});
 
 describe.concurrent("GM_info", () => {
   it.concurrent("none", async () => {
@@ -503,8 +513,13 @@ describe("沙盒环境测试", async () => {
 
   it.concurrent("RegExp", async () => {
     const script = Object.assign({}, scriptRes2) as ScriptLoadInfo;
-    // @ts-ignore
-    const exec = new ExecScript(script, undefined, undefined, nilFn, envInfo);
+    const exec = new ExecScript(script, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     script.code = `const str = "12345";
 const reg = /(123)/;
 return [str.match(reg), RegExp.$1];`;
@@ -516,24 +531,39 @@ return [str.match(reg), RegExp.$1];`;
   it.concurrent("沙盒之间不应该共享变量", async () => {
     const script = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script.code = `this.testVar = "ok"; ttest1 = "ok"; return {testVar: this.testVar, testVar2: this.testVar2, ttest1: typeof ttest1, ttest2: typeof ttest2};`;
-    // @ts-ignore
-    const exec1 = new ExecScript(script, undefined, undefined, nilFn, envInfo);
+    const exec1 = new ExecScript(script, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec1.scriptFunc = compileScript(compileScriptCode(script));
     const ret1 = await exec1.exec();
     expect(ret1).toEqual({ testVar: "ok", testVar2: undefined, ttest1: "string", ttest2: "number" });
 
     const script2 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script2.code = `this.testVar2 = "ok"; ttest2 = "ok"; return {testVar: this.testVar, testVar2: this.testVar2, ttest1: typeof ttest1, ttest2: typeof ttest2};`;
-    // @ts-ignore
-    const exec2 = new ExecScript(script2, undefined, undefined, nilFn, envInfo);
+    const exec2 = new ExecScript(script2, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec2.scriptFunc = compileScript(compileScriptCode(script2));
     const ret2 = await exec2.exec();
     expect(ret2).toEqual({ testVar: undefined, testVar2: "ok", ttest1: "number", ttest2: "string" });
 
     const script3 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script3.code = `onload = function (){return 123}; return {onload, thisOnload: this.onload, winOnload: window.onload};`;
-    // @ts-ignore
-    const exec3 = new ExecScript(script3, undefined, undefined, nilFn, envInfo);
+    const exec3 = new ExecScript(script3, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec3.scriptFunc = compileScript(compileScriptCode(script3));
     const ret3 = await exec3.exec();
     expect(ret3.onload).toEqual(expect.any(Function));
@@ -545,8 +575,13 @@ return [str.match(reg), RegExp.$1];`;
 
     const script4 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script4.code = `onload = function (){return 456}; return {onload, thisOnload: this.onload, winOnload: window.onload};`;
-    // @ts-ignore
-    const exec4 = new ExecScript(script4, undefined, undefined, nilFn, envInfo);
+    const exec4 = new ExecScript(script4, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec4.scriptFunc = compileScript(compileScriptCode(script4));
     const ret4 = await exec4.exec();
     expect(ret4.onload).toEqual(expect.any(Function));
@@ -564,16 +599,26 @@ return [str.match(reg), RegExp.$1];`;
   it.concurrent("沙盒之间能用unsafeWindow（及全局作用域）共享变量", async () => {
     const script = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script.code = `unsafeWindow.testSVar1 = "shareA"; ggaa1 = "ok"; return {testSVar1: unsafeWindow.testSVar1, testSVar2: unsafeWindow.testSVar2, ggaa1: typeof ggaa1, ggaa2: typeof ggaa2};`;
-    // @ts-ignore
-    const exec1 = new ExecScript(script, undefined, undefined, nilFn, envInfo);
+    const exec1 = new ExecScript(script, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec1.scriptFunc = compileScript(compileScriptCode(script));
     const ret1 = await exec1.exec();
     expect(ret1).toEqual({ testSVar1: "shareA", testSVar2: undefined, ggaa1: "string", ggaa2: "undefined" });
 
     const script2 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script2.code = `unsafeWindow.testSVar2 = "shareB"; ggaa2 = "ok"; return {testSVar1: unsafeWindow.testSVar1, testSVar2: unsafeWindow.testSVar2, ggaa1: typeof ggaa1, ggaa2: typeof ggaa2};`;
-    // @ts-ignore
-    const exec2 = new ExecScript(script2, undefined, undefined, nilFn, envInfo);
+    const exec2 = new ExecScript(script2, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec2.scriptFunc = compileScript(compileScriptCode(script2));
     const ret2 = await exec2.exec();
     expect(ret2).toEqual({ testSVar1: "shareA", testSVar2: "shareB", ggaa1: "string", ggaa2: "string" });
@@ -582,8 +627,13 @@ return [str.match(reg), RegExp.$1];`;
   it.concurrent("测试SC沙盒与TM沙盒有相近的特殊处理", async () => {
     const script1 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script1.code = `onfocus = function(){}; onresize = 123; onblur = "123"; const ret = {onfocus, onresize, onblur}; onfocus = null; onresize = null; onblur = null; return ret;`;
-    // @ts-ignore
-    const exec1 = new ExecScript(script1, undefined, undefined, nilFn, envInfo);
+    const exec1 = new ExecScript(script1, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec1.scriptFunc = compileScript(compileScriptCode(script1));
     const ret1 = await exec1.exec();
     expect(ret1.onfocus).toEqual(expect.any(Function));
@@ -592,8 +642,13 @@ return [str.match(reg), RegExp.$1];`;
 
     const script2 = Object.assign({}, scriptRes2) as ScriptLoadInfo;
     script2.code = `window.onfocus = function(){}; window.onresize = 123; window.onblur = "123"; const {onfocus, onresize, onblur} = window; const ret = {onfocus, onresize, onblur}; window.onfocus = null; window.onresize = null; window.onblur = null; return ret;`;
-    // @ts-ignore
-    const exec2 = new ExecScript(script2, undefined, undefined, nilFn, envInfo);
+    const exec2 = new ExecScript(script2, {
+      envPrefix: "scripting",
+      message: undefined as any,
+      contentMsg: undefined as any,
+      code: nilFn,
+      envInfo,
+    });
     exec2.scriptFunc = compileScript(compileScriptCode(script2));
     const ret2 = await exec2.exec();
     expect(ret2.onfocus).toEqual(expect.any(Function));

src/app/service/content/exec_script.ts

@@ -25,12 +25,16 @@ export default class ExecScript {
 
   constructor(
     scriptRes: TScriptInfo,
-    envPrefix: "scripting" | "offscreen",
-    message: Message,
-    code: string | ScriptFunc,
-    envInfo: GMInfoEnv,
-    globalInjection?: { [key: string]: any } // 主要是全域API. @grant none 时无效
+    options: {
+      envPrefix: string;
+      message: Message;
+      contentMsg: Message;
+      code: string | ScriptFunc;
+      envInfo: GMInfoEnv;
+      globalInjection?: { [key: string]: any }; // 主要是全域API. @grant none 时无效
+    }
   ) {
+    const { envPrefix, message, contentMsg, code, envInfo, globalInjection } = options;
     this.scriptRes = scriptRes;
     this.logger = LoggerCore.getInstance().logger({
       component: "exec",
@@ -52,7 +56,7 @@ export default class ExecScript {
       this.named = { GM: { info: GM_info }, GM_info };
     } else {
       // 构建脚本GM上下文
-      this.sandboxContext = createContext(scriptRes, GM_info, envPrefix, message, grantSet);
+      this.sandboxContext = createContext(scriptRes, GM_info, envPrefix, message, contentMsg, grantSet);
       if (globalInjection) {
         Object.assign(this.sandboxContext, globalInjection);
       }

src/app/service/content/exec_warp.ts

@@ -73,7 +73,14 @@ export class BgExecScriptWarp extends ExecScript {
       },
       isIncognito: false,
     };
-    super(scriptRes, "offscreen", message, scriptRes.code, envInfo, thisContext);
+    super(scriptRes, {
+      envPrefix: "offscreen",
+      message: message,
+      contentMsg: message,
+      code: scriptRes.code,
+      envInfo,
+      globalInjection: thisContext,
+    });
     this.setTimeout = setTimeout;
     this.setInterval = setInterval;
   }

src/app/service/content/global.ts

@@ -7,6 +7,8 @@ export const Native = {
   structuredClone: typeof structuredClone === "function" ? structuredClone : unsupportedAPI,
   jsonStringify: JSON.stringify.bind(JSON),
   jsonParse: JSON.parse.bind(JSON),
+  createElement: Document.prototype.createElement,
+  ownFragment: new DocumentFragment(),
 } as const;
 
 export const customClone = (o: any) => {