如何在Chrome Extension Manifest V3中使用Chart.js

1. 获取正确的Chart.js文件 #

• 直接从Chart.js官方发布渠道下载浏览器适配的生产版文件，推荐选择chart.umd.min.js——这是UMD格式，完全兼容浏览器环境，不需要额外编译。
• 也可以通过npm安装Chart.js，之后从node_modules/chart.js/dist目录中提取chart.umd.min.js文件。

2. 整理扩展文件结构 #

将下载好的文件放到扩展目录内的专用文件夹（比如libs），示例结构如下：

your-extension/
├── manifest.json
├── libs/
│   └── chart.umd.min.js
├── popup.html
└── popup.js

3. 配置Manifest V3 #

在manifest.json中确保页面资源正常声明，无需额外特殊权限，示例关键配置：

{
  "manifest_version": 3,
  "name": "Chart Demo Extension",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

4. 在页面中引入并使用 #

在HTML中引入本地文件 #

以popup.html为例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <canvas id="myChart"></canvas>
  <!-- 先引入Chart.js本地文件 -->
  <script src="./libs/chart.umd.min.js"></script>
  <!-- 再引入你的业务脚本 -->
  <script src="./popup.js"></script>
</body>
</html>

在脚本中初始化图表 #

popup.js示例代码：

document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('myChart').getContext('2d');
  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: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
});

5. 额外注意事项 #

• 如果在content script中使用Chart.js，需要在manifest.json的content_scripts字段的js数组中，按顺序加入chart.umd.min.js和你的业务脚本。
• 优先使用UMD版本，避免直接用ES模块版本（chart.esm.js），除非你明确配置了type="module"的script标签。

内容的提问来源于stack exchange，提问作者Kartik Thakur