I’m currently working on creating a Google Chrome extension in Manifest V3 and am attempting to import Chart.js. I am getting the following error in the console:
Uncaught TypeError: Failed to resolve module specifier “@kurkle/color”. Relative references must start with either “/”, “./”, or “../”.
The following are my files:
index.html
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<h4>GOOGLE CALENDAR</h4>
<h5>Time Tracker</h5>
<hr></hr>
<div style="width: 800px;"><canvas id="chart"></canvas></div>
<script type="module" src="src/donut_chart.js"></script>
</body>
</html>
donut_chart.js
import Chart from "../Chart.js/node_modules/chart.js/auto/auto.js";
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';
});
manifest.json
{
"manifest_version": 3,
"name": "Google Calendar Time Tracker",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "index.html",
"default_icon": "hello_extensions.png"
},
"host_permissions": [
"https://*/*",
"http://*/*"
]
}
package.json
{
"type": "module"
}
I’ve looked online for solutions to this, and haven’t really found anything much. All the solutions seem to suggest I use an HTML link instead of an import statement, but Manifest V3 doesn’t allow for any outside links to be included. Any sort of help would be much appreciated!