inject a bar chart into a webpage via content script - google-chrome-extension

Question

I am going to inject a bar chart into a webpage according to the data presented on the page.
I created a Chrome extension for this purpose, which used chartjs to draw the bar chart, but didn't work. The following is a sample, so how to fix ?
One can download my extension here.
manifest.json
{
"name": "JsonAnalysis2",
"description": "Json Analysis",
"version": "1.0",
"permissions": [
"https://*/*",
"nativeMessaging",
"tabs"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"all_frames": true,
"matches": ["https://*/*"],
"js": ["chart.js","contentScript.js"]
}
],
"page_action": {
"default_title": "",
"default_icon": "icon.png"
},
"manifest_version": 2
}
contentScript.js
// var jq = document.createElement('script');
// jq.src = "https://cdn.jsdelivr.net/npm/chart.js#2.8.0";
// document.querySelector('head').appendChild(jq);
analysisResult=`
<canvas id="myChart"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '购买记录',
data: [12, 19, 3, 5, 2, 3],
// backgroundColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
`
document.body.insertAdjacentHTML('afterBegin',analysisResult)

Answer 1

After changed manifest.json to the following , it worked ! One could download the working sample here.
analysisResult=`
<canvas id="myChart"></canvas>
`
document.body.insertAdjacentHTML('afterBegin',analysisResult)
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '购买记录',
data: [12, 19, 3, 5, 2, 3],
// backgroundColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor:'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});