0

I want to write code that prints a web page. print() is not enough because it only opens the browser's print window, and does not print immediately. In addition, I am also interested in controlling the printing options (such as printing to PDF or a certain size).

So I opened Chrome's developer tools with the print window open, copied the js path of the save button, and tried to write the following code in a web page I wanted to print:

print()
document.querySelector("body > print-preview-app").shadowRoot.querySelector("#sidebar").shadowRoot.querySelector("print-preview-button-strip").shadowRoot.querySelector("div > cr-button .action-button")click()

I got an error because this element does not appear on the page itself but in the print window. It turns out that the window is actually a separate page (chrome://print/), but in some way it is embedded in the printed page or it appears unrelated to it.

My question is, how can I run JS in such a case on the window?

My question is definitely different from this question. There the question was about a plugin, and the problem was accessing the chrome:// pages because they are like that, and the browser does not allow accessing them. But I'm writing a regular script (not a plugin) and as such it can always access such pages. The problem in my case is that the print window is not part of the website page but is displayed separately.

I will clarify again. The problem I encountered is with accessing the HTML of a page other than the current page. Using a plugin, it should actually be technically possible, but the browsers block it. So the question of how to do this with a plugin is different from the question of how to do it with a regular script.

post Scriptum. 1. Perhaps it is also possible to make direct use of JS through which Chrome prints, but at the moment it is not relevant for me. The question is how to access the HTML elements as above.

  1. I have seen similar questions (like this one). I didn't see any answers.
shalomOlam
  • 19
  • 6
  • 1
    All `chrome:` URLs are privileged and cannot be accessed by JavaScript (even extensions) without disabling some browser security settings. – jsejcksn Apr 16 '23 at 17:25
  • See [Can you access chrome:// pages from an extension?](https://stackoverflow.com/q/19042857/438273) and [Direct Print after clicking](https://stackoverflow.com/q/54376576/438273) – jsejcksn Apr 16 '23 at 17:26
  • Before submitting the question I should have confirmed that none of these posts answer my question. And they do not answer. – shalomOlam Apr 17 '23 at 13:47
  • 1
    "_...accessing the chrome:// pages ... but I'm writing a regular script (not a plugin) and as such it can always access such pages_": Unfortunately, that's incorrect — see [Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) – jsejcksn Apr 17 '23 at 14:13
  • I may not have been accurate. In any case, it is possible to access the print window directly. Try it. Don't take me at my word. – shalomOlam Apr 17 '23 at 14:46
  • I didn't say it depends on Edge or Chrome. By the way, why was this question marked as a duplicate? This is a superficial mistake. I already explained why the questions are unrelated. People peek for a moment and draw their conclusion. – shalomOlam Apr 17 '23 at 21:50

1 Answers1

1

I'm sad to tell you that this is impossible. In the other hand, you can always use an alert JS library (like sweetalert2) and then just edit the inner HTML of the alert div.

First, include the sweetalert2 script in your HTML <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>.

Then, write a function that creates the popup

function showAlert(){
  Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)

get the popup element and edit it's innerHTML

document.getElementsByClassName("swal2-popup")[0].innerHTML = "Write here your HTML for the popup.";

and end the function

`}`


function showAlert(){
  Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)
document.getElementsByClassName("swal2-popup")[0].innerHTML = "Hello, this is an alert with a <button onclick='alert()'>button</button>.";
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<body>
  <p>Hi, this is some inutile text here.
  
  Lorem ipsum dolor sit amet consectetur adipiscing elit praesent, maecenas felis aenean sapien vulputate sed porttitor habitasse auctor, hendrerit eros nibh ligula mollis ornare venenatis. Taciti arcu dapibus aliquam ridiculus nostra posuere velit, facilisi aenean morbi vehicula cursus nullam sapien potenti, tristique pulvinar nulla fames auctor rutrum. Faucibus torquent dui interdum quisque nisi nam maecenas duis, mauris eget class euismod integer curae ultricies, tempor sem felis varius sapien nunc cum.</p><button onclick="showAlert()">SHOW ALERT</button>
</body>
Code Programer
  • 11
  • 1