如何用Tampermonkey脚本在Y网站展示X网站实时数据表格？

以下是可直接复用的脚本实现，包含自动刷新逻辑，解决跨域问题：

// ==UserScript==
// @name         Y网站数据嵌入表格
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在Y网站展示来自X网站的C、B列数据表格，每5秒自动刷新
// @author       You
// @match        *://y-website-domain.com/*  // 替换为Y网站的实际域名
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';

    // 创建悬浮表格容器，可自定义位置样式
    const tableContainer = document.createElement('div');
    tableContainer.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 8px;
        z-index: 9999;
        font-family: sans-serif;
        font-size: 13px;
    `;
    document.body.appendChild(tableContainer);

    // 渲染表格到页面
    function renderTable(data) {
        let tableHTML = `
            <table border="1" cellpadding="4" cellspacing="0" style="border-collapse: collapse;">
                <thead>
                    <tr style="background: #f5f5f5;">
                        <th>Column C</th>
                        <th>Column B</th>
                    </tr>
                </thead>
                <tbody>
        `;

        // 遍历数据生成行，无数据时显示空行
        if (data.length === 0) {
            tableHTML += '<tr><td colspan="2" style="text-align:center;">暂无数据</td></tr>';
        } else {
            data.forEach(item => {
                tableHTML += `
                    <tr>
                        <td>${item.columnC ?? 'N/A'}</td>
                        <td>${item.columnB ?? 'N/A'}</td>
                    </tr>
                `;
            });
        }

        tableHTML += `
                </tbody>
            </table>
        `;

        tableContainer.innerHTML = tableHTML;
    }

    // 从X网站获取数据
    function fetchXData() {
        GM_xmlhttpRequest({
            method: 'GET',
            url: 'https://x-website-domain.com/target-data-source', // 替换为X网站的数据源地址
            onload: function(res) {
                try {
                    // --------------------------
                    // 这里需要根据X网站的返回结构修改
                    // --------------------------
                    // 示例1：如果X网站返回JSON数据
                    const rawData = JSON.parse(res.responseText);
                    const processedData = rawData.data.map(item => ({
                        columnC: item.c_column_name, // 替换为X网站中C项的实际字段名
                        columnB: item.b_column_name  // 替换为X网站中B项的实际字段名
                    }));

                    // 示例2：如果X网站返回HTML（需注释上面JSON解析部分，启用下面代码）
                    // const parser = new DOMParser();
                    // const doc = parser.parseFromString(res.responseText, 'text/html');
                    // const rows = doc.querySelectorAll('#target-table tr');
                    // const processedData = Array.from(rows).slice(1).map(row => ({
                    //     columnC: row.querySelector('.c-column-class').textContent.trim(),
                    //     columnB: row.querySelector('.b-column-class').textContent.trim()
                    // }));

                    renderTable(processedData);
                } catch (err) {
                    tableContainer.innerHTML = `<p style="color:red;">数据加载失败：${err.message}</p>`;
                    console.error('数据解析错误:', err);
                }
            },
            onerror: function(err) {
                tableContainer.innerHTML = `<p style="color:red;">请求失败：${err.message}</p>`;
                console.error('请求错误:', err);
            }
        });
    }

    // 初始加载+定时刷新
    fetchXData();
    setInterval(fetchXData, 5000); // 5秒刷新一次
})();

关键配置说明 #

1. 替换域名与数据源

   • 将@match中的y-website-domain.com改为Y网站的实际域名（支持通配符）
   • 将fetchXData中的url替换为X网站的实际数据接口或页面地址

2. 适配X网站数据结构

   • 如果X返回JSON：修改rawData.data.map中的字段映射，匹配X网站的实际字段名
   • 如果X返回HTML：启用DOMParser部分的代码，修改选择器（如#target-table tr、.c-column-class）定位到目标数据

3. 样式自定义

   • 修改tableContainer.style.cssText调整表格的位置、背景、边框等样式
   • 调整表格内的样式（如border-collapse: collapse合并边框）

常见问题排查 #

• 跨域失败：确保@grant GM_xmlhttpRequest已正确声明，Tampermonkey会自动处理跨域权限
• 数据为空：打开浏览器控制台（F12）查看rawData的输出，确认数据提取逻辑是否正确
• 样式冲突：给表格容器添加更具体的样式，或者使用!important强制覆盖Y网站的原有样式

内容的提问来源于stack exchange，提问作者Drake