Custom warning dialogues before a page is closed, reloaded, navigated to a new url

Add-ons Development
#1

Can the webNavigation API be used to accomplish what the following code does in a web page that does not have added permissions, but allow for a custom message?

window.addEventListener(“beforeunload”, function (event) {
event.returnValue = “\o/”;
return “\o/”;
});

I can listen for the events in the background script but don’t understand how the event in the page can be stopped/delayed until the user clicks again.

For example, is it possible to listen in the background script for a tab close event and then stop the tab from closing until the user reads a custom message warning that they may lose data if they don’t save it before closing the tab, and then resume the close if the user chooses to do so, or stop it if user chooses to cancel?

Thank you.

#2

Pretty sure you have to inject a content script that blocks the unload for that functionality.

#3

Thank you. Can the unload be blocked through javascript? Could you point me in general to where I would look for infromation on how to block a browser action?

#4
#5

Thank you. This is what I started with in my initial question. Unless, I am doing something wrong, which is quite likely, the best that one can get from “beforeunload” is a browser produced message that cannot be modified. The unload isn’t prevented and doesn’t allow the extension to generate a custom message. It does cause a delay that would provide the extension time to do something while the page is waiting for the user to click a button in the standard message.

Am I misunderstanding what is supposed to happen? Thank you.

#6

That is exactly how it works. There isn’t more control. Alternatives include storing the thing you’re trying to protect and offering an option to restore the tab and re-introducing the state you stored.

#7

Ok, thank you.

So, added permissions available through an extension don’t provide a means to generate a custom message.

Perhaps, if the standard message is displayed due to an onbeforeunload event, providing a little time, the background extension can still generate a supplemental message to be displayed in the page as a fixed-position division. That is, if the page will still accept communication with the background script at that point. I’ll give it a try anyway. Thanks again.

#8

I tried the above thought and it didn’t work to any satisfaction.

The beforeunload event was able to send a message to the background script, and the page still received and responded to message from the background script while the standard alert message was displayed, concerning whether or not the user wanted to leave the page.

However, the page still could not be altered apart from the styles. A fixed-position division containing a custom message could be included in the page with a visibility of hidden, and then the beforeunload event could be used to change its visibility to visible; but it is still covered by the darkened area generated by the alert message.

That’s sort of like cheating anyway even if it were visible enough to read. So, I haven’t found any good way to provide a user with a more detailed custom message.

#9

What you could do, while the page prompt is open, is show notifications or open a popup window.

But really, as @freaktechnik said: continuously save the users data. That is was more elegant and secure than any kind of prompt.

1 Like
#10

Thank you. I had been focused only on what could be done within the closing page and hadn’t even considered either of the two options you suggest as possibilities.

My scenario isn’t one of saving the data on the current page. The set up involves two pages: a main page with a persistent database of “packaged” project data and a work page with a temporary database of “unpacked” data of a single project. Any edits made in the work page have to be re-packaged and passed back to the main page to be saved. The warning I wanted to give was that if the main page is closed when a work page is still open, the work page’s data will be lost because there is nowhere to pass it to be stored. The work page’s data will be overwritten each time a project is unpacked. So, the warning is to inform the user to close the work page before the main page.

Perhaps I need to improve the set up rather than the warning method. Thanks.