[油猴脚本] GM_postMessage: 用户端-伺服器(连WebWorker) 的双向沟通

cyfung1031 · 发表于 2025-11-24 23:33:02

本帖最后由 cyfung1031 于 2025-11-25 00:37 编辑

本帖最后由 cyfung1031 于 2025-11-25 00:23 编辑

原文： https://github.com/scriptscat/scriptcat/issues/883
脚本猫：https://scriptcat.org/zh-CN/script-show-page/4710
测试：
https://example.com/?GM_postMessage_server
https://example.com/?GM_postMessage_client

（这是用一个前台脚本做的示例）
（后台脚木的话要做一个前台一个后台，然后用同一个储存空间。请参考相关的资料说明）

// ==UserScript==
// @name         New Userscript X02O-1
// @namespace    https://docs.scriptcat.org/
// @version      0.1.1
// @description  try to take over the world!
// @author       You
// @match        https://*/*?GM_postMessage*
// @grant        GM.setValue
// @grant        GM_addValueChangeListener
// @require      https://scriptcat.org/lib/4710/0.1.0/GM_postMessage.js?sha384-U9kZ0JxuJEQFA7LMejrhTcel/fMoH/g434fOTpP0a/fBXxMnutQ7/L+WOiA1p9UT
// @noframes
// ==/UserScript==

// 使用模板字符串定义 Worker
const createWorker = (fn) => new Worker(URL.createObjectURL(new Blob([`(${fn})()`], { type: 'text/javascript' })));

// https://example.com/?GM_postMessage_server
// https://example.com/?GM_postMessage_client

if (location.href.includes("GM_postMessage_server")) {

    console.log('我是接收端 (Server)');

    // 使用
    const worker = createWorker(function () {
        console.log('我是工作端 (Server Worker)');
        self.addEventListener('message', (event) => {
            const { type, data } = event.data;
            if (type === 'sum') {
                const result = data.reduce((a, b) => a + b, 0);
                self.postMessage({ type: 'sum', result });
            }
            if (type === 'multiply') {
                const result = data.reduce((a, b) => a * b, 1);
                self.postMessage({ type: 'multiply', result });
            }
        });
    });

    worker.addEventListener('message', (event) => {
        console.log('[3] Web Worker 处理完成并传回结果:', event.data);
        GM_postMessage("worker-response", event.data);
    });

    GM_onMessage("worker-request", ({ message }) => {
        console.log('[2] 收到并转发要求至 Web Worker:', message);
        worker.postMessage({ type: message.type, data: message.data });
    });

} else if (location.href.includes("GM_postMessage_client")) {

    console.log('我是请求端 (Client)');

    GM_onMessage("worker-response", ({ message }) => {
        console.log('[4] 收到 Web Worker 结果:', message);
    });

    console.log('[1] 发送要求至Web Worker:');
    GM_postMessage("worker-request", { type: 'sum', data: [1, 2, 3, 4, 5] });
    GM_postMessage("worker-request", { type: 'multiply', data: [2, 3, 4] });

}