Bliss CX

{
    "manifest_version": 2,
    "name": "Bliss CX",
    "version": "2.2",
    "description": "Rss-reader Bliss. Beta",
    "browser_action": {
        "default_icon": "images/icon_new.png",
        "default_title": "Bliss",
        "default_popup": "popup.html"
    },
    "icons": {
        "48":   "images/icon_new_48.png",
        "123":  "images/icon_new_128.png"
    },
    "background": {
        "scripts":      ["jquery-2.1.4.js", "background.js"],
        "persistent":   false
    },
    "content_scripts": [
        {
            "matches":  ["<all_urls>"],
            "js":       ["jquery-2.1.4.js", "content.js"],
            "run_at":   "document_idle"
        }
    ],
    "permissions": [
        "tabs",
        "activeTab",
        "<all_urls>",
        "history",
        "contextMenus",
        "downloads"
    ]
}


<!DOCTYPE html>

<html>
  <head>

    <title>Bliss Rss-reader</title>
    <link href="style.css" rel="stylesheet">
    <script src="popup.js"></script>

  </head>
  <body>

    <div id="trigger">Proceed</div>

  </body>
</html>


//popup
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('trigger').addEventListener("click", function() {
        chrome.extension.sendMessage({
                key: "JUST_DO_IT",
                rss_from: "http://lenta.ru/rss"
        }, function(response) {
            if ("JUST_HAVE_DONE_IT" == response.key) {
                document.getElementsByTagName("body")[0].innerHTML += JSON.parse(response.data);
                document.getElementById('trigger').style.width = "360px";
                var i, h, blocks = document.getElementsByClassName('block');
                for (i = 0; i < blocks.length; i++) {
                    blocks[i].addEventListener("click", function() {
                        if ("visible" == this.getElementsByClassName('dsc')[0].style.visibility) {
                            this.getElementsByClassName('dsc')[0].style.visibility = "hidden";
                            this.getElementsByClassName('date')[0].style.visibility = "hidden";
                            this.style.height = "162px";
                        } else {
                            this.getElementsByClassName('dsc')[0].style.visibility = "visible";
                            this.getElementsByClassName('date')[0].style.visibility = "visible";
                            this.style.height = "auto";
                        }
                    });
                    blocks[i].getElementsByClassName("lnk")[0].addEventListener("click", function(e) {
                        var full_text_url = this.href;
                        chrome.tabs.query({active:true, currentWindow: true}, function(tabs){
                            chrome.tabs.create({
                                active: true,
                                url: full_text_url
                            }, function(tab) {});
                        });
                        e.stopPropagation();
                    });
                }
            }
        });
        document.getElementById('trigger').innerHTML = "Refresh";
    });
});


//background
var respond_rss, respond_url;

function generate_feed(xml) {
    var items = xml.getElementsByTagName("item");

    var doc = document.implementation.createHTMLDocument("New Document");
    var i, el = doc.createElement('html');
    el.innerHTML = "<html><head><title>Bliss</title></head><body></body></html>";

    for (i = 0; i < items.length; i++) {
        var div = document.createElement("div");
        div.className = "block";

        var inner_cat = document.createElement("div");
        inner_cat.className = "cat";
        inner_cat.innerHTML = $(items[i]).find("category").html();

        var inner_date = document.createElement("div");
        inner_date.className = "date";
        inner_date.innerHTML = $(items[i]).find("pubDate").html();

        var inner_img = document.createElement("img");
        inner_img.className = "prev";
        inner_img.src = $(items[i]).find("enclosure").attr('url');

        var inner_title = document.createElement("div");
        inner_title.className = "tit";
        inner_title.innerHTML = $(items[i]).find("title").html();

        var inner_descr = document.createElement("div");
        inner_descr.className = "dsc";
        inner_descr.innerHTML = $(items[i]).find("description").html();

        var inner_br = document.createElement("br");

        var inner_link = document.createElement("a");
        inner_link.className = "lnk";
        inner_link.href = $(items[i]).find("link").html();
        inner_link.innerHTML = "Читать далее";

        div.appendChild(inner_cat);
        div.appendChild(inner_date);
        div.appendChild(inner_img);
        div.appendChild(inner_title);
        div.appendChild(inner_descr);
        inner_descr.appendChild(inner_br);
        inner_descr.appendChild(inner_link);
        el.getElementsByTagName('body')[0].appendChild(div);
    }

    string = JSON.stringify(el.getElementsByTagName("body")[0].innerHTML);
    string = string.replace(/<!--\[CDATA\[/g, '').replace(/\]\]-->/g, '');
    console.log('stringified:' + string);
    return string;
}

