Статьи

Лучшая жизнь через букмарклеты

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

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

Букмарклет – это небольшой фрагмент JavaScript, встроенный в закладку браузера. JavaScript выполняется при выборе закладки. Волшебная вещь состоит в том, что это выполнение происходит в контексте текущей страницы . Букмарклет имеет доступ к полной объектной модели документа страницы и может изменять ее и использовать содержащуюся в ней информацию для запуска новых окон или перенаправления браузера на другие сайты.

Если вы никогда раньше не экспериментировали с букмарклетами, это следует сделать до прочтения оставшейся части этой статьи. www.bookmarklets.com и www.favelets.com предоставляют обширные коллекции букмарклетов, а у Джесси Рудермана, пожалуй, самая полная коллекция букмарклетов в Интернете по адресу www.squarefree.com/bookmarklets . В частности, букмеклеты Джесси по веб-разработке должны быть обязательным дополнением к браузеру любого веб-разработчика.

Букмарклеты работают со всеми современными браузерами, поддерживающими JavaScript, но некоторые браузеры более дружественны к другим, чем другие. Internet Explorer 6 для Windows страдает от неимоверного ограничения в размере 508 символов на размер закладок, что серьезно сокращает диапазон букмарклетов, доступных для этого браузера, хотя метод, о котором я расскажу позже, дает частичное исправление. Чтобы в полной мере воспользоваться букмарклетами, я рекомендую вам использовать браузер на основе Mozilla, например превосходный Firefox, который также поставляется с рядом полезных инструментов, помогающих в разработке букмарклетов.

Однако одной из прелестей разработки букмарклетов является то, что кросс-браузерные проблемы, которые часто мешают серьезной разработке JavaScript, не имеют ничего плохого в разработке букмарклета для конкретного браузера (особенно букмарклетов для личного использования), поэтому разработчики могут буквально делать это. все, что их браузер позволит им.

Общие Варианты Bookmarklet

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

Эти букмарклеты тривиальны для создания, но могут быть адаптированы для некоторых очень полезных целей. Мне было очень весело создавать букмарклеты «Отредактируйте эту страницу» для веб-сайтов, работающих на веб-системах управления контентом. Многие такие системы встраивают идентификатор в URL-адрес страниц на общедоступном сайте, непосредственно соответствующий идентификатору, используемому в URL-адресе формы для редактирования содержимого этой страницы в системе управления сайтом. Букмарклет «Изменить эту страницу» извлекает URL-адрес текущей страницы и использует его для мгновенного перенаправления пользователя в интерфейс редактирования для этой страницы.

Например, представьте сайт с такими URL-адресами:

http://www.site.com/articles/123

Сайт также имеет защищенный паролем интерфейс управления, который предлагает интерфейс «редактирования страницы» по следующему адресу:

 http://www.site.com/admin/edit-article?id=123

Букмарклет «отредактировать эту страницу» для вышеуказанного сайта может быть реализован так:

 javascript:document.location='http://www.site.com/admin/ 
edit-article?id='+document.location.href.split('/').pop()

Эта концепция может быть значительно расширена, если у вас есть некоторый контроль над системой управления контентом, используемой на сайте. Например, на сайте, который не отображает внутренний идентификатор статьи в URL-адресе, вы можете вместо этого предоставить идентификатор в метатеге HTML, который затем будет доступен для букмарклета «Редактировать эту страницу» через DOM ,

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

Более полезными являются букмарклеты, которые помогают веб-разработчикам анализировать структуру страницы или даже изменять ее структуру «вживую». Моим личным фаворитом из них являются «тестовые стили», «стили редактирования» и «предки» Джесси Рудермана из его коллекции веб-разработок . Последний показывает иерархию элементов HTML, ведущую к разделу страницы под курсором мыши, что отлично подходит для выяснения того, как CSS можно применить к странице. Первые два позволяют изменять CSS для текущей страницы «вживую», обеспечивая мгновенную обратную связь о потенциальных изменениях дизайна.

Закладка My Image Drag для Mozilla делает каждое не фоновое изображение на странице «перетаскиваемым», что также может помочь при настройке дизайна страницы.

Одним из полезных, но часто упускаемых из виду приемов JavaScript является то, что целые HTML-страницы могут быть встроены в букмарклет. Попробуйте ввести следующее прямо в адресную строку браузера:

 javascript:'<h1>This is HTML</h1>'

