0,0
рейтинг
15 августа 2012 в 15:15

Разработка → Кто вам отвечает в QA. Расширение для браузера

Рад представить вашему вниманию новую версию расширения для хабры (предыдущий топик), которое научилось показывать вопросы и ответы (QA), а также оповещать обо всех событиях в них.

И самое главное — теперь можно отвечать прямо в расширении, в том числе и в Опере.

Теперь можно создавать личную переписку и удалять её.

Исправлено много багов, сделано много улучшений и оптимизаций.


Самое основное нововведение в этой версии — можно отвечать из расширения, а также выполнять любые действия. Это получилось сделать через iframe. В Хроме это работает внутри расширения, а вот в Опере, из-за ограничений в её архитектуре (content-скрипты не внедряются в страницы, созданные внутри расширения), этот приём не работает, поэтому для Оперы это реализовано через любую открытую вкладку в браузере. Это необходимое условие для ответов в Опере, но так как обычно в браузере смотрят сайты, то это условие будет выполняться почти всегда на 100%. Из Оперы пообещали, что доработают этот момент к осени этого года.



Теперь в расширении можно видеть трекер, а также работать с ним. На текущий момент в нём только две вкладки — Посты и QA.

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

А вот QA — функционал конкретно расширения, он позволяет следить за любым вопросом — все уточнения, ответы и комментарии будут появляться в виде событий, а также в трекере рисуется количество этих новых событий в виде зелёных цифр с плюсом.



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



Это удобно тем, что будут видны только новые элементы, а те, которые уже прочитаны, будут скрыты. При этом новые комментарии всегда помечаются более тёмным фоном.



Из трекера можно одним кликом пометить как прочитанные все события данного вопроса — нужно нажать на красный значок «новое». Можно также перестать следить за вопросом, а если выбрать галку «удалить все события» при отписке, то все события будут удалены также.

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

Чтобы подписаться (или отписаться) на вопрос, расширение вставляет в страницу галку «следить через расширение» справа от панели. Эта галка находится как в самом вопросе, так и в любых списках, где есть QA.



Список ваших коммментариев и уточнений расположен в отдельной вкладке (на хабре нет данного списка). Расширение заботливо собирает и хранит все ваши комментарии и уточнения, которые он находит. В будущем реализую мгновенный надёжный сбор этой и любой другой добавляемой информации — в Хроме есть возможность перехватывать http-запросы.

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



При попытке ответить в QA можно выбрать три варианта, что конкретно сделать — уточнить вопрос, ответить на вопрос или комментировать ответ.



Создать новую переписку с юзером можно, если нажать на иконку папки с плюсиком во вкладке «приват-переписка». Нужно ввести название папки и текст.

Настройки разнёс по вкладкам и типам.
Добавленные настройки:
  1. Ограничение подгрузки и проверки трекера, страниц. Грузить только это количество страниц трекера для анализа.
  2. Периодичность пересканирования трекера, сек. Как часто будет пересканировать весь список вашего трекера (все страницы, а не только первую).
  3. Периодичность проверки трекера, сек. Как часто проверять на появление новых событий в трекере.
  4. Периодичность сканирования QA, сек. Как часто проверять прямой эфир QA на появление обновленных QA, где вы отвечали или комментировали. Желательно выставить не очень редко, ибо могут пропуститься ваши комментарии.
  5. Подгружать свои старые QA. Если включено, то будут подгружаться ваши старые QA-вопросы (у которых время создания раньше времени установки расширения).
  6. Ограничение подгрузки и проверки ваших QA-вопросов, страниц. Грузить только это количество страниц ваших QA-вопросов для анализа.
  7. Периодичность пересканирования собственных QA-вопросов, сек. Как часто будет пересканировать весь список ваших QA-вопросов на появление в них новых ответов. Сделано для того, чтобы всё же находить комментарии для вас, если через проверку прямого эфира они упустились — по причине закрытия браузера, отсутствия интернета и т.п.
  8. Ограничение подгрузки и проверки ваших QA-ответов, страниц. Грузить только это количество страниц ваших QA-ответов для анализа
  9. Периодичность пересканирования собственных QA-ответов, сек. Как часто будет пересканировать весь список ваших QA-ответов на появление в них новых комментариев. Сделано для того, чтобы всё же находить комментарии для вас, если через проверку прямого эфира они упустились — по причине закрытия браузера, отсутствия интернета и т.п.


