Букмарклеты

автор: 2003.08.27 Александр Качанов

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

Речь идет о так называемых bookmarklets (букмарклетах). Это небольшие программки, написанные на javascript, которые можно помещать на панель закладок (отсюда и название, склеенное из двух слов: bookmark и applet). При щелчке по такой закладке запускается JavaScript-программа, которая выполняет какое-либо полезное действие.

Очень часто букмарклеты используют DOM, а так как в разных броузерах реализация DOM - разная, не все букмарклеты могут работать одинаково хорошо во всех броузерах. Что уж говорить о таких допотопных монстрах, как IE4 или NN4. Букмарклеты, которые будут здесь представлены, работают в последних версиях Mozilla/Firefox, IE 5.5+ и Opera, составляющих подавляющее большинство.

При написании данной статьи были использованы материалы сайтов, список которых будет представлен в конце. Вы без труда найдете еще кучу таких же сайтов: достаточно в google.com набрать ключевое слово bookmarklet.

Броузеры: IE это Internet Explorer 5.5 for Windows, Moz это Netscape 7.1 или Mozilla, NS4 это Netscape 4.79, и Op7 это Opera 7.03.

Букмарклеты для веб-серфинга

show hiddens (IE, Moz, Op7)

Показывает скрытые элементы форм как поля, и позволяет редактировать их значения.

Придуман "shad-ом".

zap style sheets (IE, Moz)

Отключает все стили, используемые на странице.

highlight (Moz, Op7)

Подсвечивает все слова на странице, содержащие искомые символы.

Находит и подсвечивает все слова, содержащие искомые символы, кроме случаев, когда фраза прерывается другим элементом. Например, букмарклет найдет слова "Paul McGarry" и "искомые слова", но не фразу "на скрипте" в абзаце, что идет ниже.

Основан частично на скрипте, придуманном Paul McGarry.

sort table (IE, Moz, Op7)

Позволяет сортировать ряды в таблицах на веб-странице по алфавиту.

Добавляет еще один ряд сверху каждой таблицы со ссылками "a" и "d" над каждой колонкой. Щелкнув по ссылке, вы отсортируете таблицу в убывающем или возрастающем порядке по данной колонке. Сортировка идет по HTML-коду, так что если в колонке присуствуют ссылки, ряды со ссылками будут идти первыми.

transpose tables (IE, Moz, Op7)

Превращает ряды таблиц в колонки, а колонки - в ряды, и наоборот.

Учитывает rowspan и colspan, а также по возможности старается соблюсти цвет фона в ячейках.

number rows (IE, Moz, Op7)

Нумерует ряды во всех таблицах на странице.

Полезный букмарклет, например, для улучшения вида таблицы багов Mozilla.

Если у таблицы есть заголовочный ряд (оформленный тегами th и thead), данный скрипт не присваивает ему номера. Вместо этого в заголовочную строку добавляется еще одна ячейка над колонкой, где выводятся номера рядов, и в этой ячейке пишется слово "Row" (Ряд).

bullets to numbers (IE, Moz, Op7)

Преобразовывает все маркированные списки (UL) в нумерованные (OL).

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

zap images (IE, Moz, Op7)

Заменяет все картинки на странице на текст, прописанный в теге ALT.

Этот букмарклет позволяет посмотреть на то, как будет выглядеть страница с выключенным выводом картинок. Также вы получите представление о том, как ваша страница будет смотреться для голосовых броузеров и для текстовых броузеров, таких как Links. Более подробно о том, как правильно создавать текстовую версию сайта, читайте Web Content Accessibility Guidelines for alternate text.

Этот букмарклет заменяет только теги <img>; он ничего не делает с картинками на кнопках, с фоновым изображением и с изображениями-картами (image maps).

create link - 1 (IE, Moz, Op7)

Формирует в диалоговом окне ссылку на текущую страницу в уже готовом формате тега <A>. Пригодится в частности для блоггеров, а вообще для всех, кому надо быстро сделать ссылку на страницу, чтобы переслать по почте или вставить в html-код.

