Google.Load ['table']在Chrome内容脚本中不执行任何操作

Question

I am creating a Chrome Extension that utilises a content-script to insert a Google Visualisation Table into a page once it has finished loading. The problem though is that the table is never displayed - it is also not in the html as can be seen from the images below.

Manifest.json

{
    "manifest_version": 2,

    "name": "blah",
    "version": "1.0",
    "permissions": [
        "tabs", "http://*/*"
    ],

    "web_accessible_resources": [
        "jquery-1.10.2.min.js",
        "jquery-1.10.2.min.map"
    ],

    "content_scripts": [
    {
      "matches": ["http://*.ebay.co.uk/*"],
      "js": ["jquery-1.10.2.min.js", "jsapi.js", "myScript.js"],
      "run_at": "document_end"
    }]
}

MyScript.js

$('#cbrt').after('<div id=\'google_table_div\'></div>');

google.load('visualization', '1', { packages:['table'], callback : function() { drawTable(); } });

function drawTable() 
{
    alert('draw');
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
        ['Mike',  {v: 10000, f: '$10,000'}, true],
        ['Jim',   {v:8000,   f: '$8,000'},  false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob',   {v: 7000,  f: '$7,000'},  true]
    ]);

    var table = new google.visualization.Table(document.getElementById('google_table_div'));
    table.draw(data, {showRowNumber: true}); 
}

The alert in the callback never happens. Here is the HTML at the end:

Answer 1

You need to load the 'table' package as well. Like so:

packages:['corechart', 'table']