Google Charts in Tampermonkey Not Working

Question

Thanks to this community for all the great help. I have been successful adding new JS functionality to some webpages with Tampermonkey. Now I am trying to show a Google Chart injected on a webpage. Chrome browser. I have been trying on and off for several months, and no joy. I stripped everything down to the simplest TM script to show a pie chart, URL matching on Google home page. The DIV is visible but no chart is rendered. No related errors in JS console.

The chart renders fine if NOT using Tampermonkey.

https://jsfiddle.net/_pirateX/ue88hus0/

I have tried window.onload in various positions, and moved the Google chart loader in various places. I have tried to set the load callback just using the function name drawChart, but no change.

Can anyone please assist and tell me why this is not working. I would be eternally grateful.

// @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
// ==/UserScript==
/* global google */

'use strict';

google.charts.load("current", {packages:["corechart"]});

window.onload = function() {

   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);

    //put here code
    google.charts.setOnLoadCallback(function() { 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);
    }
}

Answer 1

Apparently there is some incompatibility in the way TM loads/uses Google loader.js. In Github repository, I got a reply from the developer of TM as follows:

The loader injects a script into the page, but the@require'd script "lives" inside the sandbox. Please use @unwrap to make it work.

@unwrap will be included in next release. In the meantime, testing revealed that loading Google loader.js via JS is also effective:

// ==UserScript==
// @name         Histogram
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Show histogram.
// @author       Me.
// @match        https://match.com*
// @icon         https://www.google.com/s2/favicons?domain=mydomain
// @require      file://D:\mycode.js
// ==/UserScript==
/* global google, injectChartDiv, drawChart */

    'use strict';

// Set up onload callback.
window.onload = drawChart;

// Load the Google charts loader.js
var my_script = document.createElement('script');
my_script.setAttribute('src','https://www.gstatic.com/charts/loader.js');
document.head.appendChild(my_script);

I will update this answer as I learn more about @unwrap. For now, my chart is rendering yay! Thanks everyone.

Answer 2

google's load statement will wait for the page to load by default,
so you can use the load statement, in place of window.onload

try placing the code inside the promise the load statement returns...

google.charts.load("current", {
  packages:["corechart"]
}).then(function () {
   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);

   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);
});