Firefox “media emulate print” vs print this page

Question

I've got some trouble printing a web page in Firefox. If I use media emulate print in the console the CSS look great. But if I look at the print preview via menu -> print this page .

It looks horrible and also only the first page is shown - further pages are empty!

So does anybody know the difference between media emulate print and menu -> print this page ?

How I can solve my problem?

Answer 1

This is a Firefox bug. It's documented here: https://bugzilla.mozilla.org/show_bug.cgi?id=1448507

The workaround is to move your CSS to the web_accessible_resources section of your manifest, and then insert a link to it into your head element using JavaScript. You can refer to it using the browser.runtime.getURL() method.

• https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/web_accessible_resources
• https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/getURL