在Chrome扩展的弹出窗口中显示一些chart.js

我想在我的Chrome扩展的弹出窗口中显示来自chart.js的一些动态图表。在Chrome扩展的弹出窗口中显示一些chart.js

这是我最小的HTML文件：

<html> 
    <head> 
    </head> 

    <body> 
     <div class="container"> 
      <div> 
       <canvas id="chart"></canvas> 
      </div> 
     </div> 
     <p id='test'></p> 
     <script type='text/javascript' src='chart.js'> 
     <script type='text/javascript' src='popup.js'> 
     </script> 
    </body> 
</html>

而且我很小的脚本，添加数据到图表：

document.addEventListener('DOMContentLoaded', function() 
{ 
    var ctx = document.getElementById("chart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'doughnut', 
     data: { 
      labels: [ 'a', 'b', 'c', 'd' ], 
       datasets: [{ 
       backgroundColor: [ 
        "#59be5b", 
        "#d56328", 
        "#ff1b2d", 
        "#0078d7" 
       ], 
       data: [ 1, 2, 3, 4 ] 
      }] 
     } 
    }); 

    document.getElementById('test').textContent = 'SUCCEED'; 
});

现在我的弹出窗口的空白，也没有图表和测试元素没有内容。而且，没有控制台输出（没有错误）。

我该如何解决这个问题？

来源

2017-05-03 Nucktrooper

我觉得你有一些了Syntex错误，请尝试以下代码：

popup.html

<html> 
<head>  
    <script type='text/javascript' src='chart.js'></script> 
    <script type='text/javascript' src='popup.js'></script> 
</head> 
<body> 
    <div class="container"> 
     <div> 
      <canvas id="chart"></canvas> 
     </div> 
    </div> 
    <p id='test'></p> 
</body>

清单：

{ 
    "manifest_version": 2, 
    "minimum_chrome_version": "23", 
    "name": "test!", 
    "description": "test", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html", 
    "default_title": "Click here!" 
    }, 
"permissions": [], 
"background": { } 
}

popup.js是一样的...

我测试它，它显示在我弹出的图表

祝你好运。

来源

2017-05-03 06:54:30 OriEng

哦对。我忘了脚本的结束标记。这有点令人困惑，因为控制台中没有错误。我不知道HMTL错误没有在其中显示。谢谢。 – Nucktrooper

在Chrome扩展的弹出窗口中显示一些chart.js

回答

相关问题