function get_rss(msg, sender, sendResponse) {
    rss_url = msg.rss_from;
    console.log('requseting url:' + rss_url);

    var xhr = new XMLHttpRequest();
    xhr.open("GET", rss_url, true);
    xhr.send(null);
    xhr.onreadystatechange = function() {
        if (4 == xhr.readyState) {
            if (200 == xhr.status) {
                console.log(xhr.responseXML);
                var feed = generate_feed(xhr.responseXML);
                sendResponse({
                    key: "JUST_HAVE_DONE_IT",
                    data: feed
                });
            } else {
                console.log('status:' + xhr.status);
            }
        } else {
            console.log('readyState:' + xhr.readyState);
        }
    }
}

chrome.extension.onMessage.addListener(
    function(msg, sender, sendResponse) {
        switch (msg.key) {
            case "get_audio":
                process();
                break;
            case "JUST_DO_IT":
                get_rss(msg, sender, sendResponse);
                return true;    //response will be sent later asynchronically
        }
    }
);


//content
var url = document.URL;
var i, tmp, tmp1, tmp2, tmp3, tmp4;

if (-1 != url.indexOf("vk.com/audio")) {
    var songs_block = document.getElementById("initial_list");
    var songs = document.getElementsByClassName("audio  fl_l");
    var d_btn = '<div class="d_btn" style="display: block; height: 16px; width: 16px; margin-left: 20px; z-index: 1000000;"></div>';
    var d_link = '<a class="d_link" href="" title="Download">DL</a>';
    var real_btn = '<button class="real" style="width: 16px; height: 16px; margin-left: 20px; z-index: 1000000000;">D</button>';

    for (i = 0; i < songs.length; i++) {
        //add download button
        var button_block = songs[i].getElementsByClassName("play_new")[0];
        button_block.innerHTML += d_btn;
        //button_block.innerHTML += real_btn;

        //modify song_name's block
        var name_block = songs[i].getElementsByClassName("info fl_l")[0];
        name_block.style.width = "320px";
        name_block.style.height = "33px";
        name_block.style.marginLeft = "20px";

        //modify download button
        var d_b = songs[i].getElementsByClassName("d_btn")[0];
        d_b.style.cursor = "default";
        d_b.style.backgroundColor = "white";
        d_b.style.borderRadius = "3px";
        d_b.style.border = "1px solid red";

        //add content link
        d_b.innerHTML += d_link;

        //modify href
        d_l = songs[i].getElementsByTagName("input")[0].value;
        d_b.getElementsByClassName("d_link")[0].href = d_l;

        d_b.getElementsByClassName("d_link")[0].addEventListener("click", function(e) {
            alert(d_b.getElementsByClassName("d_link")[0].href);
            e.stopPropagation();

        })
        //copy song initials to clipboard
    }

}


//style
body {
    background-color: #808080;
    list-style-type: none;
    -webkit-user-select: none;
}

a {
    text-decoration: none;
    color: red;
}

a:hover {
    color: #D0D0D0;
}

#trigger {
    display: block;
    cursor: pointer;
    width: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: #D0D0D0;
    border: 1px solid black;
    border-radius: 2px;
}

#trigger:hover {
    background-color: #F0F0F0;
}

.block {
    display: block;
    cursor: default;
    height: 162px;
    width: 360px;
    margin: 5px;
    background-color: #D0D0D0;
    border: 1px solid black;
}

.cat {
    display: inherit;
    float: left;
    cursor: inherit;
    text-indent: 5px;
}

.date {
    display:block;
    float: right;
    visibility: hidden;
    margin-right: 5px;
    text-align: right;
}

.prev  {
    display: inherit;
    cursor: inherit;
    width: 160px;
    margin-left: auto;
    margin-right: auto;
}

.tit {
    display: inherit;
    cursor: inherit;
    height: auto;
    text-align: center;
    padding: 5px;
}

.dsc {
    display: inherit;
    cursor: inherit;
    visibility: hidden;
    text-align: justify;
    margin: 5px;
    padding: 5px;
    background-color: #F0F0F0;
}

.lnk {
    visibility: inherit;
}