[v1.3] 配合 1.3 scripting, 重构 GM_addElement （bug 修补 + 功能改进）

[cyfung1031]

事原

• 1.3 scripting - scripting.js 不能在 CSP TTP 插入元素执行代码
• GM_addElement - 最近支持了 onload onerror 等 function value

改善

• 统一以 content.js 处理 CSP插入元素
• 【新功能】可使用 content.js 或 inject.js 创造元素 ( native: true )
• 【新功能】 追加多一个 parameter 让 GM_addElement 可以像 insertBefore 一样插在特定位置
• 文字 / 数字 均使用 content.js 设置 （避开 TTP )
• 除了 textContent, 还支持了 innerHTML, outerHTML, innerText
• 针对 input element 常有的 value，也支持了
• 针对 className, 也支持了
• Function 等使用 页面环境 - inject.js / content.js (视乎 @inject-into 有否指定了 content)
• 设计上兼容了在 content环境 （@inject-into content) 执行 ，即 自己呼叫自己

测试环境

• github.com (CSP)
• content-security-policy.com (CSP)
• youtube.com (TTP)

注

• 作者 CodFrm 可能觉得这个代码风格不理想要重构
• 和 [v1.3] 重构 GM Api 代码设计 #1212 有冲突。看哪个先合并

Test

// ==UserScript==
// @name         GM_addElement test
// @match        *://*/*?test_GM_addElement
// @grant        GM_addElement
// @version      0
// ==/UserScript==

/*
### Example Sites
* https://content-security-policy.com/?test_GM_addElement (CSP)
* https://github.com/scriptscat/scriptcat/?test_GM_addElement (CSP)
* https://www.youtube.com/account_playback/?test_GM_addElement (TTP)
*/

const logSection = (title) => {
    console.log(`\n=== ${title} ===`);
};

const logStep = (message, data) => {
    if (data !== undefined) {
        console.log(`→ ${message}:`, data);
    } else {
        console.log(`→ ${message}`);
    }
};


// ─────────────────────────────────────────────
// Native textarea insertion
// ─────────────────────────────────────────────
logSection("Native textarea insertion - BEGIN");

const textarea = GM_addElement('textarea', {
    native: true,
    value: "myText",
});

logStep("Textarea value", textarea.value);
logSection("Native textarea insertion - END");


// ─────────────────────────────────────────────
// Div insertion
// ─────────────────────────────────────────────
logSection("Div insertion - BEGIN");

GM_addElement('div', {
    innerHTML: '<div id="test777"></div>',
});

logSection("Div insertion - END");


// ─────────────────────────────────────────────
// Span insertion
// ─────────────────────────────────────────────
logSection("Span insertion - BEGIN");

GM_addElement(document.getElementById("test777"), 'span', {
    className: "test777-span",
    textContent: 'Hello World!',
});

logStep(
    "Span content",
    document.querySelector("span.test777-span").textContent
);

logSection("Span insertion - END");


// ─────────────────────────────────────────────
// Image insertion
// ─────────────────────────────────────────────
logSection("Image insertion - BEGIN");

let img;
await new Promise((resolve, reject) => {
    img = GM_addElement(document.body, 'img', {
        src: 'https://www.tampermonkey.net/favicon.ico',
        onload: resolve,
        onerror: reject
    });

    logStep("Image element inserted");
});

logStep("Image loaded");
logSection("Image insertion - END");


// ─────────────────────────────────────────────
// Script insertion
// ─────────────────────────────────────────────
logSection("Script insertion - BEGIN");

GM_addElement(document.body, 'script', {
    textContent: "window.myCustomFlag = true; console.log('script run ok');",
}, img);

logStep(
    "Script inserted before image",
    img.previousSibling?.nodeName === "SCRIPT"
);

logSection("Script insertion - END");

[CodFrm]

1.3 scripting - scripting.js 不能在CSP插入元素

我看没问题啊

[cyfung1031]

1.3 scripting - scripting.js 不能在CSP插入元素

我看没问题啊

呀。我打錯&記錯了
是TTP

• https://scriptcat.org/zh-CN?_TTP_GM_addElement

// ==UserScript==
// @name         New Userscript MWNB-1
// @namespace    https://docs.scriptcat.org/
// @version      0.1.0
// @description  try to take over the world!
// @author       You
// @match        https://scriptcat.org/zh-CN?_TTP_GM_addElement
// @grant        GM_addElement
// @noframes
// ==/UserScript==

(function () {
  'use strict';

  trustedTypes.createPolicy('abc', {
    createHTML: (string) => { throw new Error('Unsafe HTML') },
    createScript: (string) => { throw new Error('Unsafe script') },
    createScriptURL: (string) => { throw new Error('Unsafe URL') }
  });

  console.log("START");
  const elm = GM_addElement("script", { textContent: "console.log('userscript running')" });
  console.log("END", elm);

  // 成功的话会打印 userscript running
})();

未修好的 v1.3

PR修正后