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

**URL:** <https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129>\
**Category:** Development\
**Created:** [January 15, 2019, 8:32pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129 "2019-01-15T20:32:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 15, 2019, 8:32pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/1 "2019-01-15T20:32:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [January 15, 2019, 8:45pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/2 "2019-01-15T20:45:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 15, 2019, 10:06pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/3 "2019-01-15T22:06:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [January 15, 2019, 10:07pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/4 "2019-01-15T22:07:40Z")

</div>

> **[Window: beforeunload event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event)**
>
> The beforeunload event is fired when the current window, contained document, and associated resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.

---

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 15, 2019, 10:21pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/5 "2019-01-15T22:21:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [January 15, 2019, 10:24pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/6 "2019-01-15T22:24:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 15, 2019, 10:37pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/7 "2019-01-15T22:37:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 15, 2019, 11:37pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/8 "2019-01-15T23:37:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NilkasG](https://avatars.discourse-cdn.com/v4/letter/n/0ea827/32.png) [@NilkasG](https://discourse.mozilla.org/u/NilkasG)\
**Post date:** [January 21, 2019, 10:50pm UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/9 "2019-01-21T22:50:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anon48797620](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@anon48797620](https://discourse.mozilla.org/u/anon48797620)\
**Post date:** [January 23, 2019, 4:23am UTC](https://discourse.mozilla.org/t/custom-warning-dialogues-before-a-page-is-closed-reloaded-navigated-to-a-new-url/35129/10 "2019-01-23T04:23:41Z")

</div>

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.