Manifest V3 Chrome扩展导入Chart.js遇模块解析错误求助

问题原因 #

Chrome扩展Manifest V3的ES模块环境严格遵循浏览器ES模块规范，不支持裸模块标识符（如@kurkle/color）的解析。你导入的chart.js/auto/auto.js内部使用了这类裸导入语句，导致浏览器无法找到对应的模块文件，从而抛出Failed to resolve module specifier错误。

解决方案 #

方案1：使用打包工具（推荐，适配现代开发流程） #

通过打包工具（如Vite、Webpack）将Chart.js及其所有依赖打包为单个独立的ES模块文件，消除裸导入问题：

1. 安装依赖

npm install chart.js vite --save-dev

2. 创建Vite配置文件vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist',
    lib: {
      entry: 'src/donut_chart.js',
      formats: ['es'],
      fileName: 'donut_chart'
    }
  }
});

3. 调整donut_chart.js的导入语句

// 直接导入npm包，打包工具会处理依赖
import Chart from 'chart.js/auto';

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]
            }]
        }
    });
});

4. 执行打包命令

npx vite build

5. 更新index.html的脚本引用

<script type="module" src="dist/donut_chart.js"></script>

方案2：使用Chart.js的UMD版本（无需打包工具） #

Chart.js提供UMD格式的文件，可直接通过全局变量使用，避开ES模块导入限制：

1. 下载Chart.js的UMD包（如chart.umd.js），保存到扩展目录的lib文件夹下。

2. 修改index.html，引入本地UMD文件：

<!-- 先引入Chart.js的UMD文件 -->
<script src="lib/chart.umd.js"></script>
<!-- 再引入你的业务脚本 -->
<script src="src/donut_chart.js"></script>

3. 调整donut_chart.js，移除import语句，直接使用全局Chart变量：

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]
            }]
        }
    });
});

方案3：手动修改依赖路径（不推荐） #

若你坚持使用ES模块导入，需下载@kurkle/color等所有依赖到本地，然后手动修改chart.js/auto/auto.js及其他依赖文件中的裸导入为相对路径。此方法繁琐且易出错，仅适合临时测试场景。

关键注意事项 #

• Manifest V3禁止在popup/content script中引入外部CDN资源，因此所有依赖文件必须放在扩展本地目录中。
• 打包后的文件需确保被包含在扩展包内，MV3默认会包含所有目录文件，无需额外配置web_accessible_resources（仅当需要给外部页面暴露资源时才需配置）。

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