Surfingkeys extension causes black blocks when generating pdf files with jsPDf .html() method

When this extension is installed alongside https://npmjs.com/package/pdfjs, and the jsPDF doc.html(...) method is used to generate a PDF from html content, the pdf output has black blocks in the content:

import { jsPDF } from "jspdf"; // for generating pdf from html

(window as any).btnclick = () => {
  const doc = new jsPDF("p", "pt", "a4", true);
  const html = `Hello <b>There!</b> everyone2!`;
  doc.html(html, {
    margin: 20,
    callback: (doc) => {
      doc.save("hello.pdf");
    }
  });
};

I have a repro here: https://codesandbox.io/s/surfingkeys-breaks-jspdf-dzkhfd?file=/index.html

Through some painful troubleshooting I’ve narrowed this down to having the SurfingKeys extension installed and enabled. I’ve tried this in a fresh chrome profile.

Somehow I think this extension is adding some css to the html and body elements on the page.

[brookhong]

Thanks @b0o for looking into this, I have committed a fix for this, which basically inserts the hints host element on demand rather than initially. @wildhart please verify whether it works for your case.

[wildhart]

Yes @brookhong , this fixes the problem when generating PDFs on my site, thank you for your clever solution!