2012-05-29 75 views
1
<!-- 
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.htmlChrome擴展程序無法正常工作

然後我想使它成爲一個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拒絕執行內聯腳本。

+0

右鍵單擊擴展的工具欄圖標,從上下文菜單中選擇* Inspect Popup *,從控制面板複製錯誤消息並將其粘貼到此處。如果沒有錯誤消息,請嘗試通過在控制檯中執行來重新加載彈出窗口:'window.location.reload();'。 –

+0

@kdzwinel謝謝。添加錯誤消息。 –

回答

1

你需要爲了使用資源,從google.com指定在manifest.json您的擴展權限:

​​

或者,如果這是不行的,儘量讓你的擴展訪問全部 URL:

"permissions": [ 
    "<all_urls>" 
], 

瞭解有關權限的更多信息here

+0

這是行不通的。彈出完全相同的錯誤消息。 –

+3

請閱讀此:http://code.google.com/chrome/extensions/contentSecurityPolicy.html#H2-3。它看起來像這個庫試圖使用一些內聯的JavaScript,這是不允許的。沒有辦法放寬這個限制。 –

+0

謝謝。這非常有幫助。 –

相關問題