×Закрыть

DOU Проектор: tabXpert — Chrome-расширение для эффективного управления вкладками

В рубрике DOU Проектор все желающие могут презентовать свой продукт (как стартап, так и ламповый pet-проект). Если вам есть о чем рассказать — приглашаем поучаствовать. Если нет — возможно, серия вдохновит на создание собственного made in Ukraine продукта. Вопросы и заявки на участие присылайте на editors@dou.ua.

Всем привет! Меня зовут Андрей Кияновский, и я активный пользователь интернета с тех пор, когда он был еще по модему, а знакомство с владельцем BBS-борды считалось за привилегию. Свою первую серьезную программу я написал в школе на СМ-2М (это компьютер размером с комнату). Потом работал девелопером, системным администратором, бизнесменом, менеджером проектов и сейчас зарабатываю на жизнь как certified Atlassian administrator. Оглядываясь назад и сравнивая удовольствие от работы девелопером и головняк от работы менеджером, решил заняться проектом tabXpert — расширением для управления вкладками в браузере. Проект появился частично как ностальгия по программированию, а частично как попытка сделать работу таких же людей, как я, проводящих всю жизнь за компьютером, немного более эффективной.

Идея

Вы наверняка сталкивались с затрудненной навигацией в браузере из-за большого количества вкладок, проблемами при падении браузера, потерей времени на поиск в истории или управление закладками.

На рынке уже существует несколько расширений для Chrome, пытающихся упростить жизнь активного интернет-пользователя, так или иначе сохраняя состояние вкладок и окон браузера. Просмотрев существующие предложения, такие как OneTab, Session Buddy, Tabs Outliner, я понял, что в этом «так или иначе» и есть основная загвоздка. Мой идеальный менеджер вкладок должен уметь:

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

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

Реализация

Скоро сказка сказывается, да не скоро дело делается. Я был очень наивным, полагая, что смогу осуществить этот проект за три-четыре месяца и $15-20К денег. Уже прошло полтора года и бюджет превышен многократно. Начинал я один, потом нашел частного инвестора, и теперь у нас есть еще один девелопер.

Давайте остановимся на трех основных задачах, которые заняли больше всего времени:

  • синхронизация в реальном времени;
  • устойчивость к перезапускам и падениям браузера;
  • быстрый и, надеюсь, удобный UI.

Синхронизация в реальном времени

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

Состояние окна с другого компьютера не получится просто «применить» в силу асинхронности событий, необходимо объединять изменения на уровне вкладок. Но как понять, с какого компьютера состояние вкладки более новое? Идея использовать время обновления вкладки сразу отпала, потому что при загрузке браузера вкладки сразу обновятся и изменения с удаленного компьютера не будут применены. Дабы не изобретать колесо, мы решили реализовать three-way merge, как сделано в Git. Перед перехватом управления над окном другого компьютера, состояние окна сохраняется как родительское (как ветка в Git). При сравнении двух разных «версий» одного окна легко определить какая вкладка изменилась, сравнивая ее состояние с родительским. В редких случаях конфликта открывается дополнительная вкладка, так что пользователь гарантированно ничего не теряет при синхронизации.

В процессе тестирования мы столкнулись с проблемой зацикливания синхронизации в случае, если одно и то же окно активно на двух компьютерах и вы авторизуетесь на каком либо сайте. Так как на втором компьютере авторизации нет, это приводит к редиректу на страницу авторизации, что на основном компьютере приводит к редиректу на основной URL и так по кругу. Хотя мы и решили эту проблему для большинства случаев путем введения ограничения на обновление состояния вкладки в DB, для надежности была добавлена опция, которая просто закроет окно, если вы его обновите на другом компьютере. Это не только самое надежное решение, но и правильное — люди около второго компьютера вряд ли обрадуются, если он внезапно начнет издавать звуки.

