Раскукоживатель habrahabr.ru в GoogleReadere

    Доброго времени суток. Наверное многие любят читать хабрахабр из гуглридера. И я не исключение. Но ужасно раздражает что если статья понравилось, то нужно открывать новую вкладку и читать ее уже с сайта. Все статьи не успеваешь прочитать, вкладки накапливаются, трафик тратится. Вобщем — непорядок и нужно что то решать.
    Погуглив немного и поискав на хабре ничего приличного не нашел. Поэтому решил засучить рукава и написать небольшое расширение для хрома, которое поможет устранить эту проблему.

    Расширение


    Состоит из двух js файлов — contentscript.js и jquery-1.4.2.min.js. Думал, что беготни по DOM будет много, поэтому решил затянуть джейквери (люблю я ее).
    Фаил background.html — висит в фоне таба броузера.
    Основной конфиг расширения — это фаил manifest.json. В нем указываются пути к иконкам, какие адреса разрешать, какие html страница использовать и т.д. Мой манифест выглядит так:
    {
      "name": "Раскукоживатель",
      "version": "0.0.2",
      "description": "Раскукоживает все статьи с хабра до полного размера для приятного чтения.",
      "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"
       }
      ]
    }
    


    Больше о написании расширений для хрома можно узнать из этой статьи

    Как это все работает


    Сначала немного меняем внешний вид ридера. Дописываем «магическую» ссылку и вешаем на нее обработчик онклик.
    
    $("#gbg").after("<div style='margin-top: 10px;'>< a href='javascript:void(0)' id='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'>раскукожить</a>").click(function(){
    	          chrome.extension.sendRequest({'action' : 'fetchTwitterFeed', 'uri': link}, onText);
                   })
               )
    	}
       })
    })
    
    

    chrome.extension.sendRequest({'action': 'fetchTwitterFeed', 'uri': link}, onText); — посылаем кросдоменный запрос инструментами хрома. Потом подписываемся на события запроса: 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);
    

    Ну вот и все. Страница у нас в кармане. С помощью джейквери быстро разбираем DOM, дописываем нужные стили и показываем в окне.
    $("#preload-fr").html($(news).find("div.hentry").html())
    $("#preload-fr").show(500)
    

    Как этим пользоваться


    В ридере выбираем фид хабрахабра и жмем на «особая магия»
    image
    После этого под каждым заголовком появляется ссылка «раскукожить»
    image
    при нажатии на которую появляется окно с полным текстом новости.image

    Где это все можно достать


    Плагин уже размещен в галереи — скачать. Более частое обновление будет гугл коде.

    Планы на будущее


    1. Прежде всего — это комментарии. Хабр без комментариев не торт. Вот выкрою часик свободного времени и обязательно сделаю с коментами — сделано!..
    2. Подружить расширение с другими сайтами.
    3. Добавить настройки. Например: размер окна, рамка, фон, показывать комментарии и т.д.
    4. Попробовать сделать расширение, которое будет менять тему ридера.

    UP1. Поменял месторасположение ссылки, теперь она как на второй картинке.
    UP2. Большое спасибо пользователю Yeah за огромную помощь с плагином.
    Вот его добавления и исправление:
    — Перенес CSS в отдельный файл
    — Добавил анимацию при загрузке
    — Убрал старый механизм загрузки страницы и заменил на iframe с микрохабром :)
    — Слегка переверстал страницу, добавил иконку закрытия окна
    — Добавил закрытие окна по Esc
    — Добавил проверку, чтобы работало только на хабровской ленте

    Новая версия уже в галереи

    И окно теперь выглядит так:
    image

    Есть еще идея добавить кнопки хождения «назад» и «вперед» по постам
    UP3. Плагин обновился в галереи с некоторыми багфиксами. Кроме того, появился проект на гугл коде
    UP4. Плагин еще раз обновился.

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 94

      +2
      Отличное дополнение, еще в четверг заметил его в новинках. Молодцом! и Добро пожаловать на хабр!
        +3
        Спасибо. О, ща статью поправлю. Теперь можно и комменты читать
          +1
          Комменты нужнее полной статьи. Ждем.
            0
            «Раскукоживатель» — это что-то! :) Спасибо!
        0
        Для Лисицы можете сделать?
          +1
          Для фаирфокса никогда не писал плагины… Хотя я и для хрома раньше никогда не писал. Нужно на выходных посмотреть как там все работает.
            0
            Раскукоживатель вещь! Вот только перевод Девид Блэйна напомнило: «Он скукожил ебалайку...»
              0
              Попробуйте не XUL-расширение написать, а для JetPack — он похож на Chrome. Возможно, что даже не придётся особо что-то переписывать. Да, он доступен в Firefox 3.6+ как часть браузера (раньше нужно было ставить отдельный плагин), упаковывается в обычный XPI-пакет.
                +3
                Можно попробовать через GreaseMonkey. Дае, кажется, менять особо ничего не придется.
                  0
                  под фф надо по xul ить немного… под chrome удобней расширения писать мне показалось.
                +3
                Несколько советов/пожеланий:
                1. В manifest добавьте все-таки указание, что расширение только для google reader, а то у вас http://*/
                2. У меня почему-то не работает. Заглянул в код — не нашел элемента #gbg, зато есть #gbh
                3. Сильно много управления CSS через jQuery. Не лучше ли создавать элемент style в head и засовывать туда заранее сформированный CSS (минимизированный)?
                  +2
                  Спасибо большое, постараюсь все исправить
                    +11
                    Я тоже решил не сидеть сложа руки и «слегка переписал» ваше расширение.
                    Changelog:
                    — CSS перенесен в строковую переменную и добавляется через тег style. Как следствие, убраны хардкорные включения .css в коде
                    — функция fetchTwitterFeed заменена на fetchHabrPost, которая использует $.get из jQuery вместо обычного XHR
                    — всплывающее окно слегка переверстано. Так как применяется position:absolute, то я убрал функцию определения высоты окна и заменил на простое позиционирование относительно краев экрана — в результате размер всплывающего окна меняется при изменении размера реального окна (чего раньше не было, так как высота всплывающего жестко задавалась вначале)
                    — убраны вызовы remove для всплывающего окна при закрытии (чтобы можно было открывать окно повторно)
                    — оптимизирована верстка (убраны divы окружающие ссылки и пр.)
                    — добавлено закрытие окна по клику за его пределами

                    Расширение запаковано и выложено тут: dl.dropbox.com/u/8480842/0.1.0_0.7z

                    Дальше сами решайте, что с этим кодом делать.

                    Ух, а я пойду спать :)
                      +2
                      О, вы не представляете как я вам благодарен
                        +1
                        Надеюсь не я один подниму Вам карму. Негоже такому человеку сидеть в минусах.
                          +1
                          Спасибо. По ссылке выше, кстати, еще раз обновлен код. Я просто не стал уже засорять комментарии, а написал автору через почту. Он обещал посмотреть и обновить, но уже сейчас можно установить расширение от artem_kovardin, а потом просто переписать файлы из архива в соответствующую папку.
                      +1
                      Теперь ссылка «раскукожить» цепляется в другое место
                      0
                      по мне тоже самое что и вкладка…
                        +1
                        Нельзя ставить пермишены на все сайты т.е http://*/ лучше ограничить что бы где не надо не загружался плагин…

                        "matches": ["http://*/*"],
                        "js" : ["contentscript.js"]

                        "js": ["jquery-1.4.2.min.js"],
                        "matches": [ "http://*/*", "https://*/*" ],
                          +1
                          Спасибо, уже исправил.
                          +5
                          я конечно уважаю, что вы написали расширение и возможно получу пачку минусов, но по-моему это изобретение велосипеда. есть фишка «просмотр оригинала», причём совершенно для любого элемента rss, которая добавляется расширением Reader Plus (также под Google Chrome)
                          https://chrome.google.com/extensions/detail/hhcknjkmaaeinhdjgimjnophgpbdgfmg
                            +1
                            ещё плюс — вызывается хоткеем — q.
                              0
                              О, не знал если честно. Плохо я поиск юзал. Расширение отличное, только слишком уж монструозное.
                                0
                                Это расширение показывает только посты с Хабра, но зато не требует перехода на сам Хабр, открытия новой вкладки…
                                  0
                                  аналогично с любого сайта, включая хабр, с помощью фичи в Reader Plus можно просматривать полную новость, не открывая новую вкладку, а просматривая в текущей с google reader'ом.
                                  вообще не понял к чему вы написали этот свой коммент, если честно.
                                    +1
                                    Комментарий мой связан с недопониманием: я подумал, что речь идет об iReader
                                    Поставил, посмотрел. Мне не понравилось то, что предпросмотр происходит прямо внутри элемента RSS. Можно ли там настроить, чтобы был pop-up?
                                      +1
                                      Можно, в настройках есть
                                0
                                когда у Гугл ридера остаются непрочитанные посты, он современем их глотает, в то время когда я оставил их на потом.
                                  0
                                  Со временем = ровно через месяц. Видимо, понимает, что пролежавшая в оставленных на потом статья уже никогда не будет прочитана, вот и удаляет :)

                                  0
                                  Mac OS X 10.6.4, GC 6.0.490.1 dev — не заработал вообще. Установился, но работать не захотел.
                                    0
                                    Традиционный вопль про необходимость в Опере
                                      0
                                      Нужная штука, но я чаще захожу в статью чтобы комменты почитать. Порою в них инфы поболее, чем в посте.
                                      +1
                                      Еще добавьте правило — чтобы работало при https.
                                        0
                                        Когда постил «раскукоживатель» в галерею наткнулся на еще одну интересную вешь для ридека. Пользователям Мак должно понравиться. https://chrome.google.com/extensions/detail/obhahfkkedakkpdfmjeakfginobldlai
                                        +2
                                        не совсем понимаю вашу нелюбовь к вкладкам.
                                        я обычно пробегаюсь по списку клавишами j/k и открываю заинтересовавшие новости клавишей v. единственное неудобно, что страницы открываются не в «фоновой» вкладке, приходится обратно к списку переключаться.
                                          0
                                          Проблема в том, что хабр читается не каждый день, и открытых вкладок получается много. Плюс, еще есть вкладки не с хабра. В итоге, на 15" мониторе ноута, уже даже иконок вкладок не видно.
                                          +1
                                          Плагин еще раз обновлен со всеми изменениями от Yeah, за что спасибо ему еще раз. И не жадничайте, поднимите ему карму
                                            +1
                                            Эта дыбильная айпадовская мода на всплывающее окно с затемнённым фоном до добра не доведёт. Нельзя, что ли, сделать раскукоженный псто внутри ридер-сообщения? Чтобы ничего не всплывало?
                                              +1
                                              Мне кажется lightbox появился до айпада. А в отдельном окне у меня текста получается процентов на 15-20 больше, а значит скролить нужно меньше.
                                                +1
                                                зато потом чтобы вернуться в ридер надо отщёлкивать лайтбокс
                                                в общем, не столь важно, но для лично меня дополнительный элемент который всплывает, как-то менее предпочтителен чем что-то внутри программы
                                                  +1
                                                  Оптимальный вариант — настройка в опциях «показывать в окне или в сообщении». Постараюсь это реализовать
                                                    0
                                                    о, это дело
                                              +5
                                              >>Но ужасно раздражает что если статья понравилось, то нужно открывать новую вкладку и…
                                              читать надпись, что статья перемещена в черновики или юзер был забавнен, а статья удалена :(
                                                +2
                                                Эх теперь бы ещё «Отфильтраживатель» по ключевым словам заголовка:)
                                                  0
                                                  А можно объяснить, что имеете в виду? Или это ирония?
                                                    0
                                                    Нет, не ирония. Имеется в виду следующее, возможность убрать из rss ленты темы в заголовке которых есть определённые мною слова.
                                                      0
                                                      Это умеет расширение Google Reader Plus
                                                        0
                                                        Не знал, спасибо за наводку.
                                                  +2
                                                  6.0.490.1 & W7 ссылка «Особая магия» не кликабельна. Подскажите пожалуйста, что я делаю не так?

                                                  P.S.: Браузер рестартил, страницу обновлял (ктрл+ф5)
                                                    0
                                                    Аналогично, только версия chrome 5.0.375.126
                                                      0
                                                      Попробуйте: habrahabr.ru/blogs/google_chrome/101734/#comment_3158456
                                                      0
                                                      подтверждаю
                                                        0
                                                          0
                                                          На основном потоке для Хабра заработало. До этого я пытался использовать особую магию в фиде для корпоративного блога. Видимо в эту сторону и надо копать.
                                                        0
                                                        Откройте консоль разработчика (Shift+Ctrl+I) и киньте сюда или в личку (мне или автору расширения) ошибки, которые там имеются.
                                                          0
                                                          Вы знаете, а там только ворнинги (по поводу не секьюрного контента), ошибок нет в логе.

                                                          Но я понял как у меня это запустить: это возможно вручную, когда читаешь открытий материал у меня в 1 тайтле (там где звезда добавления в избранное) сразу после него, без пробелов, идет ссылка со словом «раскукожить». Эта ссылка не работает и клик по ней ничего не дает, но когда я нажимаю «особая магия» (причем до этого в режиме списка я тоже нажимал), появляется 2 ссылка «раскукожить», сразу после 2 тайтла (тот что в самом материале) и в данном случае расширение работает как надо.

                                                          Ну хоть проверил как оно, оказывается очень даже удобно, вот только бы исправить проблему и буду пользоваться с удовольствием.

                                                          P.S.: В итоге после моих действий в логе появилась такая ошибочка:

                                                          Unsafe Javascript attempt to access frame with URL https://www.google.com/reader/view/?tab=my#stream/feed%2Fhttp%3A%2F%2Fhabrahabr.ru%2Frss%2F684e44d01a9c46e9380a282201419cf9%2F from frame with URL habrahabr.ru/mob/post/101744/. Domains, protocols and ports must match.

                                                            0
                                                            2 ссылки «раскукожить»? Это очень странно. Скриншот можете сделать?

                                                            «Unsafe...» — это хабр пытается изнутри яваскриптом что-то делать. Видимо где-то в JS есть что-то типа window.top — в обычном режиме (простое окно/вкладка) — это ссылка на свое же окно, но так как микрохабр открывается во фрейме, то и действие пытается выполнять уже с родительским окном, то есть с ридером. Боюсь, что с этой ошибкой ничего не получится сделать.
                                                              0
                                                              Клик по 1 раскукожить, ничего не дает, по 2 соответственно открывается фрейм.
                                                              www.webpagescreenshot.info/img/42286-815201072155PM
                                                                0
                                                                Оказалось, что проблема состояла в том, что в разных режимах просмотра у ридера разная верстка. Код обновил: dl.dropbox.com/u/8480842/0.2.0_0.7z
                                                                  0
                                                                  спасибо вам, теперь все работает :)
                                                        +1
                                                        Воспользуюсь случаем, спрошу — Можно ли прикрутить сохранялку в pdf, для е-ридеров?
                                                          0
                                                          Мне кажется, что для этого лучше сделать отдельное расширение.
                                                          0
                                                          У меня не появилась магическая кнопка. МОжет, потому что я использую расширение Reader Plus?
                                                            0
                                                            А у меня не нажимается особая магия (.
                                                              0
                                                              У меня тоже не работает.

                                                              Win XP, GoogleChrome 5.0.375.126
                                                              0
                                                              У меня тоже не нажимается. Думал, что это из-за какого-нибудь расширения, но нет. Все отключил и всё равно не нажимается.
                                                                0
                                                                Случайно не в режиме «Список» смотрите?
                                                                  0
                                                                  Нет. В режиме «Расширенный.»
                                                                    0
                                                                    В консоли какие-нибудь ошибки есть???
                                                                    Консоль вызывается по Shift+Ctrl+I
                                                                    Если можно, скриншот ридера сделайте.
                                                                0
                                                                После общения с товарищем RubyRoid07 многое прояснилось. Цитирую:

                                                                Я добавил в код проверку на то, что RSS забирается с сайта habrahabr.ru — проверка ищет доменное имя хабра в имени канала — потому если открыть канал Хабрахабр, то все заработает.

                                                                Я уберу сейчас же эту проверку и попробую придумать что-нибудь другое.


                                                                Проверьте, возможно у вас именно эта ситуация. То есть откройте именно канал новостей с Хабра, не «Все записи», не папку какую-нибудь, а именно канал Хабра. При этом в адресной строке у вас должно быть что-то вроде такого: www.google.com/reader/view/#stream/feed%2Fhttp%3A%2F%2Fhabrahabr.ru%2Frss%2Fnew%2F

                                                                Сейчас я проверку убрал и artem_kovardin должен обновить расширение в скором времени.
                                                                  0
                                                                  Заработало.

                                                                  Только нажимать надо не в открытой записи в ридере, а на линк «раскукожить», который находится в заголовке еще не прочитанной записи.

                                                                  Нашел любопытное (я тестировщик, поэтому крепитесь).

                                                                  Оставил открытой вкладку с ридером.

                                                                  Удалил ваше расширение из Хрома.

                                                                  Вернулся на вкладку с ридером. Линк раскукоживателя есть, и работает.

                                                                  Но теперь каждое нажатие на линк «Особая магия» добавляет еще один линк «раскукожить» на страницу. Сколько раз нажмешь, столько дополнительных линков получишь :)

                                                                  Cкриншот события.
                                                                    0
                                                                    Кстати, если заходить в ридер через google.ru, то никакой «особой магии» не появится, как не крути.
                                                                0
                                                                Напомню, что читать в RSS полные тексты статьей (с хабра и не только) можно через RSS-farm или с feedburner. А на Yahoo.Pipes делают фильтры по темам.
                                                                  –1
                                                                  Аффтар не знаком с Google Chrome extension Reader Plus?
                                                                    0
                                                                    Уже знаком). Читайте комментарии выше.
                                                                      +1
                                                                      сорри =)
                                                                        0
                                                                        все равно это хороший опыт создания ext. :)
                                                                      0
                                                                      А кнопку «добавить в избранное» добавить нельзя?)
                                                                        0
                                                                        и правда, будет оч удобно :)
                                                                        +1
                                                                        Для firefox есть Better GReader — addons.mozilla.org/ru/firefox/addon/6424/
                                                                        Там имеется предпросмотр страницы (в настройках ставится) без всяких лишних вкладок и затемнений фона. Оригинал отображается прямо в синей рамке на месте обрезанного текста. Тут можно посмотреть, как это выглядит — habreffect.ru/files/3ab/4e21f7604/Снимок.png
                                                                          0
                                                                          Плагин обновился в галереи с некоторыми багфиксами. Кроме того, появился проект на гугл коде
                                                                            0
                                                                            И еще раз обновился
                                                                          • UFO just landed and posted this here
                                                                              +1
                                                                              Для откладывания «на потом» для различных браузеров есть «Read It Later!». Правда для Хрома он гораздо хуже, чем для Firefox.
                                                                                0
                                                                                Совершенно точно, очень удобный сервис. Тем более, когда вдумчиво хочеться почитать статьи не только с Хабра.
                                                                                0
                                                                                Да это то, что сделает меня чуточку счастливее!

                                                                                Спасибо большое!
                                                                                  0
                                                                                  У меня не работает, нету никаких кнопок «раскукожить» или «особая магия»… смотрю именно фид хабра… переустонавливал уже несколько раз… сначала пробовал на дев версии хрома, теперь на последней стабл версиии — эффекта 0

                                                                                    0
                                                                                    аналогично, магии нету
                                                                                    0
                                                                                    Вот скрин
                                                                                      0
                                                                                      Полную версию хабра можно читать с этого канала readbox.info/full-rss?sid=yqzs01zgi6
                                                                                      А тут можно создать другие полнотекстовые rss readbox.info/full_rss_feeds
                                                                                        0
                                                                                        А может расскажете чего readbox закрылся?

                                                                                      Only users with full accounts can post comments. Log in, please.