google chrome - How to capture the click event on the default print menu called by Javascript window.print()?

Question

I have built a page that is print-enabled using window.print(). Because of some really unusual requirements from management, I need to be able to capture the click event for the print menu that appears when window.print() is called. Specifically, in Chrome, I need to capture the click event for the 'Print' (blue) and 'Cancel' (gray) buttons.

I have to admit I don't even know where to start here. I inspected each element and can see that these are standard html elements. These buttons have classes (print default for the print button and cancel for the cancel button) but no IDs.

I also noticed that no DOM is visible beyond the print menu, and the print menu html tag has an ID of 'print-preview'.

How do I capture click events for the print menu buttons (in Chrome at least)?

Answer 1

You can not access Chrome's internal windows (printing dialog in this case) directtly from a regular web page.

To determine that printing dialog was opened or closed you can catch matchMedia events (webkit only):

var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
    if (mql.matches) {
        console.log('before print dialog open');
    } else {
        console.log('after print dialog closed');
    }
});

But you can not check if 'Print' or 'Cancel' button was clicked. This information is not accessible from regular web page.

To get information about Chrome's printer jobs you can only create extension for Chrome and listen onPrintRequested event in content script. Of course extension must be installed into browser of each page user.