Tampermonkey 油猴脚本进阶开发：网页增强、表单自动填写与页面数据提取实战

1
// -----------------------------------------------------------------------------
2
// 安全读取原生全局对象的防御性模式
3
// -----------------------------------------------------------------------------
4
function getPageGlobalProperty(propName) {
5
    if (typeof unsafeWindow === 'undefined') {
6
        // 说明脚本运行在 @grant none 无沙箱模式下，直接降级读取 window
7
        return window[propName];
8
    }
9
    try {
10
        // 利用 Object.getOwnPropertyDescriptor 绕过目标站点可能设置的恶意 Proxy 陷阱
11
        const descriptor = Object.getOwnPropertyDescriptor(unsafeWindow, propName);
12
        if (descriptor && typeof descriptor.value !== 'undefined') {
13
            return descriptor.value;
14
        }
15
        return unsafeWindow[propName];
16
    } catch (err) {
17
        console.error(`[油猴防御] 穿透读取 unsafeWindow.${propName} 失败:`, err);
18
        return undefined;
19
    }
20
}

1
// 在油猴沙箱环境中向页面上下文广播任务指令
2
function dispatchTaskToPage(payload) {
3
    const event = new CustomEvent('__USER_SCRIPT_TASK__', {
4
        detail: JSON.stringify(payload),
5
        bubbles: false,
6
        cancelable: true
7
    });
8
    window.dispatchEvent(event);
9
}
10

11
// 监听由页面原生脚本回传的响应事件
12
window.addEventListener('__USER_SCRIPT_RESPONSE__', (e) => {
13
    const result = JSON.parse(e.detail);
14
    console.log('[油猴沙箱] 接收到页面上下文回传的数据:', result);
15
});

1
// 封装工业级 Promise 风格的跨域网络请求器
2
function gmRequest(options) {
3
    return new Promise((resolve, reject) => {
4
        GM_xmlhttpRequest({
5
            method: options.method || 'GET',
6
            url: options.url,
7
            headers: {
8
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36',
9
                'Accept': 'application/json, text/plain, */*',
10
                'Referer': options.referer || options.url,
11
                ...(options.headers || {})
12
            },
13
            data: options.data,
14
            responseType: options.responseType || 'json',
15
            timeout: options.timeout || 15000,
16
            onload: (res) => {
17
                if (res.status >= 200 && res.status < 300) {
18
                    resolve(res.response);
19
                } else {
20
                    reject(new Error(`[跨域请求失败] HTTP ${res.status}: ${res.statusText}`));
21
                }
22
            },
23
            ontimeout: () => {
24
                reject(new Error(`[跨域请求超时] 超过 ${options.timeout || 15000}ms 未响应: ${options.url}`));
25
            },
26
            onerror: (err) => {
27
                reject(new Error(`[底层网络断开] ${err.error || 'Network Error'}`));
28
            }
29
        });
30
    });
31
}

1
// -----------------------------------------------------------------------------
2
// 跨页面响应式数据总线实战
3
// -----------------------------------------------------------------------------
4
// 在主控制台页面：监听子页面提交的抓取结果
5
const listenerId = GM_addValueChangeListener('__SPIDER_RESULT__', (name, oldValue, newValue, remote) => {
6
    if (!remote) return; // 忽略本页面触发的变更
7
    console.log(`[分布式监听] 捕获到子 Tab 回传的新数据 (来自页面 ${newValue.sourceUrl}):`, newValue.data);
8
    // 处理入库或追加至导出队列
9
});
10

11
// 在子采集页面：完成任务后广播写入
12
function reportSpiderDone(taskId, extractedData) {
13
    GM_setValue('__SPIDER_RESULT__', {
14
        taskId: taskId,
15
        sourceUrl: window.location.href,
16
        timestamp: Date.now(),
17
        data: extractedData
18
    });
19
}

1
// 注册菜单：手动触发一键表单填写
2
GM_registerMenuCommand('🚀 立即执行自动化填表', () => {
3
    executeAutoFillPipeline();
4
});
5

6
// 注册菜单：导出当前已抓取的本地数据包
7
GM_registerMenuCommand('💾 导出全部已采集数据 (JSON)', () => {
8
    exportDatasetAsJson();
9
});
10

11
// 注册菜单：清空当前脚本本地缓存
12
GM_registerMenuCommand('🧹 清空脚本缓存与运行状态', () => {
13
    if (confirm('确认清空当前脚本所有的本地进度与配置吗？')) {
14
        GM_setValue('__RUNNING_STATE__', null);
15
        alert('状态已重置！');
16
    }
17
});

