如何专门针对 Chrome 扩展使用 jsPDF 库？

Question

对于我的 Chrome 扩展程序，我希望为用户提供下载 PDF 的选项，以显示并格式化他们的数据。这个想法是，用户按下扩展弹出窗口上的按钮，扩展生成 pdf，然后浏览器下载 pdf。

收效甚微，到目前为止我已经尝试使用 jsPDF (https://github.com/parallax/jsPDF)。我按照他们的程序从 CDN 加载到我的弹出 HTML 文件 (popup.html) 中的脚本标记 —

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

，并在我的弹出脚本 (popup.js) 中编写了相关的导入语句

import {jsPDF} from "jspdf";

。

当我运行扩展时，出现两个错误。

1. 拒绝加载脚本“https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js”，因为它违反了以下内容安全策略指令：“script-src '自己'”。请注意，“script-src-elem”未显式设置，因此“script-src”用作后备。

不同帖子中的评论（Chrome 扩展“Script-src”错误（自学））建议通过在清单文件中添加

"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"

作为新键来解决此问题。我尝试了这一点 - 并确保将 url 更改为前面提到的脚本标记中的 URL - 但错误仍然存在。

2. 未捕获的语法错误：无法在模块外部使用 import 语句

在另一篇文章中提出了解决此问题的建议（Chrome 扩展“Script-src”错误（自学））；实施此更改后，我收到的错误是：Uncaught TypeError：无法解构“window.jspdf”的属性“jsPDF”，因为它未定义。

我在网上广泛查找了解释如何将 jsPDF 等库与 Chrome 扩展一起使用的参考资料。大多数详细解释了如何在 Node.js 中使用此类库。但很少包含浏览器使用的详细信息，特别是 Chrome 扩展程序的使用情况。

Answer 1

将其添加到 JavaScript 文件的顶部：

const { jsPDF } = window.jspdf;

Answer 2

如果您在浏览器扩展中遇到 jsPDF 问题，这里有一个使用最新版本 jsPDF 的简化解决方案：

1. 将 jsPDF 脚本包含在扩展程序的清单中。
2. 将 jsPDF 脚本注入到您的扩展程序运行的网页中。
3. 在继续之前确保脚本已完全加载。
4. 在脚本中初始化 jsPDF：

   const doc = new jspdf.jsPDF();

此方法应该可以解决浏览器扩展中典型的 jsPDF 集成问题。 这应该从 2024 年 1 月 8 日起生效