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:
1 2 3 4 5 6 7 | document.addEventListener('visibilitychange', function() { if (document.hidden) { // Code goes here when the current tab loses focus } else { // Code goes here when the current tab gets focus } }); } |
The next step we need to do is to know how to change favicon via javascript, alright Stackoverflow has the solution: https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically, all we need to do is generating a link element:
1 2 3 4 5 | var link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = 'your favicon'; document.getElementsByTagName('head')[0].appendChild(link); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | (function () { const OriginTitle = document.title; document.addEventListener('visibilitychange', function () { var link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; if (document.hidden) { document.title = 'He\'s dead, Jim!'; link.href = 'https://cdn.edlinus.cn/wp-content/themes/akina/crash.ico'; } else { document.title = 'Just kidding!'; link.href = 'https://cdn.edlinus.cn/wp-content/themes/akina/favicon.ico'; setTimeout(function () { document.title = OriginTitle; }, 1500); } document.getElementsByTagName('head')[0].appendChild(link); }); })(); |
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.