Пока всё. Обновляйтесь через стандартную возможность браузера или ставьте расширение заново. Затем, если вам нужна старая информация и у вас безлимитный быстрый трафик, нужно в настройках везде проставить ограничение страниц на нули и включить все галки.

В ближайшем будущем буду заниматься разделом «События», буду улучшать трекер для постов (например, сделаю также как QA, чтобы можно было получать все новые комментарии в виде событий), сделаю голосование за комментарии и топики. Да и много других идей реализую в данном расширении.

Евгений Иванов @Methos
карма
51,0
рейтинг 0,0
Front-end developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (30)

  • +3
    Большое спасибо, уже давно пользуюсь, удобная вещь. А скрин хабровой панельки в середине топика ввел ненадолго в ступор :)
    • +1
      Обрезал картинку, расположил её справа, обновил топик.
    • +1
      Меня тоже это ввело в ступор, т.к. был мой ник :)
  • +2
    +1 (: отличный инструмент, рад наблюдать за его развитием.
    • 0
      Есть ли какие-то идеи для реализации?
  • +2
    Очень хороший инструмент. Спасибо за вашу работу!
  • +2
    Черт, сколько же у вас там кода! Не видел ещё таких сложных расширений. Грандиозная работа, спасибо!
  • +1
    Чуть-чуть не в тему, но… А расскажите о том как создавалось расширение, как проходит работа над ним. Хорошо бы отдельным топиком.

    К примеру, интересует:
    1. разработка началась с проектирования и составления плана, или сразу писать начали? Довольны кодом в итоге? Много приходится переписывать в процессе рефакторинга?
    2. как разделены обязанности между content scripts и background page, почему именно так?
    3. как вы выбирали между WebSQL и IndexedDB?
    4. пишете на plain javascript или используете что-то вроде coffeescript? Почему?
    5. есть ли unit-тесты? Если нет, то почему? А если да, то какой процент покрытия и чем тестируете?
    6. автоматическая сборка, например с make или grunt, или ручная?
    7. функционал как-нибудь разнесён на много файлов и в процессе сборки соединяется (для удобства разработки) или это изначально только несколько файлов?
    8. рассматривали ли возможность хранения настроек в chrome.storage.sync?
    9. планируете ли в будущем переход на event pages? Почему?

    И т. д.

    В общем, тема интересна с точки зрения разработки браузерного расширения и хотелось бы узнать о вашем опыте побольше. Поделитесь? :)
    • +2
      1. план, изучение, составление архитектуры. рефакторю когда необходимо.
      2. в основном back. content не нужен для ядра. он был введён недавно только для галки подписки в QA
      3. тогда ещё не было indexed, да и сейчас нет в опере и других. сначала вообще было localstorage =) но потом это начало тормозить и уткнулся в ограничение 5 Мб, поэтому перешёл на sql. просто сначала это было простенькое расширение для одного сайта, ничего серьёзного не планировалось.
      4. js + jquery. потому что достаточно.
      5. тесты есть, покрыто 100%.
      6. ручная на php. да там и собирать мало что нужно, только сжимается чуток
      7. разные файлы. но ничего не объединяется. но планирую (делать back.js вместо back.html). но это не сильно приоритетно.
      8. запросто. но не приоритетно
      9. если позволит логика расширения, то запросто. но сейчас вряд ли, ибо расширение постоянно собирает данные, каждую минуту. и запуск будет накладным и нагружать проц. но можно сделать в настройках, чтобы юзер сам выбирал. что ему нужно — экономить память или проц.

      отдельным топиком врядли, я довольно скромный человек (-:

      спасибо зв вопрос, задавайте ещё.
      • 0
        Я вообще «собираю» 7zip-ом. На вход ему файлик build-files.txt:
        config.xml
        index.html
        popup.html
        icons\*.png
        includes\*.js
        js\*.js
        css\*.css

        и простенький bat-файл:

        del extension.oex
        cd project
        ..\tools\7z.exe a -tzip ..\extension.oex @build-files.txt

        а разработка — в Sumlime Text.
      • 0
        Спасибо за ответы. Если можно, ещё парочка:

        Во-первых, интересен процесс тестирования: как (автоматически при сборке/сохранении, вручную) тестируете, что (все методы/функции или все, но кроме отвечающих за интерфейс) и чем (mocha, jasmine, buster.js, др.)?
        Ну, и, во-вторых, может есть какие-то трюки в работе над расширениями, о которых мало кто знает? Было что-нибудь такое, к чему пришлось идти самому? Любые странные, интересные моменты, подводные камни или может даже течения? :)
        • +2
          Никакие библиотеки для тестирования я не применяю. А просто добиваюсь того, чтобы программа работала правильно и без ошибок. Обычно это получается автоматически, ибо опыт в программировании с 1992 года. Но всегда при разработке применяю тестирование методом логирования.

          Насчёт трюков сложно сказать. Обычная программа с входными данными, обработкой и выводом на отображение.
          • 0
            Ясно. Большое спасибо за ответы. :)
            • 0
              на здоровье =))
              • +1
                Спасибо за ответы.
  • 0
    Methos, зачем вы запутываете/сжимаете код? Хотелось бы вынести что-то новое, не говоря уже что кто-то мог бы и внести что-то полезное.
    • +1
      Любой всегда может подать идею, которую я реализую в новой версии.

      А код сжимаю для того потому что стыдно показывать свой код %-)
    • –1
      Боже мой, Sublime Text — ставим плагин JSFormat — Ctrl+Alt+F — PROFIT!
      • +1
        И неужели вы поверили? Конечно, я пошутил.

        Обфусцируется для меньшего объёма, чтобы памяти меньше занимало и работало быстрее.
        • 0
          Ага, прям взлетит работоспособность от обфускации.
          • +1
            Пишут, что работает быстрее.

            The Closure Compiler in Advanced Mode actually makes JavaScript runs faster in mobile environments due to its industrial-scale optimizations. For example, in-lining of functions, virtualization of prototype methods, namespace folding, dead-code removal etc. will all make code run faster, so it is not only an obfuscator, it is an optimizing compiler as well.

            My own benchmarks runs code on the iPad around 10-20% faster, and 30% faster on the Android. Memory usage is also reduced.


  • 0
    Выпустил версию 1.405.

    Сделал возможность голосования за комментарии и за ответы.

    image

    А также показывает текущую карму комментариев и ответов.
    • +1
      Последнее предложение правильно звучит так — «А также показывает текущее состояние вашего голосования за комменты и ответы».
  • +1
    А можно сделать отключение мигания уведомления о новых событиях в настройках? Иногда отвлекает.
    • +1
      Это уже есть — нажмите на треугольник в правом верхнем углу popup-окна e-ivanov.ru/p/1470a37e193cd7c5ef3827d1c733.png

      Тогда мигать не будет.
      • +1
        Нет, чтобы хабр опрашивался и было видно количество новых событий. А если события из разных категорий, например, из постов и q&a, то появлялся значок уведомления какого-нибудь еще неиспользованного цвета без количества этих событий. Кстати, исправьте «запррашивать сервер» на том попапе.
        • +1
          ok, понял, внедрю.

          спасибо =)

          то есть, важно, чтобы не мигало?
          • 0
            Да, если можно будет отключать мигание — будет просто здорово.
            • 0
              Я выложил по тихому версию 1.501 пару дней назад, потому что пришлось в связи со сменой html на хабре, ибо делал в это время добавление нового функционала. Пришлось быстренько закрывать, тестировать, но вот что успел добавить:

              0. Добавлена настройка «не мигать». вы оцените.
              1. Подписка теперь тоже принимается
              2. Упоминания тоже принимаются
              3. Улучшена скорость работы popup-окна, перебрал весь код
              4. Исправил кое-кто в qa, в пометке о прочитанности с синхронизацией счётчиков в трекере
              5. Добавлены настройки по скачиванию «топиков», «вопросов» ,«событий». Они по умолчанию выключены, поэтому вам нужно их включить. Вообще настройки сбросятся в тихий режим, поэтому после обновления включите везде все галки. Также исправил пару багов связанным со скачиванием топиков.

              Сейчас уже дорабатываю «ленту».
  • 0
    В подписке добавил фильтр на разные типы событий, которые там показывать.

    Выглядит это пока вот так, checkbox:

    image

    То есть, если не хотите наблюдать, что же там добавили юзеры в избранное, то отключаете соотв. галку.

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

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