Крохотный скрипт для показа аватарок пользователей

JS скрипт для показа аватарок, и получения URL ссылок на них. Сделал сугубо для себя, так как нередко распирало любопытство "а что же там на аватарке?", и желание найти сурс.

Переходить в профиль пользователя чтобы её увидеть, не особо интересно.
Не знаю, создавал-ли уже кто-то подобное.

Может кому-то тоже пригодится.
Обновлено (11 апреля): добавлены ссылки на Greasyfork, ещё одна отдельная версия скрипта, которая является "общей".

Как работает
Работает с
Настройка скрипта
Использование (как подгрузить/применить скрипт)
Расширения-менеджеры скриптов (для подгрузки/применения скрипта)
Принцип работы скрипта
Ссылка на скрипт (GitHub)
Ссылка на скрипт (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
Создайте новый скрипт в расширении-менеджере скриптов
Вставьте код скрипта в ваш новый скрипт. Не заменяйте код "по-дефолту", который был прописан при создании скрипта

Этот код создаётся "по-дефолту" при создании скрипта. Вставьте код скрипта из main.js ниже него (ниже десятой строки).

Либо...

Скопируйте код скрипта из Violentmonkey script.js, или Tampermonkey script.js (это уже готовые скрипты для этих расширений браузера)
Создайте новый скрипт в расширении-менеджере скриптов
Вставьте код скрипта в ваш новый скрипт, переписав весь его код, созданный "по-умолчанию".

Иными словами, замените весь код, начиная с самой первой строчки.

Для консоли в devtools (для открытия, нажмите CTRL+SHIFT+i в хромиум браузерах, и Firefox):

Скопируйте код скрипта из main.js
Вставьте его в консоль
Нажмите Enter. Само собой, это действие придётся повторять при каждом открытии DTF сайта (не при переходе по новым ссылкам в DTF), поэтому предпочтительнее всё-же использовать расширения-менеджеры скриптов.

Расширения-менеджеры скриптов (для подгрузки/применения скриптов):

Violentmonkey: Chrome, Opera, Firefox, Edge, и GitHub.Maxthon (4 и 5), и GitHub.
Violentmonkey бета: Chrome, Firefox.
Сайт.
Tampermonkey: Chrome, Opera, Firefox, Edge, Safari (12), Safari (6, 11).
Tampermonkey бета: Chrome, Firefox, Edge.
Сайт.
Greasemonkey: Firefox.

Принцип работы скрипта:

Для работы, скрипт использует имя класса (className) и regex для понимания, где именно ему срабатывать. Если какой-то из элементов сменит имя класса, скрипт перестанет работать (поэтому, конкретно у правого "live-списка" комментариев, скрипт сам получает имя класса, так как оно там периодически меняется).Даже если я не обновлю в скрипте изменившееся имя класса, это сможете сделать вы в "инструментах разработчика (devtools)" (CTRL+SHIFT+i в хромиум браузерах, и в Firefox).
Сама аватарка показывается в отдельном создаваемом html элементе. Ссылка на аватарку берётся из стиля элемента (background-image).

Для примера, аватарка комментария имеет имя класса "comment__avatar".

А вот тут, имя класса уже периодически меняющееся "vcz80ae3".

Ссылка на скрипт (GitHub):
Код скрипта...не поместился в блок. Поэтому, пришлось загрузить на GitHub, уж простите.

github.com

GitHub - TentacleTenticals/DTF-showAvatar

Contribute to TentacleTenticals/DTF-showAvatar development by creating an account on GitHub.

Violentmonkey script.js - скрипт для Violentmonkey.
Tampermonkey script.js - скрипт для Tampermonkey.
Скрипты Violentmonkey и Tampermonkey должны быть взаимозаменяемы, разница лишь в начальной "шапке" скрипта. Для верности, я всё-же их разделил.
main.js - сам код скрипта. Можно создать скрипт для расширения-менеджера скриптов самому, забросить код скрипта в консоль devtools, и т.п.

Ссылка на скрипты в Greasyfork:

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

Если у кого-то есть вопросы, примечания, предложения, и т.п - добро пожаловать в комментарии.

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

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

#dtf #скрипт #скрипты #тентаклескрипты