Habrahabr.ru raskukozhivatel in GoogleReadere

Good day. Probably many people like to read habrakhabr from googlreeder. And I'm no exception. But it is terribly annoying that if the article is liked, then you need to open a new tab and read it already from the site. All articles do not have time to read, tabs accumulate, traffic is spent. In general - the disorder and you need something to solve.
Googling a bit and looking for a decent one I did not find anything decent. Therefore, I decided to roll up the sleeves and write a small chrome extension that will help eliminate this problem.

Expansion

It consists of two js files - contentscript.js and jquery-1.4.2.min.js. I thought that there would be a lot of running around the DOM, so I decided to tighten the jakery (I love it).
Fail background.html - hanging in the background of the browser tab.
The main configuration of the extension is file manifest.json. It indicates the path to the icons, which addresses to resolve, which html page to use, etc. My manifesto looks like this:

 {
   "name": "Decoiler",
   "version": "0.0.2",
   "description": "Expands all articles from habr to full size for a pleasant reading.",
   "permissions": [
     "tabs", "http://www.google.com/reader/*"
   ],
   "icons": {
     "48": "serp-molot_48.png",
     "128": "serp-molot_128.png"
   },
   "background_page": "background.html",
   "content_scripts": [
     {
       "matches": ["http: // * / *"],
       "js": ["contentscript.js"]
     },
     {
       "js": ["jquery-1.4.2.min.js"],
       "matches": ["http: // * / *", "https: // * / *"],
       "run_at": "document_start"
    }
   ]
 }

Learn more about writing chrome extensions in this article.

How it all works

First, we slightly change the appearance of the reader. We add the "magic" link and hang the onclick handler on it.

 $ ("# gbg"). after ("<div style = 'margin-top: 10px;'> <a href = 'javascript: void (0)' id = 'special-magic'> special magic </a> </ div> ")
 $ ('# special-magic'). click (function () {
    $ (". entry-title"). each (function () {
       var link = $ (this) .children (". entry-title-link"). attr ('href')
          if ($ (this) .parent ("div"). find (". raskukozzz"). attr ("class")! = "raskukozzz") {
             $ (this) .after ($ ("<a href='javascript:void(0)'class='raskukozzz'> crack the skin </a>") .click (function () {
	           chrome.extension.sendRequest ({'action': 'fetchTwitterFeed', 'uri': link}, onText);
                })
            )
	 }
    })
 })

chrome.extension.sendRequest ({'action': 'fetchTwitterFeed', 'uri': link}, onText); - we send cross-domain request with chrome tools. Then we subscribe to the request events: chrome.extension.onRequest.addListener (onRequest);

 function fetchTwitterFeed (callback, uri) {
    	 var url = uri;
         var xhr = new XMLHttpRequest ();
         xhr.onreadystatechange = function (data) {
           if (xhr.readyState == 4) {
           
               var data = xhr.responseText;
               callback (data, url);
           }
         }
         xhr.open ('GET', url, true);
         xhr.send ();
       };

       function onRequest (request, sender, callback) {
         if (request.action == 'fetchTwitterFeed') {
           fetchTwitterFeed (callback, request.uri);
         }
       };

       chrome.extension.onRequest.addListener (onRequest);

Well that's all. The page is in our pocket. With the help of jakery, we quickly parse the DOM, append the necessary styles and show it in the window.

 $ ("# preload-fr"). html ($ (news) .find ("div.hentry"). html ())
 $ ("# preload-fr"). show (500)

How to use it

In the reader, select the feed habrahabra and click on the "special magic"

After that, under each heading the link “to break the bed” appears.

when clicked, a window with the full text of the news appears.
')

Where is all this available?

The plugin has already been placed in the gallery - download . More frequent update will google code .

Future plans

1. First of all, these are comments. Habr no comment no cake. Here I will choose an hour of free time and be sure to do it with comments - done! ..
2. Make friends extension with other sites.
3. Add settings. For example: window size, frame, background, show comments, etc.
4. Try to make an extension that will change the topic of the reader.

UP1 . Changed the location of the link, now it is like in the second picture.
UP2 . Many thanks to Yeah for his great help with the plugin.
Here are his additions and fixes:
- Transfer CSS to a separate file
- Added animation when loading
- Removed the old page loading mechanism and replaced it with an iframe with a microchrome :)
- Slightly turned the page, added the icon for closing the window
- Added Esc window closing
- Added check to work only on habrovsk tape

The new version is already in the gallery

And the window now looks like this:


There is an idea to add the “back” and “forward” buttons on posts.
UP3 . The plugin has been updated in the gallery with some bugfixes. In addition, a project appeared on Google code
UP4 . The plugin has been updated again.