Главная > Разное > Секрет силы букмарклетов (закладурок)

Секрет силы букмарклетов (закладурок)


13 июня 2011, 15:00. Разместил: Mysterious Master
Букмарклеты (или в российском сообществе всё чаще говорят: «закладурки») представляют собой специальные ссылки, которые пользователи могут добавить в закладки браузера.

Эти специальные ссылки включают код (другими словами, не просто адрес URL) и запускают различные функции, что позволяет вам модифицировать и расширить любую веб-страницу.

Как только вы начнёте пользоваться и создавать собственные букмарклеты, вы уже никогда не будете рассматривать веб-страницы как статичные элементы, которые вы не в силах контролировать.

С помощью букмарклетов у вас есть возможность адаптировать любую веб-страницу под ваши нужды.

Как работают букмарклеты

Букмарклеты – это нечто большее, чем статичные URL. Они представляют собой небольшие куски кода javascript, подгруженные по ссылке, которые действует на текущей открытой странице. Т.е. код становится расширением текущей страницы, и может взаимодействовать с любым элементом.

Изменения, вносимые в страницу, временные, и не сохраняются. Когда пользователь обновляет страницу или переходит по ссылке, код javascript теряется.

По возвращении на страницу, пользователь должен снова кликнуть по ссылке для активизации букмарклета.

Пример букмарклета

Вероятно, наилучшим способом описания букмарклета будет реальный пример в действии. Bit.ly – это мощный сервис по укорачиванию URL-адресов, и он является отличным сервисом генерации букмарклетов. Просто перетащите ссылку на вашу панель и начните использовать новую ссылку на любой странице в сети.

Секрет силы букмарклетов (закладурок)

Когда вы кликаете по букмарклету bit.ly, на текущей странице загружается панель. Учтите, что это не новое окно в браузере, а код, который применим к текущей открытой странице. Такие букмарклеты позволяют разработчикам внести больший функционал своего веб-сайта в любые страницы в сети.

5 полезных букмарклетов, с которых можно начать

Bit.ly

Здесь сразу стоит выделить возможность вам быстро укоротить ссылку, и поделиться ей. С помощью букмарклета Bit.ly, вместо копирования URL-адреса и его публикации, вы можете просто кликнуть для генерации укороченной версии ссылки. У вас также есть возможность отслеживать, как часто эту ссылку используют. Здесь удобно не только это. Учтите ещё тот факт, что короткая ссылка не будет преломляться, скажем, в электронном письме, так как длинные ссылки там зачастую обрезаются.

Shortwave

Разработчики часто предпочитают упаковать множество разных функций в один маленький букмарклет. Например, посмотрите на вариант Shortwave от Шона Инмана (Shaun Inman). Этот мощный ярлык содержит в себе огромное число функций поиска. Вы можете осуществлять поиск по Google, Amazon, Netflix и догружать результаты со множества других ресурсов. Единственная сложность заключается в том, что вам нужно запоминать команды, чтобы работать с этим сервисом. Но если начнете пользоваться, то быстро привыкнете.

Секрет силы букмарклетов (закладурок)

ReCCS

ReCCS – это простенький скрипт, который обновляет код CSS на странице, но не обновляет саму страницу. В целом, функция кажется ненужной, но подумайте о том, если бы вы занимались разработкой веб-приложения или осуществляли процесс разработки, который мог бы быть испорчен, если происходит перезагрузка страницы? Например, вы оформляете окно сообщения об ошибке, и вместо того, чтобы постоянно выполнять действие, вызывающее ошибку, вы можете просто обновлять css-код появившегося окна. Когда вы окажетесь в такой ситуации, вам точно понравится этот букмарклет.

autoPopulate

Если вам когда-нибудь приходилось заполнять много длинных форм, то вы обязательно будете солидарны со многими, кому часто приходится вновь и вновь заполнять различные бланки и анкеты. Именно в таких случаях autoPopulate приходит на помощь. Здесь функция очень проста: букмарклет автоматически заполняет формы уже имеющейся информацией. Вы также можете сделать собственную версию формы с нужными параметрами, если вам это понадобится.

Секрет силы букмарклетов (закладурок)

Instapaper