Для хранения данных на клиенте (Chrome под Windows, macOS и Linux) была выбрана база данных NoSQL PouchDB (хранилище на IndexedDB) — тонкий клиент для сервера на CouchDB, сильной стороной которой является синхронизация данных. База данных работает в Worker, чтобы не замедлять UI.

В настоящий момент синхронизация еще в разработке, надеемся выпустить ее осенью 2018 г. Синхронизация будет платной (локальная версия полностью бесплатная, без рекламы и каких-либо других способов монетизации).

Устойчивость к перезапускам и падениям браузера

Для избежания появления дубликатов сохраненных окон после перезапуска браузера, tabXpert должен уметь сопоставлять окна между разными сессиями, когда включена опция Chrome, «запускать ранее открытые вкладки». Не существует простого способа сопоставить окна в разных сессиях — не сохраняется ни id вкладок, ни id окон. Решили считать хеш по URL вкладок и по его значению сопоставлять окна в разных сессиях. Так как запись в DB производится только в idle режиме (для оптимизации), мгновенное сохранение состояния окна, включая хеш вкладок, происходит в local storage, который достаточно быстрый и не сохраняет историю.

Основная сложность оказалась в том, что существует множество ситуаций, когда Chrome восстанавливает вкладки окна частично или добавляет новые, например:

  • вкладки могут не восстановиться, если они загружались в момент завершения работы браузера или при его падении;
  • вкладки могут добавляться при старте и при восстановлении после падения браузера;
  • chrome:// вкладки теряются, если открыть ранее нормальное окно в инкогнито-режиме.

Для решения этой проблемы tabXpert производит сопоставление окон старой и новой сессий, учитывая все возможные изменения. Для каждого окна вычисляется два вида хеша — постоянный для данных, сохраненных в DB, и мгновенный для текущего состояния, сохраненного в local storage. Также в local storage хранится два состояния окна — текущее и предыдущее, так как иногда Chrome успевает сохранить новое состояние в local storage, но восстанавливает при этом предыдущее состояние. Для окна, которое надо сопоставить после перезапуска браузера, хеш просчитывается для всех возможных вариантов изменений. В случае частичного сопоставления, tabXpert восстанавливает недостающие вкладки. Для синхронизации текущего и сохраненного окна используется тот же механизм, что и для сетевой синхронизации.

Интерфейс пользователя

При написании UI мы прошли через Angular, Vue и остановились на React. Angular оказался слишком тяжелым для относительно простого интерфейса. Vue не сильно распространен, и специалистов по нему я не нашел. В общем проблему выбора окончательно решило наличие опытного девелопера, который смог решить все вопросы с использованием React.

Клиентская часть расширения работает на связке React + Redux. За сборку проекта отвечает Webpack, а транспиляцией самых свежих конструкций JavaScript в рабочий код занимается Babel. Часть ошибок в коде превентивно ловим инструментом semistandard.

Каскадные таблицы стилей написаны на любимом многими SCSS, реализация тем оформления — на Styled Components. Из коробки доступны две цветовых схемы: светлая и темная.

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

Для реализации большинства элементов интерфейса используем библиотеку компонентов React Material UI. С решением проблемы медленного рендеринга больших списков нам помогла библиотека React List. Многоязычность реализована с помощью компоненты react-i18next.

Расширение имеет два режима работы: в обычной вкладке и в попапе, всплывающем при нажатии на иконку расширения на тулбаре Chrome или по горячей клавише. Для устранения постоянной подгрузки и моргания favicon (в DB хранятся только URL) мы реализовали кэширование и храним их памяти в виде data URL. Для поиска по вкладкам используем Elasticlunr.

Для ускорения скорости загрузки попапа мы используем server-side rendering, генерируя HTML-разметку для попапа в фоновой странице каждый раз при изменении данных активного окна. Благодаря этому экран попапа отображается практически мгновенно, после чего подгружается основной скрипт, который добавляет интерактивность.

Результат

