<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
上面的代碼在html文件中爲我們生成了一個餅圖。當我在瀏覽器中打開它時,它可以工作。讓我們打電話popup.html。Chrome擴展程序無法正常工作
然後我想使它成爲一個Chrome擴展具有以下清單文件:
{
"name": "History Visualizer",
"version": "1.0",
"manifest_version": 2,
"description": "Helps us analyze history stats in a visual way",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
但是,當我打的圖標按鈕,餅圖只是將不會加載。任何人都幫助我?
編輯:檢查彈出窗口後的錯誤消息如下。
由於 Content-Security-Policy拒絕從「http://www.google.com/jsapi」加載腳本。由於 Content-Security-Policy拒絕執行內聯腳本。
右鍵單擊擴展的工具欄圖標,從上下文菜單中選擇* Inspect Popup *,從控制面板複製錯誤消息並將其粘貼到此處。如果沒有錯誤消息,請嘗試通過在控制檯中執行來重新加載彈出窗口:'window.location.reload();'。 –
@kdzwinel謝謝。添加錯誤消息。 –