В этом посте я расскажу о букмарклетах, а именно о их разработке и использовании как в процессе разработки, так и во время повседневного серфинга.
Букмарклет — это скрипт, написанный в одну строчку, который добавляется в закладки браузера и добавляет какой-либо дополнительный функционал на сайт, который открыт в данный момент. Как вариант букмарклет может скрывать элементы, показывать скрытые, менять внешний вид страницы.
Создание букмарклетов
Итак, самый простой букмарклет (который ничего не делает выглядит вот так):
javascript:
Все, что мы допишем за этой строчкой будет выполнено как скрипт на языке javascript. В старых браузерах существовало некое ограничение на длину букмарклета. Сейчас я таких ограничений не встречал. Единственное ограничение — скрипт должен быть записан в одну строчку.
Допустим, скрипт, который подсвечивает ссылки на странице зеленым цветом может выглядеть достаточно просто:
javascript:var x=document.querySelectorAll(‘a’);for(var i=0;i<x.length;i++){x[i].style.backgroundColor=’green’}
Данный скрипт сначала ищет все ссылки используя document.querySelectorAll, что в современных браузерах — упрощенный аналог find’a в jQuery. После этого осуществляется перебор найденных ссылок в цикле и установка им текста фона в зеленый цвет x[i].style.backgroundColor=’green’.
Плохим тоном считается создание переменных в глобальной области видимости, поэтому и букмарклеты хорошо бы оборачивать в конструкцию вида (function(){ сюда код букмарклета })();, которая у программистов зовется замыканием.
В итоге получим букмарклет, который можно и в закладки добавить:
Это очень простой букмарклет, но если посмотреть на более сложные закладки, то становится понятно, что писать такие скрипты в одну строчку — не самое приятное занятие. Возьмем, к примеру, букмарклет, который обходит DOM-дерева в поисках HTML5 семантики типа элементов section и строит по ним структуру документа — https://github.com/hoyois/html5outliner. Как видно, тут автор уже строит достаточно взрослый скрипт, который потом минифицирует и приводит к однострочному виду, который можно встроить в панель закладок в виде букмарклета. Результат запуска данного букмарклета, скажем, на сайте pioneers.com.ua, выглядит вот так:
Это наглядно показывает, что на сайте следят не только за тем, как сайт выглядит для пользователя, но и за тем, как его структуру видят поисковики.
С усложнением кода букмарклета, необходимостью его отладки, достаточно быстро надоедает за каждым изменением проводить процедуры минификации, приведения кода букмарклета к однострочному виду, копирование в браузерную закладку. Для упрощения данного процесса обычно создают скрипт отдельно (на локальной машине или общедоступном сервере), а в букмарклете помещают код динамического добавления данного скрипта на страницу. Например, букмарклет тестирования сайтов на разных разрешениях экрана имеет следующий вид
Другие полезные букмарклеты
Много других интересных букмарклетов можно найти в гугле.
