Coding, Web, Hydrology and more.

Creating a Fake Crashed Tab When Current Tab Loses Focus


0x00 Story

Once upon a time I bumped into a site, as long as the tab losed focus, the tab caption will be changed into something like “oops, the tab crashed!”. It is really funny, isn’t it? So I spend some time digging into it and I found it really easy to do it, hence I decide to write a short tutorial on how to do it.

0x01 Mechanism

Firstly, we should know how to know whether the current tab loses focus. There’s an event called ‘visibilitychange‘, it is triggered when browser’s tab is hidden or displaying. Now that we only need to step further to do something when the current tab loses focus. Recall that, the document object has an attribute called ‘hidden‘, when we try to get its value, it will return a Bool, True when the document is hidden and False when the document is visible. OK, now we have the clue, we add an EventListener to ‘visibilitychange‘ event, and in the callback function we use document.hidden to judge whether the tab loses focus, code may like this:

The next step we need to do is to know how to change favicon via javascript, alright Stackoverflow has the solution:, all we need to do is generating a link element:

Alright, the final step is to change the document title, I guess a lot of us are familiar with the ‘title‘ attribute, we assign a value to it, the documents title will change immediately.

0x02 Code

According to the mechanism given above, we can easily realize the function via javascript, the code goes as follow:

0x03 Conclusion

Actually, it is quite a funny thing, which is capable of drawing a lot of user’s attention, and it can also be called as a trick lol. Try it out at this site, my friends.

About the author


[stay(d) for d in ('determined','diligent','devoted')]

By EDLinus
Coding, Web, Hydrology and more.