浏览器扩展popup.js无法用require/import导入html-to-pdfmake等库求助

核心原因 #

浏览器扩展的Popup运行在浏览器原生环境，不支持Node.js的require语法；同时ES模块的import需要明确的相对/绝对路径，无法直接引用node_modules中的包（扩展不会自动打包node_modules内容）。

有效解决方案 #

方案1：通过CDN直接引入（最快捷）

在你的popup.html中，按顺序引入CDN脚本，无需在popup.js中做导入操作：

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- 引入pdfmake核心库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
  <!-- 引入字体文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.min.js"></script>
  <!-- 引入html-to-pdfmake -->
  <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake@2.4.1/dist/html-to-pdfmake.bundle.min.js"></script>
  <!-- 引入你的popup脚本 -->
  <script src="popup.js"></script>
</head>
<body>
  <!-- 你的Popup内容 -->
</body>
</html>

然后在popup.js中直接使用全局变量：

// popup.js
// 直接使用全局的pdfMake和htmlToPdfmake
const targetDivHtml = document.getElementById('your-target-div').innerHTML;
const pdfContent = htmlToPdfmake(targetDivHtml);
pdfMake.createPdf({ content: pdfContent }).download('result.pdf');

方案2：复制库文件到扩展目录（离线可用）

如果不想依赖CDN，将node_modules中的对应文件复制到扩展的本地目录（比如新建lib文件夹）：

1. 复制node_modules/pdfmake/build/pdfmake.min.js → lib/pdfmake.min.js
2. 复制node_modules/pdfmake/build/vfs_fonts.min.js → lib/vfs_fonts.min.js
3. 复制node_modules/html-to-pdfmake/dist/html-to-pdfmake.bundle.min.js → lib/html-to-pdfmake.min.js

然后在popup.html中引入本地脚本：

<!-- popup.html -->
<script src="./lib/pdfmake.min.js"></script>
<script src="./lib/vfs_fonts.min.js"></script>
<script src="./lib/html-to-pdfmake.min.js"></script>
<script src="popup.js"></script>

popup.js的使用方式和方案1完全一致，直接调用全局变量即可。

方案3：配置ES模块环境（适合模块化开发）

如果坚持使用import语法，需要两步配置：

1. 在popup.html的脚本标签中声明type="module"：

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

2. 在popup.js中使用相对路径导入本地复制的库文件：

// popup.js
import pdfMake from './lib/pdfmake.min.js';
// vfs_fonts是自执行脚本，直接导入执行即可，无需赋值
import './lib/vfs_fonts.min.js';
import htmlToPdfmake from './lib/html-to-pdfmake.min.js';

// 后续使用逻辑
const targetHtml = document.getElementById('target-div').innerHTML;
const pdfContent = htmlToPdfmake(targetHtml);
pdfMake.createPdf({ content: pdfContent }).open();

注意事项 #

• 不要直接引用node_modules路径：浏览器扩展的资源隔离机制会阻止访问未打包的node_modules目录，必须将需要的库文件复制到扩展可见的目录中。
• Manifest v3兼容：上述方案均支持Chrome/Firefox的Manifest v3版本，无需额外配置权限（除非你需要访问页面DOM，需添加activeTab或<all_urls>权限）。

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