1

For my Chrome extension, I want to give users an option to download a PDF that displays and formats their data for them. The idea is that a user press a button on the extension popup, the extension generates the pdf, and the browser downloads the pdf.

To little avail, so far I've tried using jsPDF (https://github.com/parallax/jsPDF). I followed their procedure to load from CDN in a script tag — <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> — in my popup HTML file (popup.html), and wrote the associated import statement import {jsPDF} from "jspdf"; in my popup script (popup.js).

When I run the extension, I get two errors.

  1. Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

A comment in different post (Chrome Extension "Script-src" error (self-learning)) suggested to address this by adding "content_security_policy":"script-src 'self' https://example.com; object-src 'self'" as a new key in the manifest file. I tried this — and was sure to change the url to the one mentioned earlier, in the script tag — yet the error persisted.

  1. Uncaught SyntaxError: Cannot use import statement outside a module

One suggestion to address this was made in another post (Chrome Extension "Script-src" error (self-learning)); upon implementing this change, the error I received was: Uncaught TypeError: Cannot destructure property 'jsPDF' of 'window.jspdf' as it is undefined.

I have looked extensively online for references explaining how to use libraries like jsPDF with Chrome extensions. Most explain in detail how to use such libraries with Node. But few include details for browser usage and, in particular, Chrome extension usage.

Philipp Crosman
  • 65
  • 5
  • 1
    Download jspdf.umd.min.js manually into your extension directory, then use it just like any other script. You won't need `import`: instead just access `jspdf` in your code directly. – wOxxOm Jul 13 '22 at 09:46
  • When I remove the import and then instantiate the jsPDF object, jsPDF is said to be undefined. – Philipp Crosman Jul 13 '22 at 20:25
  • jspdf isn't defined either; jsPDF is what the demo code on the jspdf GitHub page. – Philipp Crosman Jul 14 '22 at 19:30
  • 1
    I was having the exact same issue as you. I've just managed to get it working by downloading a (much) older version of jsPDF - v 1.3.2 and then using jspdf.min.js from that version. I don't need to use the import statement and can just call 'var doc = new jsPDF();' and it all works. I have no idea what implications using the older version will have (missing features?) which is why I'm not putting this as an answer at this stage, but it got jsPDF working for me. – Jet86 Jul 15 '22 at 02:20
  • That works for me! I'm utterly baffled at how and why it can run on the single min file while the new version can't. Have you found any documentation for the 1.3.2 version? – Philipp Crosman Jul 15 '22 at 05:41

1 Answers1

0

add this to the top of your javascript file:

const { jsPDF } = window.jspdf;
Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
Mohamed Benchikh
  • 1
  • 1