Прювет, котаны!11
Сегодня мы с вами постараемся написать маленький, но очень полезный плагин расширяющий возможности любителей юмористически-сатирической и даже немного технической площадки линуксоидов — форума linux.org.ru.
Плагин будет представлять из себя расширение для браузеров Mozilla Firefox и Chrome/Chromium, позволяющее отображать изображения непосредственно на страницах ресурса.
Дико извиняюсь за нехватку времени и неполноценный материал (пишу на «скорую руку», завтра может не быть времени) расширение в данном виде скорее «детское», поэтому будет без «фишечек» (хотелось добавить зум и прочее по клику, пока так - по клику открытие изображения на новой вкладке).
Без лирики… Поехали…
КАРТИНКИ ДЛЯ ТЕСТА
Котан 1: https://0x0.st/oO70.jpg
Котан 2: https://0x0.st/oO7G.jpg
Котан 3: https://0x0.st/oO7D.jpg
УСТАНОВКА
git clone https://git.lnx4.ru/lnx4/lorpic
В браузере перейти в настройки, далее - расширения, включить режим разработчика (для chromium, в firefox выбрать: «установить дополнение из файла») и загрузить каталог с расширением (для firefox — выбрать файл manifest.json).
Расширение работает на всех страницах форума (за исключением трекера и т. п., о чем подробнее расскажу дальше). Требуется прямая ссылка на файл изображения. Ссылка не должна отдавать html код, а должна содержать изображение с расширением jpg, jpeg или png в URL.
Подобную загрузку можно осуществить используя бесплатный сервис https://0x0.st.
Пример использования: curl -F'file=@yourfile.png' https://0x0.st
Ответом запроса станет результирующая ссылка на изображение.
КАК ПИСАТЬ РАСШИРЕНИЯ ДЛЯ БРАУЗЕРОВ?
На это примере разберем, что именно представляет из себя плагин (расширение, WebExtensions) для браузеров. В данном случае, код практически кросс-платформенный, подходит как для Mozilla Firefox, так и для Chrome/Chromium.
Структура каталога следующая:
- chromium-lorpic
--- 128-icon.png
--- 32-icon.png
--- 64-icon.png
--- app.js
--- manifest.json
--- style.css
Отличие заключается только в номере версии файла манифеста manifest.json: для firefox следует указывать версию 2, а для Chrome/Chromium — 3. Можно указать везде версию 2, но тогда Chromium будет жаловаться на deprecated (поддержка версии 2 заканчивается 2023 году).
Основную ценность для нас представляют файлы manifest.json, app.js и style.css. Разберем их по порядку.
manifest.json
В файле манифеста расположены основные настройки
{
"manifest_version": 3,
"name": "LORPic",
"version": "1.0",
"description": "Плагин отображения картинок для LOR",
"icons": {
"32": "32-icon.png",
"64": "64-icon.png",
"128": "128-icon.png"
},
"content_scripts": [
{
"matches": [ "*://*.linux.org.ru/gallery/*/*",
"*://*.linux.org.ru/articles/*/*",
"*://*.linux.org.ru/news/*/*",
"*://*.linux.org.ru/forum/*/*" ],
"js": [ "app.js" ],
"css": [ "style.css" ]
}
]
}
Раздел matches содержит регулярные выражения, тех страниц, на которых будет работать плагин. Символ звездочки означает любое выражение или его отсутствие. Таким образом, плагин будет работать на всех поддоменах и основном домене в указанных нами разделах сайта.
app.js
(function() {
// Code Here
const formats = ['jpeg', 'jpg', 'png'];
let links = document.querySelectorAll('a[href]:not([itemprop])');
links.forEach(function(link){
let url = link.getAttribute('href');
let ext = _getUrlExt(url);
if(formats.includes(ext)){
let content = link.textContent;
if(content != 'Просмотр'){
let image = document.createElement("img");
image.setAttribute('class', 'lorpic');
image.setAttribute('src', url);
//link.replaceWith(image);
link.innerHTML = "";
link.appendChild(image);
link.setAttribute('target', '_blank');
}
}
});
function _getUrlExt(url){
return url.split('.').pop();
}
})();
Здесь все просто и банально. В константной переменной formats указываем массив, по которому будем сверять расширения изображения, получаемых из ссылок на страницах сайта.
В цикле проходимся по всем ссылкам доступным на странице, и если ссылка содержит префикс (для получения используется функция _getUrlExt) из массива — тогда обрабатываем. Создаем элемент изображения и вставляем его как дочерний элемент ссылки, попутно удаляя содержимое. Так же присваиваем необходимые атрибуты. Чтобы не обрабатывались ссылки на изображения находящиеся внизу текста в разделе «Галерея» - используем условие content != 'Просмотр'
style.css
a img.lorpic {
display: block;
max-width: 33%;
height: auto;
}
Не менее просто. Каскадные стили. В предыдущем коде мы присвоили ссылкам с изображениями атрибут class="lorpic", теперь делаем изображения блочным элементом, т.к. ссылки могут быть в середине текста, а картинка должна отображаться с переносами.
Свойством max-width задаем максимальную ширину изображения относительно родительского элемента страницы. 33% на мой взгляд оптимальный вариант. По клику - картинка открывается в полном разрешении в соседней вкладке, за что отвечает атрибут target="_blank" добавленный скриптом на предыдущем шаге.
The END
UPD1. Предлагаю указать ресурс https://0x0.st в правилах разметки форума.
UPD2. У меня нет аккаунтов разработчика под Mozilla Firefox, Chrome/Chromium, но если зайдет, не только в образовательных целях, и найдется человек готовый опубликовать расширение, — буду только рад. Со своей стороны могу пообещать доработать до нормального состояния.
