battlehorse/background.html

## background.html
<!DOCTYPE html>
<html>
<head>
  // Autoload the 'corechart' visualization library, as described in:
  // http://code.google.com/apis/chart/interactive/docs/library_loading_enhancements.html#enhancedloading
  //
  // the 'autoload' parameter is URI encoded.
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D"></script>
</head>
<body>
</body>
</html>

## manifest.json
{
  "name": "Chart Extension",
  "version": "1.0",
  "description": "Chart Extension.",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background_page": "background.html"
}

## popup.html
<!DOCTYPE html>
<html>
<body>
  <div id="chart_div">
  </div>
  <script>
    var background = chrome.extension.getBackgroundPage();
    if (background.google && background.google.visualization) {
      var data = new background.google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Sales');
      data.addColumn('number', 'Expenses');
      data.addRows(4);
      data.setValue(0, 0, '2004');
      data.setValue(0, 1, 1000);
      data.setValue(0, 2, 400);
      data.setValue(1, 0, '2005');
      data.setValue(1, 1, 1170);
      data.setValue(1, 2, 460);
      data.setValue(2, 0, '2006');
      data.setValue(2, 1, 860);
      data.setValue(2, 2, 580);
      data.setValue(3, 0, '2007');
      data.setValue(3, 1, 1030);
      data.setValue(3, 2, 540);

      var chart = new background.google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240, title: 'Company Performance'});
    } else {
      // Google Visualization API have not been loaded yet by the background page.
      // Deal with it.
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	// Autoload the 'corechart' visualization library, as described in:
	// http://code.google.com/apis/chart/interactive/docs/library_loading_enhancements.html#enhancedloading
	//
	// the 'autoload' parameter is URI encoded.
	<script type="text/javascript" src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22visualization%22%2C%22version%22%3A%221%22%2C%22packages%22%3A%5B%22corechart%22%5D%7D%5D%7D"></script>
	</head>
	<body>
	</body>
	</html>
	{
	"name": "Chart Extension",
	"version": "1.0",
	"description": "Chart Extension.",
	"browser_action": {
	"default_popup": "popup.html"
	},
	"background_page": "background.html"
	}