Карма-расширение для Google Chrome

    Привет всем!



    Сразу ссылка для нетерпеливых: http://bit.ly/habrauser

    Попап открывается по клику, перейти на страницу пользователя можно либо кликнув средней кнопкой (откроется в фоновом табе), либо на имени пользователя в попапе.

    Под катом же немного подробностей для интересующихся.

    Предыстория


    Я читаю хабр очень давно, примерно лет 6 и всегда он оставался для меня чем-то таким… высшим светом. У меня не было собственного аккаунта, так как регистрация была только по приглашениям, я никого не знал и потому чувствовал себя маленьким и незначительным.

    Однако однажды у меня накопилось кое-какое знание, которого в рунете у меня найти не получилось и я решил что это хороший повод попытать счастья на хабре. Меня восприняли тепло, хотя и не пылко. Инвайт я заслужил, знаниями поделился, ура! Я немного был удивлён, что голосовать могу только ограниченное число раз и потому появившуюся пару голосов я старательно припрятал.

    Шло время, статей становилось всё больше, я всё чаще читал хабр залогинившись. И тут я заметил, что голоса то мои пропали совсем. Мне стало грустно. «Откуда же люди берут свои голоса?», — подумал я. «Так много потрачено голосов к комментариям, к карме! А я вне этого потока, не могу даже лайк нажать!» И да, справку я в то время не читал =)

    Не так давно у меня появилась возможность опубликовать свой второй пост-перевод. Людей он несколько заинтересовал и я приобрёл немного положительной кармы. Спасибо! Вместе с tsvetkovpa мы разобрались как это всё устроено, покурили ман, я понял что количество голосов зависит от кармы и ограничение только суточное. Что ж, это проясняет!

    У меня начали появляться признаки тяжёлой хабразависимости.

    Хабразависимость


    Читать хабр я стал заметно усерднее. Даже большую часть комментариев читал, в трекер смотрел, голосовал. Однако кое-что меня очень сильно напрягало. Если за комменты можно голосовать так легко, то почему я не могу так же легко голосовать за карму? Неужели я должен переходить на другую страницу? Простите, это как-то не по-людски!

    Потыкал во все существующие расширения, нашёл что-то подобное, но оно оказалось карма-readonly, да и в целом как-то не зарадовало (автору без обид, это имхо).

    Может я и плохо искал, но тяга к изобретению велосипедов взяла верх.

    Велосипеды


    За пару вечеров я накидал рабочий код. Так как API у хабрахабра, кхм, скажем так, не очень богатое (единственное что удалось найти), то пришлось заиметь костылей. jQuery, on('click'), вуаля! Приходилось вытягивать страницу юзверя целиком через GET запрос (к слову, от этого никуда я не делся), кэшировать и вычленять куски хабраинформации самостоятельно, рукотворить стили. За карма-голосование на хабре отвечает функция, как вы успели догадаться, karma_vote() и ей очень уж нужен айдишник пользователя, который собственно нигде кроме как в этой функции и не раскрывается.

    Я нагородил классов, методов, аяксов и уже даже начал подумывать о backbone.

    Чуть позже я решил проверить кое-что: может обойдёмся без велосипедов? Раз уж я так много тяну, почему бы просто юзерхедер целиком и не вставлять? О, как замечательно получилось! А с этим и стили, и онклики, всё само подтянулось! Лепота, жаль только у хабра js не скомпонован, тянется кусками по требованию и стили/логика страницы пользователей только на этой странице и присутствуют. Ну да ладно, не проблема. Стилей там немного, я их банально стырил и подключаю через контент-ксс; код голосовалки решил просто заинжектить с самого же хабра в конец страницы.

    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = src;
    document.body.appendChild(script);
    

    Ха-ха! Недурно вышло!

    С этого началась оптимизация.

    Оптимизация


    Я выпилил все классы, всю самопальную вёрстку. Получилось настолько мало, что мне стало стыдно что ради этого я заставляю страницу лишний раз исполнять код jQuery. Сколько их там уже? Чёрт подери, неужели каждое расширение в хроме должно притягивать за собой jQuery? Может есть какая-то шаренная? Пора бы уже сделать её built-in! Конечно, можно обойтись и без неё, но не хочется.

    Да ещё и сам хабр использует jQuery! Но… а может это можно как-то использовать?

    Я немного покопал на эту тему интернет и понял, что таки нет, из общего у расширений со страницами лишь DOM и прокатиться на спинке загруженного хабром скрипта у меня не выйдет =(

    Ну да ладно, отойдём от контент-скриптов, что насчёт инжекта? Раз уж я могу трогать руками DOM, то почему бы мне туда просто не подпихнуть ядро расширения? А уж страница то его и запустит. Я попробовал:

    script.text = "console.log(jQuery().jquery);";

    Опа, работает! Избавляемся от jQuery в пакете, создаём лоадер и вот уже хабр заботливо исполняет мой код!

    (function (chrome) {
      var request = new XMLHttpRequest(),
        urlToMain = chrome.extension.getURL('js/main.js'),
        script;
    
      request.open('GET', urlToMain, false);
      request.send(null);
      script = document.createElement('script');
      script.type = "text/javascript";
      script.text = request.responseText;
      document.body.appendChild(script);
    }(chrome));

    Результат


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




    Спасибо что дочитали! Надеюсь, расширение пригодится ещё кому-нибудь кроме меня самого =)

    Приношу свои извинения тем кого засветил на скриншотах, мне нужны были подопытные! =) Подумал что хабр — страна всё-таки дружеская и свободная, но могу и замалевать, если очень мешает.

    Под конец хотелось бы задать хабракомьюнити пару вопросов:
    • Есть ли смысл переделать на ховер или лучше предоставить выбор?
    • Нужна ли возможность выбора контекстов подсветки? Например, «в комментах», «в сайдбаре», «автор поста»
    • Есть идеи, как не тянуть всю страницу пользователя целиком?

    Хорошего дня!

    Share post

    Similar posts

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

    More
    Ads

    Comments 29

      0
      Использую такое расширение. Пользуясь случаем, хочу еще раз поблагодарить его автора.
      Из недостатков: при открытой странице Q&A браузер фризится на время подгрузки кармы/рейтинга всех пользователей, которых видно на странице.
        0
        Да, я его упомянул, жаль что Вы не дочитали. Оно послужило стимулом.
          +1
          Перед голосованием за карму, предпочитаю ознакомиться с вкладкой «его» в профиле. Посему, каюсь, читал не внимательно, хоть и всё.
          Ссылку оставлял не вам, а для тех кто еще не пользуется расширениями, для ознакомления.
            0
            Верный способ =) Спасибо за дополнение, пусть и для тех кто начал с комментов =)
        +5
        Могу предложить способ, как получать доступ к глобальной области видимости:

        var unsafeWindow = this.unsafeWindow;
        (function () {
            var test_scr = document.createElement("script");
            var tid = ("t" + Math.random() + +(new Date())).replace(/\./g, "");
            test_scr.text = "window." + tid + "=true";
            document.querySelector("body").appendChild(test_scr);
            if (typeof(unsafeWindow) == "undefined" || !unsafeWindow[tid]) {
                if (window[tid]) {
                    unsafeWindow = window;
                } else {
                    var scr = document.createElement("script");
                    scr.text = "(" +
                        (function () {
                            var el = document.createElement('unsafeWindow');
                            el.style.display = 'none';
                            el.onclick = function () {
                                return window
                            };
                            document.body.appendChild(el);
                        }).toString() + ")()";
                    document.querySelector("body").appendChild(scr);
                    this.unsafeWindow = document.querySelector("unsafeWindow").onclick();
                    unsafeWindow = window.unsafeWindow;
                }
            }
        })();
        


        В переменной unsafeWindow у вас будет window страницы — с доступом ко всем ф-циям и переменным/свойствам.
          0
          Интересно, спасибо, возьму на заметку
            0
            Не за что) Сам периодически «допиливаю» интернет под себя. Поэтому пришлось изобретать такие хаки.
            0
            Есть ещё один готовый велик (в конце статьи). :)
            +8
            Если за комменты можно голосовать так легко, то почему я не могу так же легко голосовать за карму?

            А на самом деле, не задумывались, почему?
              0
              Да, Вы, пожалуй, зрите в корень. Спасибо
              +7
              6 лет назад свободная регистрация была, без всяких приглашений.
                0
                Значит, приврал =) Я, к сожалению, точно не помню, что было в то время. Наверное, мне только тогда захотелось аккаунта, когда уже было закрыто.
                0
                Не работает что то Ваш продукт.
                  0
                  Вот наблюдаю в консоли:
                  Failed to load resource http://habrahabr.ru/js/1348234958/adriver.core.2.js
                  Uncaught ReferenceError: adriver is not defined /post/151589/#comment_5160641:114
                  

                    0
                    Заработало. ADBlock мешал.
                  –4
                  HabraKarmaView — могу показаться неоригинальным, но порядка года уже существует решение не только для Хрома, но и всех остальных браузеров (кроме ИЕ). Раньше оно было только по ссылке с одной статьи на Хабре, потом дошли руки допилить под новую вёрстку и разместить на USO. И основано оно было на чьём-то другом решении, которое работало не на всех браузерах. А порядка полгода вполне обходился без него, используя возможность HabrAjax открывать персональные страницы пользователей в фрейме половинной высоты (тот же вьюер плюс просмотр всех сведений о юзере плюс действия, не переходя к другой вкладке). Но разница есть — фрейм открывается секунды за 3, а вьюер — за 0.5-1 с. и простым наведением.
                    –3
                    Кроме того, по клику на блоке можно зафиксировать на экране блок с показателем кармы, чтобы сравнить сразу несколько (пользоваться не приходилось, но заложено). Пример можно увидеть на картинке, справа.

                    И если не прошло минуты с момента прежнего просмотра, значение берётся из запомненного — это и ускоряет показ, и не создаёт лишних обращений к серверу.
                    А вот пример того, как HabrAjax показывает фрейм половинной высоты (в данном случае Firefox, но не принципиально). Использована данная статья и ссылка на автора, которую HabrAjax дублирует справа вверху. По наведению на ссылку срабатывает попап HabraKarmaView, а по клику раскрылся фрейм внизу. Как видим, без особых заморочек со скриптами и обрезанием информации, просто и бесхитростно видим всю страницу пользователя с полосой прокрутки, поэтому проголосовать можем, ознакомившись с пользователем и его личными страницами — в этом же фрейме легко провести навигацию по его статьям и комментариям.
                    (38К по ссылке)
                    Если бы ссылка была в нижней половине страницы, фрейм раскрылся бы в верхней половине, поэтому он не закрывает и той информации, из-за которой появилось желание зайти на персональную страницу. Прокручивать можно как фрейм, так и исходную страницу независимо — фрейм фиксирован в окне, не скрывается из виду, пока его не закроешь крестиком или кликом ещё раз по той же ссылке, по которой он появился. Но даже если эта ссылка ушла из поля зрения, 2 клика по другой ссылке на другого юзера скрывает этот фрейм.
                    0
                    Вот зачем стимулировать задротство на хабре? За комментарии вообще не принято карму полировать. Комментарий — это мнение автора. Вы его ни кармой, ни чем другим не исправите. Только самомнение задротов тешить, ибо только они за комментарии бегают в карму срать. Карма, это оценка полезности автора. То есть какие он пишет посты и т.д.
                      +1
                      Я не призываю никого использовать моё расширение и устраивать апокалипсис на хабре.
                      Я делал его в первую очередь для себя и подумал что может быть кому-нибудь из хабрасообщества тоже будет удобно.
                      И мне жаль, что это воспринимается как стимуляция задротства.
                      +1
                      Спасибо, интересное расширение.
                      На ваши вопросы:
                      1. Субъективно, hover был бы удобнее, а по клику лучше оставить привычное открытие «хабрацентра».
                      2. Что вы имеете в виду под «контекстами подсветки»? Если возможность «подсвечивать» автора поста в комментариях — было бы здорово!
                      3. У вас простой и надежный вариант, и пока нет API на этот случай — это лучшее.
                        0
                        Спасибо за отзыв!
                        1. Да, я думаю о том чтобы сделать это в будущей версии, пока не понял.
                        2. Позволить пользователю выбирать где будет триггериться попап. Забудьте, видимо, это всё-таки будет лишним =)
                        Но то что вы предложили — положительная идея! Либо добавлю в это расширение, либо сделаю отдельное.
                          –1
                          А что, у Вас в комментариях не подсвечивается??? Только автор статьи? У меня сопровождается подсказками всё, даже ссылки на юзеров в тексте и в текстах, загруженных по аяксу (статьи и комментарии).
                          Но показывать по наведеню лучше с некоторой задержкой порядка 600 мс.
                          По п.3: как некоторый вариант ускорения — можно загружать страницу, но не рендерить её (только парсить).
                          А вообще по идее — я не стал устраивать такое, потому что это несколько неправильно — давать избранным лёгкий способ доступа к «этому абстрактному показателю».
                            0
                            Так и должно быть =) Я имел ввиду возможность настройки этого поведения.
                            Задержка, естественно =)
                              0
                              Почему должно? Ради 1 автора держать (и составлять) скрипт, в то время как десятки комментаторов вокруг и вскользь упомянутые юзеры простаивают без дела? :) Вот поэтому для них нужен просмотр. Например, для ответа на вопрос: кто это — тролль или он всерьёз так написал (в комментарии)?
                                0
                                =) У нас недопонимание.
                                Попап сейчас должен появляться при клике на всех пользователях, кроме упоминаний юзера в посте/комментарии и всех юзеров в сайдбаре справа.
                                  0
                                  То есть при клике на любом авторе чего-либо вы увидите попап
                                    0
                                    Хм, тогда понял, ввело в заблуждение высказывание другого комментатора — «Если возможность «подсвечивать» автора поста в комментариях — было бы здорово!». Наверное, имелась в виду настоящая подсветка, а не всплывание попапа рядом с ним.
                                      0
                                      Да, тут он имел ввиду настоящую подсветку цветом и я решил что могу добавить это в расширение или сделать новое =)
                                      А у Вас и правда уже подсвечивается? Какое-то расширение используете? Или Вы говорили про попап?
                                        0
                                        Нет, я говорил о подсветке в переносном смысле. Наводишь на имя — вылезает рядом попап (скриншоты выше). Почти как подсвечивается. Расширение HabraKarmaView.

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