Importing html2pdf into a Firefox extension give module error

Question

Hi I have looked at other answers such as https://stackoverflow.com/a/63122940/3255525

I'm trying to use HTML2PDF in a Firefox extension, I want to make a PDF not just of the current page, but the entire site. (this is for a university project docs in Github Pages)

I cannot get past the error, import declarations may only appear at top level of a module in the console.

I've tried a couple different ways to import the file. In my manifest I have:

{
  "manifest_version": 2,
  "name": "Newone",
  "version": "1.0",
  "description": "An extension to read all files on the Github website and convert to PDFs.",
  "icons": {
    "48": "icons/border-48.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://github.gatech.edu/pages/cs6035-tools/cs6035-tools.github.io/"
      ],
      "js": [
        "newone.js"
      ]
    }
  ],
  "background": {
    "page": "background.html"
  },
  "browser_specific_settings": {
    "gecko": {
      "id": "[email protected]"
    }
  }
}

Here's my js file:

import html2pdf from "dist/html2pdf";

// I've also tried this approach, then attach the script to the DOM, which I omit    
// const moduleURL = chrome.runtime.getURL('/dist/html2pdf.js');

// const script = document.createElement('script');
// script.src = moduleURL;
// document.head.appendChild(script);

document.body.style.border = "5px solid red";

var element = document.body;
var opt = {
    margin:       1,
    filename:     'GTFile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

var worker = html2pdf().from(element).set(opt).save();

alert("Hopefully there's a PDF file created!");

But even when I setup an HTML file with:
<script type="module" src='./dist/html2pdf.js'></script>
I still get an error that import declarations may only appear at top level of a module

I tried going into the html2pdf.js file and exporting the var = function html2pdf, no dice.

Not sure what the next step is thanks for any help!

NOTE: Sorry about the firefox-addon tag, that's what came up when I typed in firefox-extension

Answer 1

Firefox extensions do not currently support ECMAScript modules directly in content scripts.

1- include the html2pdf library using a script in your HTML file:

<script src='path/to/html2pdf.js'></script>

2-use a window global to access the html2pdf object:

document.body.style.border = "5px solid red";

var element = document.body;
var opt = {
    margin:       1,
    filename:     'GTFile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 2 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

var worker = window.html2pdf().from(element).set(opt).save();

alert("Hopefully there's a PDF file created!");