TabSqueeze - мое первое расширение для Chrome

Я написал свой небольшой, но проект, которым каждый может пользоваться. Сейчас расскажу как это случилось.

После очередного письма из рассылки Толковый программист от Ивана, я попросил его придумать мне проект, который бы помог мне набраться опыта и положить что-нибудь к себе в портфолио. Спустя некоторое время Иван предложил мне написать приложение для хрома. Ниже рассказ о том, как я с этим справлялся.

Проект TabSqueeze - расширение для Chrome

Неделя первая

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

Иван передал мне прототипы расширения и сервера.

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

Но Иван объяснил мне как должно работать приложение:

1. Расширение отправляет данные открытых вкладок на сервер

2. Сервер рендерит страницу, сохраняет ее у себя в виде статического файла

3. Сервер отдает адрес страницы расширению

4. Расширение открывает эту страницу и закрывает все другие

Сперва я начал разбираться с расширением.

Раньше мне никогда не приходилось сталкиваться с api хрома и я даже не представлял как оно все работает. Но здесь оказалось все довольно просто. Мне нужно было только понять как и где смотреть вывод console.log, чтобы знать какие данные куда передаются. В прототипе расширения мне не пришлось много переписывать.

1. Поменял циклы for на map, потому что мне показалось, что так код будет понятнее.

2. Изменил отправку запроса через get метод на метод post

3. Поменял ссылки для запроса на локальный сервер localhost

Ну и для расширения главное нужно правильно составить manifest.js

Затем я приступил к серверу. Прототип был написан на koa.js. Это меня обрадовало, потому что я уже писал на нем проект на hexlet.

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

Здесь мне пришлось задержаться подольше, чем с расширением. Сперва я хотел вообще не брать существующий прототип сервера, чтобы было все как учил до этого: es6, babel, CI, eslint. Но по совету Ивана мы решили, что сейчас приоритетнее быстрее запустить проект и стал переписывать старый прототип.

1. Добавил роут для POST запроса, потому что подумал, что GET запрос может не вместить все данные если будет много вкладок.

2. Удалил существующую базу данных и обертку над ней и стал искать способы как рендерить страницу и сохранять ее в папке вместо того, чтобы отдавать ее браузеру. Когда нашел, я понял, как я еще глуп и сколько всего еще не знаю. Создал шаблон pug, подключил koa-pug, koa-static. Настроил все, теперь у нас страница сохранялась в папке и отдавалась пользователю.

3. Но файлик выглядел не красивым. И Иван спросил нужна ли помощь с дизайном. Я сразу подумал про bootstrap. Но Иван отмёл его из-за избыточности. Сказал мне, чтобы я написал свой style.css. С дизайном как видно в конечном результате у меня все плохо)

4. Во время написания html для генерируемой страницы я подглядел у расширения OneTab интересный метод получать иконки сайтов, который немного упростил мне работу. Нужно к ссылке “https://www.google.com/s2/favicons?domain=” приписать название домена.

5. Теперь нужно было решить, где хостить сервер. Я предложил heroku потому что приходилось с ним работать и Иван согласился. Но после загрузки файлов сервера на heroku я обнаружил, что он не позволяет хранить статичные файлы. Потому что после каждой загрузки dynos он приобретает вид того коммита, который мы на него запушили в последний раз. Тут опять Иван выручает и предлагает хранить все на Amazon S3. Я подумал про себя, ну вот очередная сложность, которая отодвигает запуск проекта. Начал читать документацию про S3 на амазоне, на heroku искал статьи в гугле, искал готовые модули для работы с S3. В итоге остановился на knox. Из всех у него было больше всего звезд на гитхабе и более понятное api по сравнению с официальным api sdk s3)

6. Опять оказалось, что загрузка на s3 это просто. Но тут столкнулся с тем, что у меня вкладка открывалась на 404 ошибке и я подумал о том, что у меня вкладка открывается раньше, чем данные загружаются на сервер, пришлось промисимизировать функцию загрузки файла на s3 и теперь все работает отлично.

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

Продолжение следует...

Неделя вторая

Иван сказал, что холодный запуск heroku это фигня и нужно деплоить наш сервер в другом месте. Сперва было выбран amazone lambda, но по мере прочитанной мною информации я понял, что lambda все равно имеет холодный запуск как и heroku в случае, если на сервер долгое время не поступали запросы.

Затем Иван предложил деплоить на scaleway. Потому что деплой на голый linux дал бы мне более полноценный опыт. А для большего удобства сказал, чтобы я это сделал с помощью ansible.

До этого я с ansible давно сталкивался только на хекслете. Но я его напрочь уже забыл и полез пересматривать. Параллельно с просмотром я сделал эккаунт на scaleway арендовал сервер и пробовал работать с ним через playbook и ad-hoc запросы. Сперва мне показалось, что все это довольно просто и ansible мне понравился.

По мере написания playbook’a я понял, что не все так просто, особенно для новичка и мне пришлось много гуглить, читать документацию и смотреть почему та или иная инструкция в плейбуке у меня не работает. Немного на практике разобрался в том, что такое nginix и для чего он нужен. Установка ноды мне далась не легко. Файлы сперва хотел копировать с компьютера сразу на сервер, но потом понял, что копировать рекурсивно с исключением некоторых директорий довольно сложно настроить в ансибле, и решил копировать файлы с репозитория. Но это тоже не так просто. Нужно настроить проброс ssh-agent

Хороший гайд можете прочитать здесь https://developer.github.com/v3/guides/using-ssh-agent-forwarding/

Вот такие вот две недели получились.