Chrome扩展开发中如何使用第三方JS库？以Chart.js及Manifest v3为例

方案1：本地引入预编译的Chart.js文件（最直接稳妥） #

这是避开CSP限制且不影响Chrome API调用的最优解：

• 从Chart.js官方渠道下载编译好的UMD格式文件（比如chart.umd.min.js）
• 将文件放到你的扩展目录下，比如新建libs文件夹存放
• 根据使用场景引入：
  • 若在popup、options页面使用：直接在页面HTML中通过<script src="./libs/chart.umd.min.js"></script>引入，之后在你的业务脚本里直接调用Chart构造函数，同时正常使用chrome.storage、chrome.runtime等API
  • 若在内容脚本使用：需要在manifest.json的web_accessible_resources中配置该文件的访问权限，示例：

    "web_accessible_resources": [
      {
        "resources": ["libs/chart.umd.min.js"],
        "matches": ["<all_urls>"]
      }
    ]
    

    然后在内容脚本中通过动态创建script标签引入，之后即可正常使用Chart.js和Chrome API

方案2：使用NPM安装+打包工具构建（适合复杂项目） #

你之前认为NPM方式不支持是误解，Manifest V3完全支持这种方式：

• 在扩展项目根目录初始化NPM：npm init -y
• 安装Chart.js：npm install chart.js
• 使用Vite、Webpack等打包工具，将你的业务代码和Chart.js打包成单个或多个bundle文件
• 将打包后的文件放入扩展目录，在manifest.json中配置对应的脚本（比如popup的脚本、content_scripts）
• 打包后的代码运行在扩展的原生上下文里，完全可以正常调用所有Chrome Extension API，没有沙箱隔离的问题

避坑说明 #

• CDN方式：Manifest V3的默认CSP禁止内容脚本加载外部资源，虽然可以修改content_security_policy添加CDN域名，但会降低扩展的安全性，不推荐使用
• 沙箱页面：沙箱页面的上下文与扩展主环境隔离，无法直接访问Chrome API，确实不适合重度依赖API的场景，无需考虑

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