1
// =============================================================================
2
// 工业级油猴悬浮面板注入器 (基于 Closed Shadow DOM 与坐标记忆)
3
// =============================================================================
4
class FloatingPanelManager {
5
    constructor(panelId = 'tm-advanced-panel') {
6
        this.panelId = panelId;
7
        this.storageKey = `__POS_${this.panelId}__`;
8
        this.hostEl = null;
9
        this.shadowRoot = null;
10
    }
11

12
    init() {
13
        if (document.getElementById(this.panelId)) return;
14

15
        // 1. 创建顶层宿主节点
16
        this.hostEl = document.createElement('div');
17
        this.hostEl.id = this.panelId;
18
        this.hostEl.style.position = 'fixed';
19
        this.hostEl.style.zIndex = '2147483647'; // 浏览器最高 z-index 极限
20

21
        // 读取持久化位置，默认停靠在右上角
22
        const savedPos = GM_getValue(this.storageKey, { top: 120, right: 30 });
23
        this.updatePosition(savedPos);
24

25
        // 2. 挂载封闭的 Shadow DOM (closed 模式彻底杜绝外部 JS 窥探)
26
        this.shadowRoot = this.hostEl.attachShadow({ mode: 'closed' });
27

28
        // 3. 构建内部隔离 HTML 与专属 CSS 样式
29
        this.render();
30

31
        // 4. 绑定拖拽逻辑
32
        this.bindDragEvents();
33

34
        // 挂载至文档流
35
        document.body.appendChild(this.hostEl);
36
    }
37

38
    updatePosition(pos) {
39
        if (typeof pos.right !== 'undefined') {
40
            this.hostEl.style.right = `${pos.right}px`;
41
            this.hostEl.style.left = 'auto';
42
        } else if (typeof pos.left !== 'undefined') {
43
            this.hostEl.style.left = `${pos.left}px`;
44
            this.hostEl.style.right = 'auto';
45
        }
46
        this.hostEl.style.top = `${Math.max(10, Math.min(window.innerHeight - 80, pos.top))}px`;
47
    }
48

49
    render() {
50
        const style = document.createElement('style');
51
        style.textContent = `
52
            :host { all: initial; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
53
            .panel-card {
54
                width: 280px;
55
                background: rgba(255, 255, 255, 0.96);
56
                backdrop-filter: blur(12px);
57
                border: 1px solid rgba(229, 231, 235, 0.8);
58
                border-radius: 12px;
59
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
60
                overflow: hidden;
61
                user-select: none;
62
            }
63
            .panel-header {
64
                padding: 12px 16px;
65
                background: linear-gradient(135deg, #3b82f6, #2563eb);
66
                color: #ffffff;
67
                font-size: 13px;
68
                font-weight: 600;
69
                cursor: grab;
70
                display: flex;
71
                justify-content: space-between;
72
                align-items: center;
73
            }
74
            .panel-header:active { cursor: grabbing; }
75
            .panel-body { padding: 14px 16px; font-size: 13px; color: #374151; }
76
            .action-btn {
77
                width: 100%;
78
                padding: 8px 12px;
79
                margin-top: 8px;
80
                background: #10b981;
81
                color: white;
82
                border: none;
83
                border-radius: 6px;
84
                font-size: 13px;
85
                font-weight: 500;
86
                cursor: pointer;
87
                transition: background 0.2s;
88
            }
89
            .action-btn:hover { background: #059669; }
90
            .status-badge {
91
                display: inline-block;
92
                padding: 2px 8px;
93
                border-radius: 9999px;
94
                background: #e0f2fe;
95
                color: #0369a1;
96
                font-size: 11px;
97
                margin-bottom: 8px;
98
            }
99
        `;
100

101
        const container = document.createElement('div');
102
        container.className = 'panel-card';
103
        container.innerHTML = `
104
            <div class="panel-header" id="drag-handle">
105
                <span>⚡ 油猴进阶控制台</span>
106
                <span style="font-size: 11px; opacity: 0.8;">可拖拽</span>
107
            </div>
108
            <div class="panel-body">
109
                <div class="status-badge" id="task-status">就绪 (Idle)</div>
110
                <div style="margin-bottom: 8px; font-size: 12px; color: #6b7280;">已捕获数据: <b id="count-label" style="color:#111827">0</b> 条</div>
111
                <button class="action-btn" id="btn-autofill">一键填报目标表单</button>
112
                <button class="action-btn" style="background:#6366f1;" id="btn-export">导出已提取数据</button>
113
            </div>
114
        `;
115

116
        this.shadowRoot.appendChild(style);
117
        this.shadowRoot.appendChild(container);
118
    }
119

120
    bindDragEvents() {
121
        const handle = this.shadowRoot.getElementById('drag-handle');
122
        let isDragging = false;
123
        let startX = 0, startY = 0;
124
        let initialLeft = 0, initialTop = 0;
125

126
        handle.addEventListener('mousedown', (e) => {
127
            isDragging = true;
128
            startX = e.clientX;
129
            startY = e.clientY;
130
            const rect = this.hostEl.getBoundingClientRect();
131
            initialLeft = rect.left;
132
            initialTop = rect.top;
133
            e.preventDefault();
134
        });
135

136
        window.addEventListener('mousemove', (e) => {
137
            if (!isDragging) return;
138
            const dx = e.clientX - startX;
139
            const dy = e.clientY - startY;
140
            const targetLeft = Math.max(10, Math.min(window.innerWidth - 300, initialLeft + dx));
141
            const targetTop = Math.max(10, Math.min(window.innerHeight - 150, initialTop + dy));
142

143
            this.hostEl.style.left = `${targetLeft}px`;
144
            this.hostEl.style.top = `${targetTop}px`;
145
            this.hostEl.style.right = 'auto';
146
        });
147

148
        window.addEventListener('mouseup', () => {
149
            if (isDragging) {
150
                isDragging = false;
151
                const rect = this.hostEl.getBoundingClientRect();
152
                GM_setValue(this.storageKey, { left: rect.left, top: rect.top });
153
            }
154
        });
155
    }
156

157
    // 提供给外部更新 UI 状态的 API
158
    updateStatus(text, count = null) {
159
        const badge = this.shadowRoot.getElementById('task-status');
160
        if (badge) badge.textContent = text;
161
        if (count !== null) {
162
            const countEl = this.shadowRoot.getElementById('count-label');
163
            if (countEl) countEl.textContent = count;
164
        }
165
    }
166
}

