We Keep Coding

Why is my Chrome extension screenshare window disappearing?

I am first getting into Chrome Extensions. I have a browser_action that uses default_popup to open a tiny HTML page with a button. The JS used on that page is:
document.addEventListener('DOMContentLoaded', () => {
var shareButton = document.getElementById('share');
shareButton.addEventListener('click', () => {
chrome.desktopCapture.chooseDesktopMedia(["screen","window"], (streamId, options) =>{
});
});
});
When I hit the button, I see the OS window pop to ask what I want to share for a fraction of a second before it instantly closes.

Javascript SetInterval Not Working in IE

I am using window.open to open a popup window and setinterval function to wait and refresh the background page, once the popup is closed.
the code is working fine in Chrome and Firefox but is not working in IE.
Basically the issue is: in IE, it doesn't wait until popup window is closed. It immediately gets refreshed as soon as the popup opens up.
I saw the issue coming in both IE 9 & IE 11.
Any solution for this?
This is the code:
var url = "/apex/VFP_Add";
var win = window.open(url, "Add" ,"width=600, height=300, scrollbars=yes");
win.moveTo(500, 100);
win.focus();
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
window.location.reload();
}
}, 500);
I put alerts just before if(win.closed) check and just after the check. For the first alert, it showed as False. In second alert, after "if check", it showed True. This is very weird because i had not closed the window.

It seems that's a known bug in IE. See this article about it: https://support.microsoft.com/en-us/kb/241109
Their solution is to basically negate the value of win.closed when you detect that it's running in IE. Something like:
if(win.closed || isRunningInIE()) {
clearInterval(timer);
window.location.reload();
}
There are different ways to detect IE, so you can just use your favorite method in place of that isRunningInIE() function.

Safari print issue with javascript window.print()

I am having an issue with print on Safari. My System is Windows 7, and this function works fine in all other browsers except Safari. Here is the situation:
window.onload = function(){
console.log('before print');
window.print();
}
It won't output the log in console panel, but the print page will appear first, after i choose cancel in print page, the log will be output.
Does any body came up with this issue? Any help will be appreciated.
Updated
Here is the situation i have:
We need to print a page whose content can be changed by user by checking and unchecking check box, and only the content part of this page should be printed, so we create a new page that only contains the content for printing. In this page, we need to hide the unnecessary content that is not selected by user, so we need to do some DOM operation before window.print() get called. The console.log() is just an example code for observing. I tried to add an <div id='test'>Test HTML</div> in test HTML and add
var test = document.getElementById('test');
test.style.background = 'yellow';
before window.print();, it shows the same result in my Safari browser, the 'Test HTML' will not turn to yellow until i click cancel button in print panel, so it's not just the console.log issue.
Updated
I am using Safari 5.1.7(7534.57.2) on Windows 7

For me, the setTimeout solution didn't work. I found this jQuery plugin https://github.com/jasonday/printThis that has plenty of workarounds for window.print() because it seems not to be fully supported by all browsers.
I took this line that worked for me Safari document.execCommand("print", false, null)
and this worked ok for me for now in safari and chrome
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}

This is odd behavior. I tested in Safari 6.1 on Mac.
But may I ask why you need to log something before the printing? Because it seems that all the functions are being executed before the printing panel pops up:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
window.onload = function() {
$('body').html('before print');
console.log('before print');
window.print();
};
</script>
When you look at the print preview, the page will have the text "before print" on it. For some reason, the console will log the text only when the print panel closes, but in my opinion that doesn't really matter for your visitors. You can manipulate DOM and change the page before the printing process as you like.

After several times trying, below code works, but i don't know the reason, can anybody explain? Or this is a Safari Bug?
window.onload = function() {
$('body').html('After change');
setTimeout(window.print, 1000);
};

Safari prints the page before it is loaded unlike other browsers. Hence window.onload() can be used in the code of the newly opened html page. But if the page opened is non html content, then it is not possible. The below solution is global across browsers and type of content open.
var printWindow = window.open(url, '_blank');
$(printWindow).load(function()
{
this.print();
});

Adding one more solution which worked for my case:
First make your popup window.
$( ".myButton" ).click(function() {
var url = 'www.google.com';
var printWindow = window.open( url, '_blank');
printWindow.focus();
});
Then, inside the HTML page which is loaded in the popup:
$(window).bind("load", function() {
setTimeout( function () {
try {
document.execCommand('print', false, null);
}
catch(e) {
window.print();
}
}, 500);
});

Using onafterprint in Chrome & Safari

I am aware that until recently onafterprint was only native to IE. Recently HTML5 has added it to its list of events. I have only been successful in using it in Firefox but cannot get it to function in Chrome or Safari.
It appears to only function in Firefox when its used in the body:
<body onafterprint="printIt()">
The script for the function is this:
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};
By clicking the .printMe button, it opens the print window. Clicking print or cancel will show a message in #confirmPrint. I'm not so worried about being able to tell whether they are clicking cancel or print. I am only concerned with it functioning in Chrome and Safari. Any help is much appreciated. I am using jQuery as well, if that is not already obvious.

After some experiments, I think I can safely say that onafterprint is not worth considering.
Firefox fires it even if the user clicked Cancel instead of OK in the print dialog
IE8 apparently fires it even before the print dialog appears
Chrome doesn't fire it at all
Instead, just do whatever you wanted to do directly after calling print(), i.e.
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
printIt();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};

Window.onbeforeprint and Window.onafterprint get fired at the same time

I have defined onbeforeprint and I modify my html code and now once I finish printing that is on select of print button I want the onafterprint to be fired but it does not.
Instead when I press the Control + Print button the onbeforeprint is fired first and then the onafterprint event and then print dialog is shown.
Is there any way I could in some way do changes to my html after the Print button is clicked?
Am using IE -9 browser and the code is as follows:
Code
<script type="text/javascript">
window.onbeforeprint = function () {
alert('Hello');
}
window.onafterprint = function () {
alert('Bye');
}
</script>

onbeforeprint fired before dialog appears and allows one to change html and so on.
onafterprint is fired just before dialog appears. It is not even possible to know, whether document was actually printed or user canceled it. Needless to say about when printing finished (if started at all).
Again: no event is available to track anything happened in print dialog, i.e. answer to your question is no.
Moreover, I hope what your need will never be implemented, cause this allows to frustrate user. He/she asks to print one document, but got something different.

I ran into this same issue trying to use the onafterprint event, even in modern browsers.
Based on one of the other answers here, I was able to come up with this solution. It let's me close the window after the print dialog is closed:
// When the new window opens, immediately launch a print command,
// then queue up a window close action that will hang while the print dialog is still open.
// So far works in every browser tested(2020-09-22): IE/Chrome/Edge/Firefox
window.print();
setTimeout(function () {
window.close(); // Replace this line with your own 'afterprint' logic.
}, 2000);

Yes, you can, no catch. I have thus implemented in a professional application.
Print in Explorer, Firefox, all
window.onload = PrintMe;
function PrintMe() {
window.print();
setTimeout(function () {
alert("OK");
// Here you code, for example __doPostBack('ReturnPrint', '');
}, 2000);
}