Tampermonkey中Google Charts无法正常渲染问题求助

我之前也踩过类似的坑，核心问题大概率是脚本执行时机不对，或是Google Charts的加载流程和Tampermonkey的沙箱环境产生了冲突。下面是针对你的问题的具体修复方案：

修复后的完整脚本 #

// @name Chart Example1
// @namespace http://tampermonkey.net/
// @version 1.0.0
// @description try to take over the world!
// @author You
// @require https://www.gstatic.com/charts/loader.js
// @match https://www.google.com
// @run-at document-end  // 关键配置：确保DOM完全加载后再执行脚本
// ==/UserScript==
/* global google */
'use strict';

function initChart() {
    // 创建图表容器并添加到页面
    var myWrapper = document.createElement('div');
    myWrapper.style.position = 'fixed';
    myWrapper.id = "myChart";
    myWrapper.style.width = '600px';
    myWrapper.style.height = '300px';
    myWrapper.style.right = '1em';
    myWrapper.style.top= '10em';
    myWrapper.style.background = 'rgba(255, 255, 255, 1)';
    myWrapper.style.border = '2px solid grey';
    document.body.append(myWrapper);

    // 加载Google Charts包并绑定绘制回调
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
}

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Group');
    data.addColumn('number', 'Gender');
    data.addRows([
        ['Males', 10],
        ['Females', 5]
    ]);
    var options = {'title':'Gender distribution', 'width':300, 'height':300};
    var chart = new google.visualization.PieChart(document.getElementById('myChart'));
    chart.draw(data, options);
}

// 启动图表初始化流程
initChart();

关键修改点说明 #

1. 添加@run-at document-end：这会强制脚本在DOM完全构建完成后才执行，避免你手动使用window.onload时，被Google首页本身的window.onload回调覆盖或冲突。
2. 重构加载逻辑：把google.charts.load放在容器创建之后，确保回调触发时#myChart元素已经存在于DOM中；同时直接绑定drawChart函数，不需要额外的匿名函数包裹。
3. 移除window.onload依赖：Tampermonkey的@run-at参数已经能精准控制执行时机，再嵌套window.onload反而会导致执行延迟或回调丢失。

原脚本失效的核心原因 #

Google首页的页面逻辑非常复杂，它可能已经占用了window.onload回调资源，或是你的脚本执行时DOM还处于未完全就绪的状态——虽然你能看到div元素，但Google Charts的回调触发时，容器可能还未被页面渲染引擎识别。另外，Tampermonkey的沙箱环境下，直接在window.onload内加载第三方库也容易和页面原生JS环境产生隐性冲突。

如果上面的脚本还是有问题，可以尝试把@run-at改成document-idle，确保页面所有资源（包括图片、样式）都加载完成后再执行图表初始化。

内容的提问来源于stack exchange，提问作者NCC-1701