1
// =============================================================================
2
// 穿透 React 18 / Vue 3 受控组件的万能表单输入器
3
// =============================================================================
4
function setNativeInputValue(element, value) {
5
    if (!element) return false;
6

7
    // 1. 判断目标元素的标签类型，精准命中对应的原生原型
8
    const prototype = element instanceof HTMLTextAreaElement
9
        ? HTMLTextAreaElement.prototype
10
        : HTMLInputElement.prototype;
11

12
    // 2. 获取浏览器原生未被框架重写的 value 属性描述符 Setter
13
    const nativeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;
14

15
    if (nativeValueSetter) {
16
        // 利用原始 Setter 强行向 DOM 节点注入真实物理值
17
        nativeValueSetter.call(element, value);
18
    } else {
19
        // 降级策略
20
        element.value = value;
21
    }
22

23
    // 3. 抹除 React 内部的私有跟踪缓存 (_valueTracker)，迫使 React 承认状态改变
24
    if (element._valueTracker) {
25
        element._valueTracker.setValue('__FORCE_STATE_RESET__');
26
    }
27

28
    // 4. 按严格的时间顺序派发标准输入事件链，模拟真实人机交互
29
    element.dispatchEvent(new Event('focus', { bubbles: true }));
30
    element.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
31
    element.dispatchEvent(new Event('change', { bubbles: true }));
32
    element.dispatchEvent(new Event('blur', { bubbles: true }));
33

34
    return true;
35
}

1
// 模拟真实人类思考与输入间隔的延迟工具
2
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
3

4
async function selectOptionByText(selectSelector, targetText, timeout = 8000) {
5
    // 异步等待下拉框容器出现在 DOM 中
6
    const selectEl = await waitForElement(selectSelector, timeout);
7
    selectEl.click(); // 展开下拉面板
8
    await sleep(300);
9

10
    // 寻找匹配选项（兼容原生 select 与 AntD / Element UI 模拟的下拉列表）
11
    const options = document.querySelectorAll('.ant-select-item-option-content, .el-select-dropdown__item, option');
12
    let matchedOption = null;
13
    for (const opt of options) {
14
        if (opt.textContent.trim() === targetText) {
15
            matchedOption = opt;
16
            break;
17
        }
18
    }
19

20
    if (!matchedOption) {
21
        throw new Error(`[级联选择] 未能在下拉列表中找到文本为 "${targetText}" 的选项`);
22
    }
23

24
    matchedOption.click();
25
    await sleep(500); // 留出充足时间让框架发起二级子依赖的网络请求
26
    return true;
27
}

