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 очень неочевидным образом. Хотя, возможно, пример и не очень интересный из-за своей бесполезности.

"Расширения" для мобильных браузеров

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

Например, у меня есть расширение для вставки скопированной картинки в инпут (то есть, мне не нужно, чтобы сайт реализовал вставку, а я на любом инпуте могу вставить скриншот или скопированный файл картинки или даже картинку по ссылке). Это очень удобно. Есть сжиматель картинок (часто на сайтах есть ограничение в максимум 2мб) и конвертер в jpg. Или, например, недавно пропал нормальный поиск других размеров картинки в гугл и я сделал для себя поиск в бинг в контекстном меню. У меня есть логирование в гугл таблицы по нажатию кнопки и отправка разных сообщений в телеграм. И еще куча других процессов рабочих у меня построено на расширениях.

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

В хроме можно добавить кнопку домой рядом с адресной строкой. На эту кнопку можно навесить любую ссылку (по сути, она может работать как закладка). Догадываетесь к чему я веду? Букмарклеты!

Делаем что-то вот такое:

javascript:void(function(d) { let s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://link.to/your/file.js'; d.getElementsByTagName('head')[0].appendChild(s); }(document))

Ничего сложного. Просто вставляем свой джс файл, который находится по адресу
https://link.to/your/file.js и все. А там уже наши возможности практически неограниченны. Разумеется мы можем сделать развилку по адресу (для разных сайтов выполнять разный код), подгружать всевозможные стили, другие джс файлы и т.д. и т.п. То есть мы получаем расширение на мобильном хроме, которое активируется по нажатию кнопки.

Уверен, многие хотели бы внести небольшие изменения на джой или любой другой сайт лично для себя (как, например, вот в этом посте https://joyreactor.cc/post/5926354). Поменять цвета, добаивть какие-то кнопки, добавить темную тему и т.д. и т.п.

P.S.: "но у меня нет никакого сервера, куда мне залить свой код?(" О, есть оочень много способов, сразу на вскидку приходит в голову использовать бота-телеграм в качестве сервера для хранения файлов. Это очень легко. Если вдруг кому будет интересно - могу и это расписать.

Спасибо, что создал JS...