create link - 2 (IE, Moz, Op7)

Как вариант предыдущего букмарклета, формирует в диалоговом окне ссылку на текущую страницу в простом текстовом варианте "заголовок: ссылка".

Букмарклеты для веб-мастеров

test styles (IE, Moz, Op7)

Позволяет создать временный или пробный CSS и тут же увидеть результат его исполнения.

Букмарклет создает новое окно, в котором можно напечатать CSS-правила. Эти правила сразу же будут применены к странице. Правила будут действовать, пока окно открыто, даже в том случае, когда вы перезагрузите страницу или перейдете на другую страницу на том же сайте. См. примеры полезных стилевых правил.

ancestors (IE, Moz)

Отображает в статусной строке список всех "предков" любого элемента страницы, над которым вы устанавливаете курсор.

Например при установке курсора на ссылке в ячейке таблицы в статусной строке появится следующее: "BODY > table tbody tr TD > A".

Так же показывает классы элементов (например, SPAN.newsItemLink) и идентификаторы id (например, DIV#content), если таковые присуствуют. Идея отображения классов и идентификаторов появилась из букмарклета pixy "List computed styles".

show blocks (IE, Moz, Op7)

Рисует границы вокруг таблиц (цветами показывается уровень вложенности), абзацев и div-ов.

Абзацы обводятся светлосерым цветом, div-ы - черным. Цвета границ у таблиц зависят от уровня вложенности: самые внешние таблицы обводятся синим, таблицы второго уровня - зеленым, а третьего уровня и глубже - красным.

Этот букмарклет накладывает на страницу таблицу стилей, которая загружается динамически с сайта http://www.cs.hmc.edu/. Изучите внимательно этот css-файл: он немного меняет вид страницы (убирает фон), что не всегда удобно.

Придумал Paul McGarry.

Если вам хочется создать свою таблицу стилей и не зависеть от постороннего сайта, javascript в букмарклете надо немного поменять. Например, я сохранил свою таблицу стилей на своей машине, а в javascript-е прописал путь к ней, как к файлу: "file://E:/WINDOWS/Web/cells-structure.css" и из букмарклета, показывающего границы блоков, я сделал другой букмакрлет, показывающий только границы ячеек, обводя их легким 1px пунктиром.

find links to squarefree (IE, Moz, Op7)

При каждом нажатии выделяет на странице ссылку, которая указывает на squarefree.com. Поменяйте в javascript значение, на нужный вам домен.

google backlinks (IE, Moz, NS4, Op7)

Ищет в Google страницы с PR4+, которые линкуются на текущую страницу, если у нее тоже PR4+.

google all from site (IE, Moz, NS4, Op7)

Ищет в Google все ему известные страницы с текущего сайта.

word frequency (IE, Moz, Op7)

Составляет список использованных на странице слов и подсчитывает частоту их употребления.

query as link text (IE, Moz, Op7)

Меняет ссылку на текст "engine: запрос"

Например, при анализе логов букмарклет поменяет текст данной ссылки http://www.google.com/search?hl=en&q=%22remove+plugins%22+%22internet+explorer%22 на "www.google.com: 'remove plugins' 'internet explorer'".

linkify (IE, Moz, Op7)

Превращает текстовые ссылки в реальные ссылки.

Например, при анализе логов, этот букмарклет превратит текст "http://www.google.com/" в ссылку.

Послесловие

Для Firefox (Mozilla Project) есть дополнительный компонент Web Developer, который позволяет удобно выполнять такие функции, как включение/выключение CSS, включение/выключение картинок, изменение размера окна, обрисовка ячеек таблиц и блоковых элементов, посмоттреть http-заголовки.

Opera поставляется с дополнительными CSS-файлами, которые можно быстро наложить на любую страницу и очертить блоковые элементы или ячейки таблиц.

Александр Качанов

« назад к списку статей


Rambler's Top100
Rating All.BY
Akavita
Valid XHTML 1.0!