1
// =============================================================================
2
// 无感网络拦截引擎：在数据渲染到 DOM 前直接截获业务 JSON
3
// =============================================================================
4
(function initNetworkInterceptor() {
5
    if (typeof unsafeWindow === 'undefined') return;
6

7
    // 1. 劫持原生 Fetch API
8
    const originalFetch = unsafeWindow.fetch;
9
    unsafeWindow.fetch = async function(...args) {
10
        const response = await originalFetch.apply(this, args);
11
        try {
12
            const requestUrl = typeof args[0] === 'string' ? args[0] : args[0]?.url || '';
13

14
            // 匹配目标数据接口路由
15
            if (requestUrl.includes('/api/v1/order/list') || requestUrl.includes('/data/query')) {
16
                // 克隆响应流，防止消费原始 stream 导致页面自身业务崩溃
17
                const cloneRes = response.clone();
18
                cloneRes.json().then(data => {
19
                    console.log('[网络拦截器] 成功截获订单列表原始 JSON:', data);
20
                    handleInterceptedData(data);
21
                }).catch(() => {});
22
            }
23
        } catch (e) {
24
            console.error('[网络拦截器] 提取数据异常:', e);
25
        }
26
        return response;
27
    };
28

29
    // 2. 劫持原生 XMLHttpRequest
30
    const originalOpen = unsafeWindow.XMLHttpRequest.prototype.open;
31
    const originalSend = unsafeWindow.XMLHttpRequest.prototype.send;
32

33
    unsafeWindow.XMLHttpRequest.prototype.open = function(method, url, ...rest) {
34
        this._reqUrl = url;
35
        return originalOpen.apply(this, [method, url, ...rest]);
36
    };
37

38
    unsafeWindow.XMLHttpRequest.prototype.send = function(...args) {
39
        this.addEventListener('load', function() {
40
            try {
41
                if (this._reqUrl && this._reqUrl.includes('/api/v1/report/page')) {
42
                    const data = JSON.parse(this.responseText);
43
                    console.log('[网络拦截器] 成功截获 XHR 数据响应:', data);
44
                    handleInterceptedData(data);
45
                }
46
            } catch (e) {}
47
        });
48
        return originalSend.apply(this, args);
49
    };
50

51
    console.log('[油猴引擎] 底层网络拦截管道已就绪！');
52
})();

1
// =============================================================================
2
// 内存防爆型 CSV 流式导出器
3
// =============================================================================
4
function exportDatasetToCsv(dataset, fileName = 'exported_data.csv') {
5
    if (!dataset || dataset.length === 0) {
6
        alert('当前没有可导出的数据！');
7
        return;
8
    }
9

10
    // 提取所有列的 Key 作为表头
11
    const headers = Object.keys(dataset[0]);
12
    const chunks = [];
13

14
    // 1. 压入 UTF-8 BOM 头防 Excel 中文乱码
15
    chunks.push('');
16

17
    // 2. 压入表头行
18
    chunks.push(headers.map(h => `"${String(h).replace(/"/g, '""')}"`).join(',') + '
19
');
20

21
    // 3. 分批处理行数据，防止长字符串导致内存溢出
22
    const CHUNK_SIZE = 1000;
23
    for (let i = 0; i < dataset.length; i += CHUNK_SIZE) {
24
        const batch = dataset.slice(i, i + CHUNK_SIZE);
25
        const batchText = batch.map(row => {
26
            return headers.map(header => {
27
                let val = row[header];
28
                if (val === null || val === undefined) val = '';
29
                val = String(val).replace(/"/g, '""'); // 转义双引号
30
                return `"${val}"`;
31
            }).join(',');
32
        }).join('
33
') + '
34
';
35

36
        chunks.push(batchText);
37
    }
38

39
    // 4. 构建二进制 Blob
40
    const blob = new Blob(chunks, { type: 'text/csv;charset=utf-8;' });
41
    const downloadUrl = URL.createObjectURL(blob);
42

43
    // 5. 模拟点击下载
44
    const a = document.createElement('a');
45
    a.href = downloadUrl;
46
    a.download = fileName;
47
    document.body.appendChild(a);
48
    a.click();
49
    document.body.removeChild(a);
50

51
    // 6. 立即撤销 Object URL，释放系统底层物理内存
52
    setTimeout(() => {
53
        URL.revokeObjectURL(downloadUrl);
54
        console.log(`[导出完成] 成功导出 ${dataset.length} 条记录至 ${fileName}`);
55
    }, 1000);
56
}

1
GM_xmlhttpRequest({
2
    method: 'GET',
3
    url: 'https://example.com/large-archive.zip',
4
    responseType: 'blob',
5
    onprogress: (progress) => {
6
        if (progress.lengthComputable) {
7
            const percent = Math.round((progress.loaded / progress.total) * 100);
8
            console.log(`[下载进度] 已完成: ${percent}% (${(progress.loaded / 1024 / 1024).toFixed(2)} MB)`);
9
            // 同步更新 Shadow DOM 悬浮面板上的进度条宽度
10
            updateProgressBar(percent);
11
        }
12
    },
13
    onload: (res) => {
14
        console.log('[下载完成] 正在保存物理文件...');
15
        saveBlobLocally(res.response, 'large-archive.zip');
16
    }
17
});