Расширение, добавляющее кнопку dislike

в 6:55, , рубрики: chrome, opera, расширения, я пиарюсь, метки: , , ,

Всем привет.
В некоторых хабракомментариях писали, что мир однополярен: в социальных сетях вам может что-то нравится, а не нравится не может.
Я хочу рассказать вам о расширении для браузера, которое добавляет кнопку «dislike» или «мне не нравится».

Расширение, добавляющее кнопку dislike


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

Вкратце как это выглядит.

  1. Устанавливаем.
  2. Заходим на сайт соц. сети и видим окошко авторизации.
    Расширение, добавляющее кнопку dislike
  3. Можно либо разрешить авторизацию через соц. сеть, либо закрыть окошко, тем самым отключив поддержку этой соц. сети. Включить ее можно будет в настройках расширения.
  4. После авторизации расширение готово к использованию. Находим новую кнопку рядом с привычной «мне нравится».
    Расширение, добавляющее кнопку dislike
  5. В настройки можно попасть следующим образом:
    • Для Chrome: Tools -> Extensions -> Youhonest -> Options
    • Для Opera: Tools -> Extensions -> Manage Extensions -> Youhonest -> значок ключа -> Preferences

    Расширение, добавляющее кнопку dislike

Реализация.

У системы есть сервер со своим API. Сервер написан на PHP (+YII), использует MySQL и активно использует Memcached. Поддержка социальных сетей является модульной, то есть основная логика написана, для добавления новой соц. сети необходимо будет унаследовать нужный класс и изменить логику некоторых методов. Локализация реализована с помощью своего велосипеда, который позволяет иметь поддержку разных языков, разных версий языков (например en_GB, en_US), позволяет использование формы множественного/единственного числа перевода и замены в переводах (placeholders).

Основные проблемы, решавшиеся при разработке сервер-сайда:

  • Гибкость подключения новых модулей. Кажется, что проблема была более-менее успешно решена, т.к. реализация авторизации через Facebook заняла предельно малое время. В общем, время покажет.
  • Версионность API. Решилось созданием поддоменов на каждую новую версию. Сейчас, например, оба расширения работают с 002.youhonest.com, 001 считаем deprecated и выпиливаем его, когда все расширения обновятся.
  • Производительность. Нужно понимать, что если расширение установят большое количество человек, то запрос на выдачу dislikes будет дергаться с загрузкой каждой страницы у каждого пользователя. При этом набор страниц будет совершенно разный. Решалось хранением сессии в кэше (и по возможности кэшированием всего что возможно), расставлением индексов в БД, денормализацией таблиц (сложный момент – хранение количества кликов наравне с их авторами) и нагрузочным тестированием. Получилось ли? Не знаю, Хабрахабр покажет.

Расширения, конечно же, написаны на JavaScript + HTML + CSS. Расширения зачем-то используют jQuery (в какой-то момент мне показалось, что увеличится скорость разработки), выпиливать его уже является не совсем тривиальной задачей, однако это есть в планах. Расширения тоже написаны в стиле модулей, т.е. подключение новой соц. сети является подключением нового JS-файла, реализующего некоторый набор методов. Локализация реализована опять же на основе собственного велосипеда ради простоты переноса кода для другого браузера (да я знаю про i18n API). Язык элементов определяется либо языком браузера, либо настройками пользователя. Настройки кстати хранятся в WebSQL для Chrome (в планах – переделать) и LocalStorage для Opera.
Сначала было написано расширения для Chrome, потом оно было портировано на Opera.

Основные проблемы при разработке расширений:

  • Многообразие элементов верстки Вконтакте. К тому же во время разработки сайт выкатил новую кнопку Share, что частично поломало написанный код.
  • Поиск разработчиков расширений под Opera. Мне почему-то это не очень хорошо удалось. К тому же я сам никогда раньше не писал расширения под этот браузер. Поэтому есть ряд технический проблем, возникших при портировании:
    • Не самые приятные ощущения от DragonFly. Все круто, но не так удобно как Chrome dev tools.
    • AJAX запросы должны идти через background page и только так. В Chrome это не так, было бы круто предусмотреть это заранее.
    • Был использован WebSQL для Chrome, соответственно… переделываем.
    • Порядок подключения скриптов? О, эти странные Injected scripts. Подключение CSS? Еще веселее.
    • jQuery. Проблема в том, что jQuery доступна всегда через window.$, window.jQuery. В случае с Opera мы имеем не совсем тот window, что мы привыкли.
    • До сих пор нерешенная проблема сross-domain cookies. Подробности см. здесь
    • Ревью расширений для Opera. Хотя, это даже хорошо. В целом, я не уверен, что кто-то читал код, но хотя бы проверили функциональность. Ревью я прошел без проблем с первого раза.

Для разработки использовался SVN + Redmine. В разработке поучаствовало 4 человека.

В планах:

  1. Поддержка существующего кода
    • Отказаться от jQuery
    • Добавить поддержку анимаций Вконтакте, как это сделано для Like
    • (может быть) Оповещения как для кнопки Like
    • Исправление багов
  2. Поддержка браузеров
    • Safari
    • Firefox
    • (может быть) IE
  3. Поддержка социальных сетей
    • Facebook
    • (может быть) Google+
    • (может быть) что-то еще

Философия проекта.

Приложение не позиционирует себя как некий «сборник ненависти», оно лишь дает свободу выбора высказывать негативные оценки наравне с позитивными.

Все ли хорошо с юридической точки зрения?

Понятия не имею, в правилах Вконтакте явно не прописано запрещение на подобные приложения. Если у представителей Вконтакте есть претензии, пожалуйста, свяжитесь со мной.

Как помочь проекту?

Если вдруг такое желание будет непреодолимо, то, во-первых, спасибо! А во-вторых, помочь можно как всегда: морально, идеями, умными головами и прямыми руками, или donate. Все подробности на сайте проекта youhonest.com. Недавно, например, было очень приятно получить перевод на Польском для приложения от волонтера (перевод еще не включен в расширение).

Автор: theRavel

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js