我目前正在 Manifest V3 中创建 Google Chrome 扩展，并尝试导入 Chart.js。我在控制台中收到以下错误：
未捕获的类型错误：无法解析模块说明符“@kurkle/color”。相对引用必须以“/”、“./”或“../”开头。
以下是我的文件：
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"
}
我在网上寻找解决方案，但并没有真正找到任何东西。所有解决方案似乎都建议我使用 HTML 链接而不是 import 语句，但 Manifest V3 不允许包含任何外部链接。任何形式的帮助将不胜感激！
我从来没有这样做过。
在我看来，它是库、v3 清单以及它是一个扩展这一事实的组合，这使得在不更改库代码的情况下无法修复自己。
我自己创建了一些非常简单的自定义图表，足以解决手头的问题。丑陋但有效。