Bookmarklet JS: “VKontakte video albums”

The famous social network is constantly updated, which does not always bring sincere joy to users. How many people have so many opinions, you can’t please everyone, and one day I was not happy about the new style of displaying video albums on VKontakte.
But we programmers are agile people, we immediately laugh - here it is a joyful opportunity to make something like this ... So I made a small device that I want to share, and at the same time to remind what it is and how bookmarklets are made.

The bookmarklet, who does not know, is such a script in the browser’s bookmarks, which, in addition to (or instead of) the usual click on the link, can also execute the required code, thus concentrating the damn features of javascript in one button. It’s like a macro.

So, for me, the old style was much more convenient when a list of video albums was compactly displayed on the side, clicking on which made the transition to the desired one. So I thought, I’ll make a sort of bookmarklet that will build this list. Having visited the video page, I fumbled in the debugger and found that the album names are stored in a div element with the class "video_album_text fl_l", this element lives in a div with the class "video_album_info", and that one lives in the a element (anchor), whose href is just the right link to the album.

“Eureka!” I exclaimed, and jumped out of the bath ... i.e. figured out that I just need to collect from the page all the elements with the class "video_album_text fl_l", go through them and pull out the href link from the parent of the parent (this is not a typo) of each.
Total, the following code was born:

var str = '',
        alb = document.getElementsByClassName('video_album_text fl_l');
    for (var i = 0; i < alb.length; i++) {
        var href = alb[i].parentNode.parentNode.href;
        str += '' + alb[i].innerHTML + '
'; }

getElementsByClassName certainly does not work in 6, 7 and 8 IE, but I have already grown out of them for a long time, and by this - it doesn’t. I collect the elements in the alb collection, loop through and collect the str string from the finished links.

It remains to display this case on the page. Here it will be a little more interesting in terms of creativity ... I wanted not just to bring out the block, but something like a convenient window with control buttons. What to do, spoiled by Windows windows, thank Bill Gates ...
We draw a window:

var div = document.createElement('div');
    div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:' + 200 + 'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';
    div.innerHTML = '[x]'+
		'[-]'+
		'[<]'+
		'[>]
' + str; document.body.appendChild(div);


A div element is created, it is assigned a certain style through the cssText property, where it is indicated that this is a window of a fixed position, glued to the lower left corner (bottom: 0px; left: 0px;) and other pleasures to taste ... And to the contents of the element (div.innerHTML ) control buttons with onclick attributes are recorded first, and then str, collected earlier than the deadline, is a list of links. onclick is certainly a dubious decision when developing an interface, but for a bookmarklet, it will do. Moreover, this is just a quick example, and there is no limit to perfection. For example, I decided to put the window width into a separate variable wi.

In order for this to become a bookmarklet, you need to put the “javascript:” line at the beginning of the code, translate everything into one line (remove line breaks) and add this line to your browser bookmarks instead of the link address. I’m probably not going to describe how to create bookmarklets in different browsers; anyone who is interested can easily find it.
So, we got such a final code, in Chrome you can simply select it and drag it to the bookmarks bar:

javascript:var str='', wi=200, alb = document.getElementsByClassName('video_album_text fl_l');for(var i=0;i'+alb[i].innerHTML+'
';}var div=document.createElement('div');div.style.cssText = 'position:fixed;bottom:0px;left:0px;width:'+wi+'px;height:80%;overflow:auto;z-index:1000;background-color:white;padding:5px;border:solid 1px black;';div.innerHTML = '[x][-][<][>]
'+str;document.body.appendChild(div);


Of course, all this will work while the current HTML structure and the video_album_text fl_l class are preserved.
To use it this way: go to the videos page and click the bookmarklet button on the bookmarks bar. A window appears with a list of albums that can be closed, minimized and moved to the side with the [x] [-] [<] [>] buttons.
But this design looks something like this: I
image

use it in Chrome, I did not bother with tests in other browsers, but in principle the code is simple, it should not conflict. There will be corrections - write. Thanks.
And thanks for watching.

Also popular now: