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.htmlと呼びましょう。

次に、次のマニフェスト ファイルを使用して 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 により、インライン スクリプトの実行が拒否されました。

</p>

4

1 に答える 1

1

manifest.jsonからリソースを使用するには、拡張機能のアクセス許可を指定する必要がありますgoogle.com。

"permissions": [
  "http://*.google.com/"
],

または、これが機能しない場合は、拡張機能がすべてのURLにアクセスできるようにしてみてください。

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

パーミッションの詳細については、こちらをご覧ください。

于 2012-05-29T12:57:57.620 に答える