ChartJS not working in Chrome extension

I have a file named index.html in my Chrome extension that uses ChartJS to draw a chart. This is the markup :



    
    
    Welcome to dashboard
    
    


    
    

And this is the script:

var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

I am not getting any error in console. But still, the page is rendered blank. What could be the issue with this code?

Chrome Extension Popup randomly shrinks to unusable size on browser action icon click

I am using react js & chart.js to render some charts in popup.html

It usually looks like this:

Chrome Extension Chart.js

But, sometimes shrinks down to unusable size like so:

Unusable Chrome extension popup

This happens randomly and I get no error messages in the console when it does.

Simplified Code:

// App.js
class App extends Component {
  state = {
    token: null
  }
  componentDidMount() {
    chrome.storage.local.get('token', function(result) {
      result && result.token && this.setState({ token: result.token });
    });
  }
  render() {
    return (
      
{ this.state.token ? : }
) } } // LineChart.js class LineChart extends Component { componentDidMount() { const canvas = document.getElementById('usageChart'); if (canvas) { this.getChartData() .then(data => { this.chart = new Chart(canvas, { type: 'line', data, options: chartConfig.options }); }); } } render() { return ( ); } }

After checking the popup console, all the components were rendered in both cases, just that the popup window shrunk without any errors.

I tried rendering without chart.js chart and this issue occurred a lesser number of times but was still there.

Obviously, the best answer would be one to describe the exact underlying cause. But, I can’t even understand how to debug this and find the root cause of this issue? Any help in that direction would be great!