Главный эффект от использования tabXpert — это значительная экономия времени, потому что вместо управления вкладками вы начинаете управлять темами (окнами браузера), остальное берет на себя tabXpert. Таким образом, вместо открытия большого количества вкладок в одном окне, вы просто открываете новое окно для новой темы. Когда вы закончили работать с темой, вы закрываете окно. Когда хотите продолжить — открываете и продолжаете, все изменения будут сохранены в этом же окне и вам для этого ничего делать не надо, все происходит автоматически.

Когда вы работаете с несколькими окнами, возникает необходимость быстрого переключения между окнами, например прочитать почту или посмотреть перевод слова. Вы можете назначить горячую клавишу на вкладку (до 9 штук), быстро на нее переключиться и вернуться назад по Alt-0. Это чрезвычайно удобно.

tabXpert также поможет решить проблему нехватки памяти при большом количестве открытых вкладок. Уже существует достаточно популярное расширение The Great Suspender, которое автоматически замораживает неиспользуемые вкладки, выгружая их из памяти (и загружая, когда вы возвращаетесь на эту вкладку). tabXpert понимает, когда вкладка заморожена, и запоминает ее состояние. В следующий раз, когда вы открываете сохраненное окно, tabXpert загружает вкладки в том состоянии, в котором они были на момент закрытия окна. Таким образом, вы не только экономите память, но и время, так как окно с замороженными вкладками восстанавливается гораздо быстрее, чем в обычном режиме.

Мы серьезно относимся к приватности. Во-первых, расширение не имеет доступа к данным на вкладках, только к состоянию вкладки. Во-вторых, кроме обычных окон, которые будут синхронизироваться с облаком, существует локальный тип окна, который не синхронизируется с облаком (и хранится в отдельной DB), и секретный тип окна, которое вообще не сохраняется в DB. В-третьих, данные, передаваемые в облако, будут зашифрованы ключом, сформированным от пароля пользователя и случайной соли. Таким образом, данные пользователя не будут скомпрометированы даже в случае взлома облака.

Следующий минутный проморолик показывает основную идею tabXpert в действии:

Также есть много других возможностей, таких как перетаскивание вкладок между окнами, разъединение и объединение окон, открытие нормального окна в инкогнито режиме и наоборот, тип секретности по умолчанию для инкогнито-окон, светлая и темная темы, быстрое отключение звука, экспорт и импорт, включая импорт из OneTab и Session Buddy. Есть также возможность быстро скопировать HTML-ссылку вкладки (название и URL одновременно) для того, чтобы вставить ее в письмо или документ, как например эта ссылка, по которой вы можете скачать tabXpert и попробовать его в действии: tabXpert — Chrome Web Store.

В ближайших планах у нас:

  • синхронизация с облаком;
  • промосайт;
  • дополнительные языки.

Также я подумываю об интеграции управления закладками прямо в интерфейс tabXpert.

А что было бы интересно вам? Пишите в комментариях ваши впечатления. Буду рад ответить на любые вопросы.

LinkedIn

44 комментария

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

tabXpert теперь поддерживает синхронизацию с облаком в реальном времени.

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

В документацию (goo.gl/2X8h2K) в «Часто задаваемые вопросы» добавил пункт зачем tabXpert требуется столько разрешений. При разработке расширения все требуемые права надо указывать сразу, иначе потом при добавлении Chrome отключает расширение и требует подтверждение у пользователя.

Віртуальні робочі столи дозволяють розділити всі програми за темами. Але нема синхронізації різних пристроїв і збереження.

В данном случае с Chrome мы уже имеем как бы виртуальные рабочие столы — окна браузера, а теперь tabXpert позволяет легко с ними работать и синхронизировать между компьютерами (в планах).

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

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

Александр, только что залил новую версию 0.6 в которой есть возможность указать позицию при перемещении вкладок внутри окна или между окнами. Спасибо за фидбэк!

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

