Гнев, торг, принятие. Добавляем GIF в блок комментариев DTF. Часть 2

Дратути! Вот и созрела вторая часть дневника разработки расширения для Chrome, которое (если я его не заброшу) добавит интеграцию GIPHY в комментарии DTF. В прошлом дневнике я научился отрисовывать кнопку на каждой страничке и подгружать заглушку по кнопке.

Сегодня будем облагораживать форму поиска гифок и постараемся получить результат запроса к API GIPHY.

Почитать можно туть:

Разработка не стояла на месте, поэтому у меня есть, что вам рассказать :)

По советам трудящихся поменял иконку на более нативную для DTF. Честно забрав её с мобильной версии:

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

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

Спустя буквально 30 минут, я спокойно родил нужные мне функции, немного повозившись с тем, как мне запихивать содержимое ответа в форму.

Оставлять необработанный массив гифок было не удобно, поэтому поигравшись с CSS, собрал всё в более приличный вид.

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

Ссылочка по клику добавляется, но дальше надо думать, как триггерить API DTF на загрузку этой сслылки :)

Демонстрация работы как обычно ниже:

До следующих дневников и хорошего вам дня!