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.

Improve this question
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. Commented Jul 13, 2022 at 9:46
  • When I remove the import and then instantiate the jsPDF object, jsPDF is said to be undefined. Commented Jul 13, 2022 at 20:25
  • jspdf isn't defined either; jsPDF is what the demo code on the jspdf GitHub page. Commented Jul 14, 2022 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. Commented Jul 15, 2022 at 2: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? Commented Jul 15, 2022 at 5:41

2 Answers 2

Reset to default
0

add this to the top of your javascript file:

const { jsPDF } = window.jspdf;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-1

If you're experiencing issues with jsPDF in a browser extension, here's a streamlined solution using the latest version of jsPDF:

  1. Include the jsPDF script in your extension's manifest.
  2. Inject the jsPDF script into the webpage where your extension operates.
  3. Ensure the script is fully loaded before proceeding.
  4. Initialize jsPDF in your script with: const doc = new jspdf.jsPDF();

This approach should resolve typical jsPDF integration issues in browser extensions. This should work as of 1/8/2024

Improve this answer

1 Comment

As it, the jspdf will be undefined, even if loaded in manifest and html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.