"Расширение" для мобильного хром (ч. 2) / js

"Расширение" для мобильного хром (ч. 2)

Так как мой предыдущий пост не заминусили, а некоторые даже наоборот попросили рассказать подробнее. Я решил сделать второй пост. Думаю, он может быть интересен своим безумием (:

И так, в этот раз я на примере покажу как можно сделать "расширение", которое просто будет сохранять картинку с джоя в вашу телегу. Без своего сервера и для мобильного хром. Да, наверное, это не очень интересный пример, все таки пользы от этого расширения мало. Да и сделаю я его очень примитивно. Но это просто будет иллюстрация возможностей.

1. И так, как это сделать? Для начала нам нужно создать нового бота в телеграм. Это делается в боте https://t.me/BotFather , там все просто, в конце вы получаете токен для работы с HTTP API. Это то, что нам нужно. На скрине ниже токен закрашен красным.

2. После этого нам нужно написать сам код нашего расширения, это небольшой файл, с расширением .js и следующим содержимым:

{

let key = 'ВАШ_ТОКЕН';

let chat_id = 'АЙДИ_ЧАТА_КУДА_ОТПРАВЛЯТЬ';

function handleMjoy(){
document.querySelectorAll('.image:not([image-bokmarklet-handled])').forEach(i => {
createSendButton(i);
});
}

function createSendButton(target) {
target.setAttribute('image-bokmarklet-handled', 'true');
let b = document.createElement('div');
b.classList.add('image-bokmarklet-send-btn');
b.innerText = '>';
target.append(b);
b.addEventListener('click', () => {
b.classList.add('pressed');
let linkEl = target.querySelector('a');
let imgURL = '';
if (linkEl) imgURL = linkEl.href;
else imgURL = target.querySelector('img')?.src;
if (!imgURL) return;
let l = 'https://api.telegram.org/bot'+key+'/sendPhoto?' + new URLSearchParams({
chat_id,
photo: imgURL,
}).toString();
fetch(l).then(r => r.json()).then(console.log);
});
}

function initBookmarlet(){
console.log('IT WORkS!');
if (location.origin == 'https://m.joyreactor.cc') initMJoy();
}

function initMJoy(){
handleMjoy();
let css = `
.image[image-bokmarklet-handled] {
position: relative;
}
.image-bokmarklet-send-btn {
background-color: rgb(253 178 1 / var(--tw-bg-opacity));
align-items: center;
position: absolute;
top: 5px;
left: 5px;
width: 30px;
height: 30px;
justify-content: center;
cursor: pointer;
display: none;
}
.image-bokmarklet-send-btn.pressed {
background-color: rgb(141 141 141 / var(--tw-bg-opacity));
}
.image[image-bokmarklet-handled]:hover .image-bokmarklet-send-btn {
display: flex;
}
`;
document.head.insertAdjacentHTML('beforeend', css);
}

initBookmarlet();

}

Здесь обрамляющие весь код фигурные скобки важны, чтобы не возникало конфликтов с идентификаторами. В переменную key вам нужно подставить токен с предыдущего шага. А
chat_id мы получим на следующем шаге.

3. Теперь пришло время получить немного информации от нашего бота. Вы можете начать с ним чат и написать команду /ping . К сожалению, пока что он вам не ответит. Но это не проблема. Берем следующий код:

javascript:void(function(key) {

    let l = 'https://api.telegram.org/bot'+key+'/', U = URLSearchParams;

    fetch(l+'getUpdates').then(r => r.json()).then(us => {console.log(us), us.result?.forEach(u => {

        if (!u.message) return;

        let m = u.message;

        if (m.text?.startsWith('/ping')) fetch(l+'sendMessage?'+ (new U({

            chat_id: m['chat']['id'],

            reply_to_message_id: m['message_id'],

            text: 'message:' + JSON.stringify(m),

          })).toString());

    })});

}('ВАШ_ТОКЕН'))

И просто вставляем в адресную строку (да, это сработает). А лучше создайте сразу закладку с этим кодом вместо адреса. Только не забудьте начальный "javascript:" не может быть вставлен, только написан вручную. Ну и, конечно, не забудьте подставить ваш токен с первого шага. После этого ваш бот вам ответит. Его ответ будет в такой форме: message:{"message_id":14,...,"chat":{"id":АЙДИ_ЧАТА,"first_name": ...},...}

4. Теперь берем АЙДИ_ЧАТА из предыдущего пункта и подставляем в файл из второго пункта в переменную chat_id. Сохраняем файл и закидываем его в чат с нашим ботом. После этого пишем нашу команду /ping в ответ на сообщение с файлом. И опять запускаем код с третьего пункта. Бот нам ответит опять (при чем вероятно и на старое сообщение, это не беда). Находим его ответ на наш пинг с файлом и ищем в его ответе file_id (именно file_id, а не file_unique_id, это важно!).

5. Все, это последний пункт. Создаем новую закладку с таким кодом:

javascript:void(function(d, key, fid) {
    let l = 'https://api.telegram.org/bot'+key+'/';
    let f = 'https://api.telegram.org/file/bot'+key+'/';
    fetch(l+'getFile?file_id='+fid).then(r => r.json())
    .then(r => (console.log(r), f += r.result.file_path)).then( () => {
        let s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;  s.src = f; d.getElementsByTagName('head')[0].appendChild(s);
    });
}(document, 'ВАШ_ТОКЕН', 'file_id_ИЗ_ПРЕДЫДУЩЕГО_ПУНКТА'))

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

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

Мне нравятся всякие интересные решения, которые предполагают нестандартное использование разнообразных АПИ и технологий. Здесь я постарался на примере показать использование старых-добрых букмарклетов и Telegram Bot API очень неочевидным образом. Хотя, возможно, пример и не очень интересный из-за своей бесполезности.