Букмарклет (bookmarklet) — небольшая JavaScript-программа, сохраняемая как браузерная закладка.
Вышеприведенное определение взято из статьи в Википедии. Разберемся более подробно что же такое букмарклеты.
Современные браузеры поддерживают несколько протоколов. Наиболее часто нами используется протокол http, для получения гипертекстовых документов. Реже используется ftp-протокол для обмена файлами, а вот о протоколе javascript слышали немногие. Адрес, записанный в протокоде javascript выглядит так:
javascript: /*здесь любой js-код в одну строку*/alert('I am bookmarklet!');
В результате помещения этого адреса в адресную строку браузера выполнится следущий за javascript: js-код. В данном случае мы увидим окно-предупреждение с текстом 'I am bookmarklet!'. Как и любой другой адрес, javascript-адреса можно размещать в обычных ссылках и добавлять в закладки.
Безопасность
При кликах по неблагонадежным ссылкам следует быть осторожным, вместе с переходом на другой вы можете передать данные о текущей сессии злоумышленникам. Например, эта ссылка лишь покажет вам куку для текущей страницы, хотя могла бы передать эту куку на ресурс злоумышленника с прочими данными.
Создание букмарклетов
У браузеров есть ограничение на длину букмарклетов, причем у каждого браузера оно свое. Экспериментальным путем автор выяснил, что самой жесткое ограничение у IE (Internet Explorer) — 500 символов. У остальных браузеров тоже есть лимит, но он больше и автор поленился его высчитывать.
Таким образом, при написании букмарклета лучше максимально сокращать имена переменных и функций. В идеале до одного символа.
Следующее ограничение диктуется форматом адреса — весь код должен быть написан в одну строку, иначе никак...
И последнее. Удобно записывать код в виде анонимной функции, вызываемой сразу после объявления, чтобы не получилось пересечения переменных букмарклета с переменными на странице.
Учитывая всё вышеперечисленное напишем простой букмарклет, который будет выводить адреса всех подключенных CSS-файлов на странице.
Показать CSS-файлы, подключенные к данной странице
Код этого букмарклета, разнесенный на несколько строк для удобства чтения:
var d,b,c,cs,s,i;
d=document;
b=d.body;
if(!b) return;
s=document.getElementsByTagName('link');
if(!s.length) return;
c=d.createElement('span');
cs=c.style;
cs.position='absolute';
cs.top=cs.left=0;
cs.background='#EEE';
for (i=0;i<s.length;i++)if(s[i].type=='text/css')
c.innerHTML+='<a href=\''+s[i].href+'\'>'+s[i].href+'<\/a><br>';
b.appendChild(c);
window.scrollTo(0,0);
})();
Можно выполнить сложные скрипты размером более 500 символов. В коде букмарклета вы можете подключить внешний js-файл со всего хоста, код которого сделает то, что вам нужно. К примеру, клик по этой ссылке подключит файл http://fastcoder.org/js/test.js, в котором алерт строки 'test'.
Код:
var script=document.createElement('script');
script.src='http://fastcoder.org/js/test.js';
document.body.appendChild(script);
})();
Удачи в написании букмарклетов!
По крайней мере, при использовании разных букмарклетов и тестировании приводимых в статье, предупреждений не было.
Суть протокола javascript в том, что его код ничем не отличается от кода на странице. Это с одной стороны уязвимость, а с другой - не ограничивает разработчиков.