Funny Utility

Add pic to lolz as in a telegram

Сегодня будем встраивать функцию поиска картинок, как в телеграмме (ну, почти как в телеграмме)

Как это выглядит в телеграмме

Спойлер

Шаг первый

1. Ставим Tampermonkey по ссылке (для хром-браузеров
2. Устанавливаем скрипт Дополнение

Шаг второй

Для работы скрипта нам нужно получить API_KEY и CX_ID

Для начала получим CX_ID.

Поиск работает по Google, поэтому переходим на programmablesearchengine.google.com

Нас встречает эдакое диво-дивное

Что нас встречает

Нажимаем "Добавить"

Далее

Заполняем форму:
- Вводим какое-нибудь название нашей системы
- Ставим метку на "Поиск во всем интернете
- В настройках поиска включаем "Поиск изображений". Нам предлагает включить безопасный поиск, включаем по желанию (Со включённым безопасным поиском нам не будет показывать члены и сиськи и т.д. при поиске, наверное)
- Проходим капчу
- Нажимаем создать

Апосля появляется такое

Что же появляется?

Нажимаем "Настроить"

Спойлер

Копируем идентификатор поисковой системы и вставляем его в скрипт. Как это сделать? Вот так

Один

Тыкаем на расширение и переходим в "Панель управления"

Два

Тут тыкаем на кнопку "Править"

Три

Вот сюда его подставляем, между ' '

Шаг третий

Получаем API_KEY
Переходим на сайт console.cloud.google.com

Спойлер

Гугл слёзно умоляет нас выбрать страну и согласиться с условиями обслуживания. Выбираем страну. Я думаю не стоит выбирать Россию, поэтому выбрал Бермуды и всё таки согласился с условиями обслуживания

Спойлер

Ищем нужную штуку в поиске Google Custom Search JSON API

Находим её

Нажимаем Enable

Но не всё так супер просто

Мы нажимаем на Credentials и гугл снова нас умоляет настроить экран согласия OAuth, указав информацию о нашем приложении.

Спойлер

Нажимаем Configure consent screen

Ещё спойлер

Тут на "Get started"

Вводим всякую шляпу

Один

Два

Тыкаем на External, потому что другого выбора у нас нет

Три

И четвёртым шагом мы соглашаемся и нажимаем Create

После этого

Снова ищем Custom Search API и переходим. Нажимаем Manage и переходим в Credentials.

Если у нас не появилось меню выбора api

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

И уже тут

Нажимаем API key. Генерируется наш api_key, который мы копируем и вставляем в место API_KEY, как было с CX_ID

Шаг четвёртый

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

Что же получилось?

При вводе @ pic (вводим без пробела, в теме тегается чел) у нас появляется меню выбора картинок, практически как в телеграмме.

ОДНАКО, у нашего гугла есть ограничение в 100 картинок в день, т.к. мы используем бесплатную их функцию просто по приколу.

Есть реализация предпросмотра картинки, (более адекватный выход из предпросмотра - нажать esc).