Желания пользоваться — не возникло, пусть оно и «решает проблему» (насколько я понимаю, без закапывания в детали) А так, у меня лиса вторым окном с рабочим чатом на втором мониторе висит. И бесит, что не могу альтабаться между вкладками хрома (а если разделить на два окна, то можно потом забыть, не так закрыть и потерять привычный расклад закрепленных).

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

Вот ты это будешь объяснять каждому пользователю персонально?)) Вспомни сериал Силиконовая долина где они пользователей учили пользоваться приложением. Продукт должен говорить о себе сам. То что я вижу — пока «немое». После установки расширения у меня нет в голове «ментальной модели» — «а как я вот этим пользуюсь и получаю выгоду/решение моих проблем».

Это серьезный вопрос.

У меня в голове тот ж самый момент из Силиконовой Долины — надо вводит в дело Табыша )). Да, продукт сырой в том плане, что после установки нет хотя бы простого тура, который бы объяснил как им пользоваться, а модель действительно новая, этой модели ни у кого в голове нет. До tabXpert открывал два окна по кол-ву мониторов и возился с закладками и историей. Теперь я не могу представить как я бы работал без него.

Как ты думаешь, кроме вводного тура при установке расширения, как можно еще помочь объяснить основную идею?

Мне всегда сложно было даже для себя объяснить основную идею tabXpert в одном предложении. Вероятно, надо позиционировать tabXpert не как tab manager, а как window manager и основной упор надо делать именно на это.

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

screenpresso.com/=LLHFe

Специально сейчас посмотрел — открыто одновременно 5 разных окон 1) основное — почта, словари, linkedIn 2) tabXpert dev 3) tabXpert PR 4) по основной работе 5) окно с курсами от Google на втором мониторе. Во всех окнах около 50 вкладок, но в одном окне в среднем около 10. Если бы все было в одном/двух окнах, то я бы с трудом мог найти что-то, не говоря о том, чтобы быстро закрыть одну тему и восстановить другую.

Дмитрий, в ответ на ваш отзыв в Chrome Store:
1. Мне жаль, что tabXpert удалил окна. Вероятно, это были безымянные окна и срок удаления стоял 14 дней. В следующей версии это будет отключено по умолчанию.
2. Я проверил support@tabxpert.com с четырех разных email — мне дошли все письма. Что вы имели ввиду когда говорили что почта не работает?

screenpresso.com/=l4fBf

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

У вас на скрине неправильный адрес support@tabxeprt, тогда как правильный support@tabxpert.com. Подскажите, пожалуйста, откуда вы его копировали? Может где-то опечатка, потому что в меню оно указано правильно: www.screencast.com/t/dWpPFezsn

Уже не подскажу, не помню, и не вспомню. Но это было копи через контекстное меню (в ручную я его точно не набирал).

Имеет смысл держать реестр всех месторасположений e-mail(ов), тогда проще отследить.

Вы копировали его из FAQ, пофикшено, спасибо.

естественно безымянное, нафиг мне его именовать. Нигде нет ни намека на то, что от имени что то зависит. Главное правило — не заставляйте пользователя делать «лишнии» действия.

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

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

Спасибо, но нет. Я уже сменил свой набор «привычек». Еще раз менять не буду. )

А хіба Chrome так не вміє? Навіть здається Firefox може...
Вкладки можна синхронізувати якщо залогінитись, і потім дивитись, що відкрито на кожному пристрої включно з мобільними і планшетами (з плагінами так не вийде).
Щодо крешів, то Chrome пропонує при вікритті відновити вкладки, якщо не пропонує — натискаєш Ctrl+Shift+T — і все.

Що я пропустив?

p.s. очікував, що плагін вміє щось як gettoby.com

Владимир, спасибо за коммент, попробую объяснить.

1. Toby — это просто bookmark manager, в котором вы руками организовываете вкладки и потом их все сразу можете открыть. Это то же самое, что сделать папку в Bookmarks и потом открыть все вкладки, только UI другой. tabXpert — это принципиально другое, т.к. он сам автоматически запоминает состояние всех открытых окон и в любой момент вы можете его закрыть и потом открыть хоть на этом компьютере, хоть на другом компьютере. При этом кроме того, чтобы дать имя окну, больше ничего делать не надо — вы всегда сможете продолжить с того места, где остановились.