Instapaper представляет собой целый сервис по обработке букмарклетов. Удобный инструмент сохраняет страницы, которые вы хотели бы прочесть позже. Он также удобно синхронизирует закладки с iPhone, iPad и Kindle, что позволяет вам мгновенно вернуться на место, где вы прервали чтение.

Секрет силы букмарклетов (закладурок)

Идеальная структура для букмарклетов

Предлагаем вам ознакомиться со способом построения букмарклетов, который гарантирует простую поддержку в дальнейшем. Принцип прост: используйте букмарклет как оболочку для подгрузки исходного файла на страницу. Это означает, что начинка кода не будет присутствовать в закладке. Это устраняет проблему получения обновленной ссылки пользователем после того, как вы измените код.

Для того чтобы подготовить вашу закладку, просто создайте ссылку, которая будет подгружать все ресурсы с вашего сервера на страницу. Это включает в себя добавления на страницу файлов javascript и css, а затем запуск основного кода javascript для запуска функций.

Последующий код javascript прикрепляет определенный файл JS к странице:

new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?';
document.getElementsByTagName('head')[0].appendChild(new_script);

Шаблон создания букмарклетов

Основываясь на простом принципе, ниже представлены 2 основных структуры создания собственных букмарклетов. Основной выбор для вас будет заключаться в том, отключать кэширование js-файла или нет.

Шаблон 1: кэширование

Первый шаблон не препятствует кэшированию. Это означает, что ваш скрипт будет сохраняться на компьютере пользователя какое-то время. Когда-нибудь он точно обновится, но вы не можете отследить – когда. Вот шаблон:

javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?';
document.getElementsByTagName('head')[0].appendChild(new_script);
})();

Шаблон 2: кэширование отключено

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

javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
document.getElementsByTagName('head')[0].appendChild(new_script);
})();

Кэширование отключается простым способом добавления случайной строки в конец тэга скрипта. Это заставляет браузер подгружать скрипт каждый раз заново.

Также учтите, что эти функции находятся в оболочке javascript, которая определяет его как код javascript.

Как применить шаблоны?

Если вы хотите воспользоваться этими двумя шаблонами, то это можно сделать следующим образом: для начала замените URL в коде на полный путь до файла javascript, который размещён на сервере. А затем разместите код выше тэга ссылки, которая может быть добавлена на страницу. Это та ссылка, которую пользователи будут вписывать в закладки.

Должно получиться нечто вроде этого:

<a href="javascript:(function(){
new_script=document.createElement('SCRIPT');
new_script.type='text/javascript';
new_script.src='http://www.your-site.com/script.js?x=' +(Math.random());
document.getElementsByTagName('head')[0].appendChild(new_script);})();">Sample bookmarklet </a>

Учтите, что весь код javascript должен быть сжат в одну строку. Это сжатие может доставить хлопот, поэтому мы предпочитаем использовать этот удобный генератор букмарклетов.

Секрет силы букмарклетов (закладурок)

Как только у вас будет основа, вы можете начать добавлять функции, основанные на javascript к файлам скриптов для букмарклета. Используйте новую ссылку в браузере для того, чтобы протестировать, что у вас получилось.

Не забудьте про кэширование!

Один из наиболее непонятных моментов при создании букмарклетов заключается в кэшировании браузером. Вы не сможете заставить файл обновиться никаким иным способом, кроме как прямой загрузки исходного javascript-файла, а затем посредством нажатия кнопки обновления. Гораздо легче дописать еще одну строку, как было указано в шаблоне выше.

Предупреждение об «исходном коде»

Еще один аспект, который может смутить, заключается в просмотре исходного кода страницы. Когда запускается букмарклет и используется стандартная функция просмотра исходного кода страницы, вы можете запутаться.

Когда букмарклет динамически вносит код в страницу, стандартная функция просмотра исходного кода не даст вам посмотреть код обновленной страницы HTML. Вместо этого, вам придется использовать плагин типа Firebug, или же просматривать сгенерированный код посредством панели инструментов Web Developer.

Дополнительные ресурсы по разработке букмарклетов

* Вышеприведенные шаблоны основаны на обучающих статьях с сайта BetterExplained.
* Marklets представляет собой отличные залежи информации о букмарклетах.
* Здесь также имеется руководство по разработке букмарклетов, основанных на jQuery.
Вернуться назад