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

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

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-список" комментариев к статьям)

Использование (как подгрузить/применить скрипт):

Для расширений-менеджеров скриптов:

  1. Скопируйте код скрипта из main.js
  2. Создайте новый скрипт в расширении-менеджере скриптов
  3. Вставьте код скрипта в ваш новый скрипт. Не заменяйте код "по-дефолту", который был прописан при создании скрипта
Этот код создаётся "по-дефолту" при создании скрипта. Вставьте код скрипта из main.js ниже него (ниже десятой строки).
Этот код создаётся "по-дефолту" при создании скрипта. Вставьте код скрипта из main.js ниже него (ниже десятой строки).

Либо...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

136136
51 комментарий

Вдруг у кого-то там член спрятан...

17
Ответить

Всё возможно.

5
Ответить

Специально поставил на аватарку спину. Член не найдете

Ответить

нередко распирало любопытство "а что же там на аватарке?"

6
Ответить

Полезная штука

Ответить

Так, если полезная то почему ее официально не релизнули?

Ответить

Чел, харош
Но как на счёт написать парсер фулла моей обложки профиля?

Ответить