Браузер должен отображать визуализированный HTML-код из строки. Это происходит потому, что строка оценивается как выражение, результат которого затем отображается в текущем окне браузера. Та же самая хитрость может даже использоваться, чтобы превратить ваш браузер в переопределенный калькулятор:

 javascript:1 + 4;

Иногда бывает полезно написать букмарклеты, встраивающие таким образом всю страницу, особенно если они требуют более сложного пользовательского интерфейса, чем простые поля confirm()prompt()

Вспомогательный ввод текста

Я провожу значительную часть своего времени в Интернете, уставившись в текстовые поля. Все три блога, которые я обновляю, поддерживаются через textareas, как и сайты, которые я разрабатываю на работе, и различные онлайн-форумы, в которых я участвую. Текстовые зоны есть везде. Они также являются далеко не оптимальным способом работы с текстом, особенно по сравнению со специализированным программным обеспечением для текстовых редакторов. Букмарклеты могут значительно облегчить работу с текстовыми областями и могут дать им полезную дополнительную функциональность.

Мой любимый пример букмарклета, улучшающего текстовую область, – еще один пример от Джесси Рудермана: правильная форма Blogidate XML – букмарклет Mozilla / FireFox, который проверяет, является ли текст в каждой текстовой области на странице правильно сформированным XML, и изменяет цвет фона текстовая область соответственно. Это отлично подходит для ловли простых ошибок в XHTML перед публикацией на сайте. Джесси также имеет набор закладок для проверки HTML , которые проверяют синтаксис фрагментов HTML в текстовых областях с помощью валидатора WDG.

Другой инструмент, которым я регулярно пользуюсь, – это мой сокращенный HTML- букмарклет. Это применяет последовательность простых преобразований к тексту в текстовых областях:

  1. Текстовые блоки, отделенные друг от друга пустой строкой, заключаются в теги абзаца
  2. Строки, начинающиеся со знака =, преобразуются в заголовки <h4>
  3. Строки, начинающиеся с *, становятся маркированными списками

Пример:

 = Header 

Paragraph

* list 1
* list 2

становится:

 <h4>Header</h4> 

<p>Paragraph</p>

<ul>
<li>list 1</li>
<li>list 2</li>
</ul>

Более короткая версия доступна для IE. Эта версия жертвует поддержкой заголовка, чтобы соответствовать пределу в 508 символов: Развернуть HTML сокращенную IE .

Развернуть сокращение HTML:

javascript:(function() { var tas = document.getElementsByTagName('textarea'); for (var i = 0; i < tas.length; i++) { var ta = tas[i]; var text = ta.value.replace(/(rn|r|n)/g, 'n'); var paras = text.split(/n{2,}/); for (var i = 0; i < paras.length; i++) { if (/^* /.test(paras[i])) { var lines = paras[i].split('n'); for (var j = 0; j < lines.length; j++) { lines[j] = ' <li>' + lines[j].replace(/^* /, '') + '</li>'; } paras[i] = '<ul>n' + lines.join('n') + 'n</ul>'; } if (/^= /.test(paras[i])) { paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>'; } if (!/^<(p|ul|li|h4)>/.test(paras[i])) { paras[i] = '<p>' + paras[i]; } if (!/</(p|ul|li|h4)>$/.test(paras[i])) { paras[i] += '</p>'; } } ta.value = paras.join('nn'); } })();

Разверните HTML сокращение IE:

javascript:(function(){var tas=document.getElementsByTagName('textarea'),ta,t,ps,i,l,j;for(i=0;i<tas.length;i++){ta=tas[i];  
t=ta.value.replace(/(rn|r|n)/g,'n');ps=t.split(/n{2,}/);for(i=0;i<ps.length;i++){if(/^* /.test(ps[i])){l=ps[i].split('n');for(j=0;j<l.length;j++){l[j]=' <li>'+l[j].replace(/^* /,'')+'</li>';}ps[i]='<ul>n'+l.join('n')+'n</ul>';}if(!/^<(p|ul|li|h4)>/.test(ps[i])){ps[i]='  
<p>'+ps[i];}if(!/</(p|ul|li|h4)>$/.test(ps[i])){ps[i]+='</p>';}}ta.value=ps.join('nn');}})();

Нерасширенный источник (до удаления пробелов) выглядит так:

 javascript:(function() {  
   var tas = document.getElementsByTagName('textarea');  
   for (var i = 0; i < tas.length; i++) {  
       var ta = tas[i];  
       var text = ta.value.replace(/(rn|r|n)/g, 'n');  
       var paras = text.split(/n{2,}/);  
       for (var i = 0; i < paras.length; i++) {  
           if (/^* /.test(paras[i])) {  
               var lines = paras[i].split('n');  
               for (var j = 0; j < lines.length; j++) {  
                   lines[j] = '  <li>' + lines[j].replace(/^* /, '') + '</li>';  
               }  
               paras[i] = '<ul>n' + lines.join('n') + 'n</ul>';  
           }  
           if (/^= /.test(paras[i])) {  
               paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>';  
           }  
           if (!/^<(p|ul|li|h4)>/.test(paras[i])) {  
               paras[i] = '<p>' + paras[i];  
           }  
           if (!/</(p|ul|li|h4)>$/.test(paras[i])) {  
               paras[i] += '</p>';  
           }  
       }  
       ta.value = paras.join('nn');  
   }  
})();
Инструменты для создания букмарклетов

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

Если вы используете Firefox, у вас уже есть доступ к некоторым полезным средствам для создания букмарклетов. Консоль JavaScript в Firefox – это бесценный инструмент отладки, а инспектор DOM – отличное средство для изучения дерева DOM страницы при написании букмарклетов, которые изменяют содержимое страницы. Букмарклет оболочки Джесси Рудермана для Firefox и Mozilla предоставляет интерактивную подсказку JavaScript, присоединенную к контексту текущей страницы, и является отличным способом опробовать новые методы, прежде чем передать их в текстовый редактор.

Хотя букмарклеты не могут содержать разрывы строк, важно, чтобы ваш исходный код оставался с отступом, когда вы пишете что-то большее, чем горстка операторов. Мой букмарклет удаления разрывов строк (ниже) – это инструмент, который удаляет вкладки, новые строки и несколько пробелов из блока JavaScript. Во многих случаях это все, что вам нужно сделать, чтобы создать букмарклет из простого блока кода, хотя вы должны помнить, чтобы завершить каждую строку точкой с запятой, прежде чем конвертировать ее. Букмарклет также является примером HTML-страницы, встроенной в закладку.

Удалить разрывы строк:

javascript:'<textarea rows=%2220%22 cols=%2260%22 id=%22ta%22></textarea><br><a href=%22http://%22 onclick=%22ta=document.getElementById('ta'); ta.value = ta.value.replace(/\n|\t/g, ' ').replace(/ +/g, ' '); return false;%22>Replace newlines and tabs</a>';

Переменная область избегания

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

 javascript:(function() {  
 /* Bookmarklet code here - declare variables with 'var' before use */  
})();

Функция function () { } Оборачивая функцию в круглых скобках и добавляя () Пока переменные в теле анонимной функции объявляются с использованием ключевого слова ‘var’, они будут ограничены областью действия функции и не будут мешать переменным с тем же именем в остальной части документа.

Благодаря функциональной природе JavaScript вы можете даже объявить другие функции внутри анонимной функции, не добавляя их в глобальную область документа.

Добавление более длинных скриптов

Ранее я упоминал, что существует способ обойти ограничение Internet Explorer на длину закладок. Этот метод также позволяет писать букмарклеты в стандартном JavaScript-коде с отступом, не сохраняя весь скрипт в одной строке, что делает его полезным методом для более сложных букмарклетов, реализованных для любого браузера. Хитрость заключается в размещении фактической реализации букмарклета в виде внешнего файла .js на веб-сервере. В этом случае букмарклет просто должен содержать код-заглушку, который загружается в оставшуюся часть скрипта – задача, которая легко достигается в пределах 508 символов.

Вот код загрузочного заглушки с отступом для удобства чтения:

 javascript:(function() {  
 var s = document.createElement('script');  
 s.setAttribute('src', 'http://url-of-main-bookmarklet-script');  
 s.setAttribute('type', 'text/javascript');  
 document.getElementsByTagName('head')[0].appendChild(s);  
})();

С удаленными пробелами приведенный выше код (за исключением URL-адреса внешнего скрипта) содержит 193 символа.

Этот код имеет один недостаток: он не работает с IE5 для Macintosh. Если для вашего букмарклета важна поддержка IE5 Mac, у liorean есть расширенная версия загрузочной заглушки, которая использует обнаружение браузера для обслуживания этого браузера.

Дальнейшее чтение

Лучший способ узнать о букмарклетах – взглянуть на написанные другими:

Я надеюсь, что этот бурный тур по букмарклетам вдохновил вас попробовать свои силы в создании своих собственных.