tabs.saveAsPDF() not working (Firefox Web-ext)

Question

So, I got Firefox 56 (Ubuntu Gnome) yesterday and I started experimenting with tabs.saveAsPDF() function (Firefox 56+). So on the site the example that they have shown is for a background script. But I want to trigger it only when I press a button. So I made a button, and wrote this code in the .js file (a popup).

var savepdf = document.querySelector('.savePDF');
savepdf.addEventListener('click', saveaspdf);

function saveaspdf(){
console.log('Inside saveaspdf'); //for checking
browser.tabs.saveAsPDF({footerCenter:"hello",footerLeft:"2",footerRight:"4/10/2017",headerCenter:"Mera Baba",headerLeft:"Baba",headerRight:"Baba",marginBottom:0.5,marginLeft:0.5,marginRight:0.5,marginTop:0.5,orientation:0,paperHeight:11.0,paperSizeUnit:0,paperWidth:8.5,scaling:1,showBackgroundColors:false,showBackgroundImages:false,shrinkToFit:true})
    .then((status) => {
        console.log(status);
    });
}

When I click the button, the window for saving it as pdf comes(say I select Desktop), and I hit save. Nothing happens(the downloads addon also doesn't turn blue) and a corrupted pdf file is saved to my desktop. The console looks like this :

So, it goes inside the function but then (I don't have much idea) "Cannot send function call result..." happens. Please help me regarding how to solve this.

This is my manifest.json file :

"permissions": [
      "storage",
      "<all_urls>",
      "tabs",
      "activeTab"
    ],

    "browser_action": {
      "default_icon": "icons/pdf.ico",
      "default_title": "My pdf",
      "default_popup": "popup/addsite.html"
    }

EDIT :-

I made a very simple extension consisting of only a background.js file and copied the code from this site. Still then the only page where the function seems to work is the about:debugging page of Firefox. So I don't understand what am I missing here?!

Please [edit] the question to be on-topic: include a [mcve] that *duplicates the problem*. For Chrome extensions or Firefox WebExtensions you almost always need to include your *manifest.json* and some of the background, content, and/or popup scripts/HTML, and often webpage HTML/scripts. Questions seeking debugging help ("why isn't my code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](/help/on-topic), and [ask]. — Makyen, Oct 07 '17 at 05:20
@Makyen Sorry for not doing so. But as you can see, above was the code (of `popup script`) that does not work. Please see the answer and the discussions thereafter. The answer is "Wait for `Mozilla` to do something". But still I shall post the `manifest.json` if it makes the post better :) . About the `background script`, the main aim was to not use it. — Miraj50, Oct 07 '17 at 06:15

Smile4ever · Answer 1 · 2017-10-04T21:32:48.727

2

browser.tabs.saveAsPDF will only work in the background script. You will need messaging between your content script and your background script.

So contentscript.js:

var savepdf = document.querySelector('.savePDF');
savepdf.addEventListener('click', saveaspdf);

function saveaspdf(){
  console.log('Inside saveaspdf'); //for checking
  browser.runtime.sendMessage("saveCurrentPageAsUrl");
}

background.js:

browser.runtime.onMessage.addListener(onMessage);

function onMessage(message) {
  if(message == "saveCurrentPageAsUrl"){
    saveCurrentPageAsUrl();
  }
}

function saveCurrentPageAsUrl(){
  browser.tabs.saveAsPDF({footerCenter:"hello",footerLeft:"2",footerRight:"4/10/2017",headerCenter:"Mera Baba",headerLeft:"Baba",headerRight:"Baba",marginBottom:0.5,marginLeft:0.5,marginRight:0.5,marginTop:0.5,orientation:0,paperHeight:11.0,paperSizeUnit:0,paperWidth:8.5,scaling:1,showBackgroundColors:false,showBackgroundImages:false,shrinkToFit:true})
      .then((status) => {
          console.log(status);
      });
  }

}

A bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1404681) affecting Firefox 57 and Firefox 58 is currently preventing most pages from being saved as PDF, therefore a check should be built into the addon using getBrowserInfo (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/getBrowserInfo) to display a notification to the user when it's not supported (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications).

edited Oct 04 '17 at 21:32

answered Oct 04 '17 at 12:58

Smile4ever

3,491
2
26
34

I slightly disagree with your assessment here; the code presented by OP is certainly not a _content script_ as `browser.tabs` would simply be undefined. Presumably, though it needs clarification, it's a popup. That said, your approach is valid. – Xan Oct 04 '17 at 13:01
Btw, wasn't sure if it would work, but I put the code in the popup script instead of contentscipt.js and made the background script as you have done. Status logged in console is showing as "saved" but I still get a corrupted PDF file (ubuntu tries opening it with text editor, thinking it to be text/plain) (also again no change in downloads addon). – Miraj50 Oct 04 '17 at 14:07
Update: With what I wrote above, the `about:debugging` page of Firefox gets saved as PDF, but for other sites (tried with stackoverflow and fb), it doesn't work!! Don't know what is happening :( – Miraj50 Oct 04 '17 at 14:32
@Miraj I discovered that the PDF result depends partly on the HTML page layout. Could you see if you get the same result via my implementation of pageToPDF [here](https://addons.mozilla.org/en-US/firefox/addon/page-to-pdf/)? – Oct 04 '17 at 14:48
@K3N For you also I fear `about:debugging` is the only page that is getting saved(tried on fb, SO, a moodle page of my institute[which has only text and no images!!]), For all of these sites, it gives me a corrupted file. – Miraj50 Oct 04 '17 at 15:00
1

If anyone reaches this below, I found [something](https://bugzilla.mozilla.org/show_bug.cgi?id=1404681). People say here that it works in Firefox 56 but not in later versions. I don't know what to do now? :( – Miraj50 Oct 04 '17 at 17:48
@Xan There is a difference between a content script and a page script. A content script has browser.runtime.sendMessage defined. A page script is a script loaded by the page content (=the website). – Smile4ever Oct 04 '17 at 21:26
1

@Miraj Use Firefox 56 for developing the addon, use https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/getBrowserInfo to display a warning (https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications) about bug 1404681 in affected versions to the user. The issue will probably be fixed when 57 or 58 is released. – Smile4ever Oct 04 '17 at 21:29
Okay, thanks. Yeah, that seems the best thing to do now. – Miraj50 Oct 05 '17 at 05:03
1

You can also use https://stackoverflow.com/questions/18191893/generate-pdf-from-html-in-div-using-javascript as a workaround inside a content script :) – Smile4ever Oct 05 '17 at 06:13
Thank you @Miraj for taking the time - much appreciated. I guess we can only wait for Mozilla to fix this (for me I will avoid workarounds, but in any case thanks Smile4ever for the link). – Oct 05 '17 at 14:59

tabs.saveAsPDF() not working (Firefox Web-ext)

1 Answers1