Chrome扩展Manifest V3中Popup.js无法导入第三方JS模块

针对你遇到的在popup.js中导入第三方库（以uuid为例）的报错问题，以下是几种可行的解决方案，均无需借助内容脚本或后台脚本：

方案1：将依赖打包进Popup.js（推荐用于复杂内部库） #

浏览器无法直接解析裸模块名（如"uuid"），且node_modules目录默认不会被包含在扩展包中，最稳妥的方式是用打包工具把依赖和popup.js合并：

1. 安装打包工具（以Rollup为例）：
   • 执行安装命令：npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
   • 创建rollup.config.js配置文件：

     import resolve from '@rollup/plugin-node-resolve';
     import commonjs from '@rollup/plugin-commonjs';
     
     export default {
       input: 'src/popup.js',
       output: {
         file: 'dist/popup.bundle.js',
         format: 'iife' // 适配浏览器环境的自执行函数格式
       },
       plugins: [resolve(), commonjs()]
     };
     

2. 执行打包命令：npx rollup -c，生成打包后的popup.bundle.js
3. 修改popup.html，引用打包后的文件：

   <script src="dist/popup.bundle.js"></script>
   

4. 确保manifest.json中包含dist目录作为扩展资源（根目录下的文件默认会被包含）

方案2：手动复制库文件到扩展目录（适合简单库） #

如果不想用打包工具，可以直接把库的编译文件复制到扩展内部：

1. 找到uuid库的编译后文件，一般在node_modules/uuid/dist下的uuid.js
2. 把该文件复制到你的扩展目录，比如js/libs/uuid.js
3. 在popup.js中用相对路径导入：

   import { v4 as uuidv4 } from './js/libs/uuid.js';
   

4. 确保popup.html中的script标签添加type="module"属性：

   <script type="module" src="popup.js"></script>
   

方案3：通过CDN导入（注意CSP限制） #

如果允许依赖外部CDN，可以直接在popup.html中引入：

1. 在popup.html中添加CDN脚本：

   <script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
   

2. 修改manifest.json的content_security_policy，允许该CDN的资源加载：

   "content_security_policy": {
     "extension_pages": "script-src 'self' https://cdn.jsdelivr.net; object-src 'self'"
   }
   

3. 在popup.js中直接使用全局变量uuidv4即可，无需import

为什么之前的方法报错？ #

• 用import { v4 as uuidv4 } from "uuid"报错：浏览器不支持解析裸模块名（不带路径的模块），必须用相对/绝对路径或通过打包工具处理
• 用../node_modules/uuid报错：node_modules目录默认不会被打包进扩展安装包，扩展运行时无法找到该路径的文件

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