Крохотный скрипт для показа аватарок пользователей
JS скрипт для показа аватарок, и получения URL ссылок на них. Сделал сугубо для себя, так как нередко распирало любопытство "а что же там на аватарке?", и желание найти сурс.
Переходить в профиль пользователя чтобы её увидеть, не особо интересно.
Не знаю, создавал-ли уже кто-то подобное.
Может кому-то тоже пригодится.
Обновлено (11 апреля): добавлены ссылки на Greasyfork, ещё одна отдельная версия скрипта, которая является "общей".
Содержание
Как работает:
- Наведите курсор на аватарку, и нажмите Ctrl для её показа, или Ctrl+Shift для копирования URL ссылки на аватарку в буфер обмена.
- Для копирования в буфер обмена, скрипт использует Clipboard API.
Работает с:
- аватарками в комментариях
- аватарками подсайта в хеадере (заголовке) статьи
- аватарками автора статьи в футере (окончании) статьи
- аватарками в комментариях в "live-списке" справа
- также работает и при просмотре ленты.
Настройка скрипта:
Скрипт можно настроить (но не обязательно). В самом начале скрипта, выведены переменные (let), значения которых можно изменять. Замените ? на какое-либо число в разумных пределах:
- userAvatarSize = '?px' (стандартное значение 400px) - максимальный размер аватарки в комментарии
- authorAvatarSizeHeader = '?px' (стандартное значение 400px) - максимальный размер аватарки подсайта
- authorAvatarSizeFooter = '?px' (стандартное значение 400px) - максимальный размер аватарки автора статьи в футере (окончании статьи)
- userAvatarSizeCommentsPanel = '?px' (стандартное значение 250px) - максимальный размер аватарки в комментарии (боковая панель комментариев, aka "live-список" комментариев к статьям)
Использование (как подгрузить/применить скрипт):
Для расширений-менеджеров скриптов:
- Скопируйте код скрипта из main.js
- Создайте новый скрипт в расширении-менеджере скриптов
- Вставьте код скрипта в ваш новый скрипт. Не заменяйте код "по-дефолту", который был прописан при создании скрипта
Либо...
- Скопируйте код скрипта из Violentmonkey script.js, или Tampermonkey script.js (это уже готовые скрипты для этих расширений браузера)
- Создайте новый скрипт в расширении-менеджере скриптов
- Вставьте код скрипта в ваш новый скрипт, переписав весь его код, созданный "по-умолчанию".
Для консоли в devtools (для открытия, нажмите CTRL+SHIFT+i в хромиум браузерах, и Firefox):
- Скопируйте код скрипта из main.js
- Вставьте его в консоль
- Нажмите Enter. Само собой, это действие придётся повторять при каждом открытии DTF сайта (не при переходе по новым ссылкам в DTF), поэтому предпочтительнее всё-же использовать расширения-менеджеры скриптов.
Расширения-менеджеры скриптов (для подгрузки/применения скриптов):
Принцип работы скрипта:
Для работы, скрипт использует имя класса (className) и regex для понимания, где именно ему срабатывать. Если какой-то из элементов сменит имя класса, скрипт перестанет работать (поэтому, конкретно у правого "live-списка" комментариев, скрипт сам получает имя класса, так как оно там периодически меняется).Даже если я не обновлю в скрипте изменившееся имя класса, это сможете сделать вы в "инструментах разработчика (devtools)" (CTRL+SHIFT+i в хромиум браузерах, и в Firefox).
Сама аватарка показывается в отдельном создаваемом html элементе. Ссылка на аватарку берётся из стиля элемента (background-image).
Ссылка на скрипт (GitHub):
Код скрипта...не поместился в блок. Поэтому, пришлось загрузить на GitHub, уж простите.
- Violentmonkey script.js - скрипт для Violentmonkey.
- Tampermonkey script.js - скрипт для Tampermonkey.
- Скрипты Violentmonkey и Tampermonkey должны быть взаимозаменяемы, разница лишь в начальной "шапке" скрипта. Для верности, я всё-же их разделил.
- main.js - сам код скрипта. Можно создать скрипт для расширения-менеджера скриптов самому, забросить код скрипта в консоль devtools, и т.п.
Ссылка на скрипты в Greasyfork:
- Стандартная версия.
- Версия без зажимания Ctrl для показа аватарки (ссылка на аватарку всё равно копируется через Ctrl+Shift. Как-никак, она попадает в буфер обмена. Защита от случайных нажатий).
- Новая отдельная версия. Новые настройки, поисковое меню ("поиск по картинкам"). Новые баги (возможно).
Если у кого-то есть вопросы, примечания, предложения, и т.п - добро пожаловать в комментарии.
И нет, я не делал подобного расширения для браузера, так как ещё не ни разу не доводилось.
Да и смысла мало, ведь всяко проще сделать скрипт и подгрузить его, чем делать расширение, которое будет работать лишь на одном сайте.
Тег "тентаклескрипты" для того, чтобы можно было игнорировать мои поделки, если это кому-то понадобится.
В очередной раз пишу статью, длиной в пару предложений дольше, чем нужно.