2. Да, закладки (bookmarks), история и даже текущие вкладки синхронизируются хромом. Но если вы работали на какой-то темой несколько дней назад, то вы просто устанете искать это в истории. В tabXpert вы двумя нажатиями мыши открываете окно и продолжаете работать ровно в том месте где остановились, даже если оно было создано год назад.

Например, у меня есть 1) основное окно, где у меня почта, словари, и т.п. 2) несколько окон с tabXpert по разным темам 3) окно с видео 4) окно с обучающими курсами и т.д. Как только мне надо вернуться к этой теме, я открываю окно и работаю. Не надо — закрываю. Я всегда вижу историю закрытых вкладок в этом окне и с помощью tabXpert (ну или alt-tab) легко переключаюсь между активными окнами/темами.

С tabXpert меняется полностью парадигма — вместо работы в одном окне с кучей вкладок, вы начинаете работать с несколькими окнами, где каждое окно — своя тема. К этому надо привыкнуть, но потом вернуться в одно окно будет сложно.

Більшість речей які мені потрібні, я просто тримаю в нотатках, або ж вони легко «гугляться». Навіть якщо це якісь внутрішні посилання — зазвичай хром їх знаходить через autocomplete.
Якщо назбирувати сотні вкладок — починається проблема з цим працювати, бо воно не поміщається в голові.

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

Не можу зрозуміти для чого постійно мати більше одного-двох вікон, є вкладки?
Якщо є більше — це зазвичай тимчасово.
Якщо ви не можете швидко нагуглити ваші курси чи відео, то їх можна додати в закладки...

Можливо я не до кінця розумію проблему, чи хтось з нас не вміє «готувати» вкладки, можливо це просто занадто суб’єктивна штука :)

Если одним словом — то так быстрее, если подробнее:
1. Все вкладки не помещаются на одном/двух окнах. Когда их много, сложно искать. Темы перемешаны.
2. Одно окно/тема включает сразу много вкладок и открывать их все руками долго, когда надо вернуться к этой теме.
3. Когда я смотрел что-то на основном PC а потом пошел домой и хочу продолжить — мне надо сидеть и вспоминать а что я там искал и пытаться найти.Или добавлять закладки.
4. История гугла общая, мне иногда надо посмотреть что именно было по этой теме.

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

Невже у вас аж настільки багато тем? І кожна з них потребує великої кількості вкладок?

Але вона не може коштувати

три-четыре месяца и $15-20К денег

Суб’єктивно це занадто багато за інакший формат управління закладками :-)

У пользователей OneTab и Session Buddy суммарно около 3 миллионов пользователей и эти расширения пробуют решить эту же проблему. Другой вопрос — как заработать миллион пользователей )

Установил. А на чем Вы зарабатываете?

Монетизация будет на синхронизации с облаком, платная подписка.

А сейчас разве не синхронизируется? Настройки же есть такие.

Если вопрос по синхронизации в tabXpert — нет, сейчас данные с облаком еще не синхронизируется, еще в разработке.

Так вроде гугл объявил что будут убирать разширения для браузера?)

Вроде как приложения (Application) будут убирать, расширения оставят.

И как тогда с глиффи работать отдельно от Конфлюенса?

А там нет web версии? Возможно они попали тогда, я просто не работал с глиффи. Вообще любой, кто связывается с Google, рискует серьезно попасть. Google может закрыть твое расширение/аппликуху без объяснения причин невзирая на кол-во пользователей. При этом чего-то добиться от них невозможно — с той стороны идут шаблонные овтеты от робота. Таких случаев много.

Есть, но она ожидаемо лагает при редактировании больших схем. Печаль-беда прям (

Подписаться на комментарии