Статьи

Создание букмарклетов — правильный путь

Январь 27, 2019

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

Сегодня мы собираемся заняться созданием букмарклетов с нуля, а также некоторыми лучшими практиками.

Они не для ботаников, на самом деле они довольно ориентированы на пользователя.

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

Сегодня я хотел бы познакомить вас с разработкой букмарклетов, реализующих некоторые изящные закладки. Да, закладки. Мы будем строить больше, чем один, хотя и совсем крошечные. Заинтригованный? Давайте начнем!

Так что же такое Bookmarklets?

Процитирую вступление моей статьи:

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

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

Поскольку они состоят только из JavaScript, они довольно переносимы — они поддерживаются всеми браузерами на всех платформах, даже на мобильных устройствах и планшетах. Установить их так же просто, как перетащить их на панель инструментов!

Да, но какой в ​​этом смысл?

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

Букмарклеты можно разделить на несколько категорий:

  • Те, которые передают данные. Букмарклеты, которые отправляют страницу в сервис, подпадают под эту категорию. Букмарклеты, связанные с социальными сетями, поиск по словарям, поиски — все подпадают под эту категорию Мы будем строить тот, который подчиняется Reddit.
  • Те, которые получают информацию и / или изменяют текущую страницу. Мы будем создавать букмарклет, который устанавливает цвет фона страницы.
  • Те, которые работают за кулисами. Букмарклет, который удаляет все файлы cookie текущего сайта, является ярким примером, который мы будем создавать.

# 1 — Начало работы

Первое, что вам нужно запомнить, — это префикс всего кода JavaScript с помощью URI javascript . Браузеры реализовали этот конкретный префикс, чтобы содержимое, за которым следует его, можно было обрабатывать и анализировать как правильный код JavaScript.

Например, нажав на эту ссылку — см. Ее код ниже — появится текстовое предупреждение.

1
<a href=»javascript: alert(‘Linky text’);»>Linky</a>

# 2 — использовать анонимную функцию в качестве оболочки

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

Аккуратно заверните свой код внутри анонимной функции, и убедитесь, что нет конфликтов имен. Кроме того, нубы JavaScript будут сбиты с толку и будут думать, что вы бог, если вы в такой вещи.

1
javascript:(function(){// your code here })();

Это уместно, когда вы используете JavaScript и в других местах. Всегда, всегда изолируйте свой код.

№ 3 — Внешне, если необходимо

Букмарклет не обязательно должен быть крошечным, вы можете стать настолько большим, насколько захотите. В этих случаях, в интересах распространения и поддержания вашего кода в актуальном состоянии без ручного вмешательства пользователя, лучше всего создавать оболочку, которая извлекает код по мере необходимости.

1
2
3
4
5
javascript: (function () {
    var jsCode = document.createElement(‘script’);
    jsCode.setAttribute(‘src’, ‘http://path/to/external/file.js’);
  document.body.appendChild(jsCode);
 }());

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

Примечание: вы не ограничены в этом только для JavaScript. Если ваш букмарклет использует внешний интерфейс, вы также можете свободно использовать HTML и CSS, что делает ваш букмарклет действительно самообновляющимся.

# 4 — Соблюдайте осторожность при добавлении библиотеки

Опять же, если вы создаете бегемота из букмарклета, вам может понадобиться одна из этих библиотек JavaScript. Но использовать их на своей странице не так просто, как просто включить их — вам нужно убедиться, что библиотеки еще не доступны. Такие библиотеки, как jQuery и MooTools, доминируют на рынке, и вам стоит убедиться, что он еще не загружен.

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
if (!($ = window.jQuery)) { // typeof jQuery==’undefined’ works too
    script = document.createElement( ‘script’ );
   script.src = ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’;
    script.onload=releasetheKraken;
    document.body.appendChild(script);
}
else {
    releasetheKraken();
}
 
function releasetheKraken() {
    // The Kraken has been released, master!
    // Yes, I’m being childish.
}

Код должен быть достаточно понятным. Давайте все равно быстро пройдемся.

  • Сначала мы определяем, загружен ли jQuery, проверяя, существует ли объект jQuery в пространстве имен.
  • Если нет, мы быстро подготовим его для включения. Мы следуем лучшему опыту и загружаем его из CDN. Наконец, убедитесь, что указали на основную функцию, содержащую код для выполнения.
  • Если он уже включен, просто запустите основную функцию-обертку.

Если вы хотите избежать всех этих хлопот, я настоятельно рекомендую отличный генератор букмарклетов Бена Алмана. Он очень четко заботится о конфликтах пространства имен и версий. Хорошая вещь!

# 5 — Не портите родительскую страницу, если только вам не нужно

Букмарклеты бесполезны, если они непреднамеренно ломают страницу.

Я не могу подчеркнуть этот момент достаточно. Букмарклеты бесполезны, если они непреднамеренно ломают страницу. И беспокоиться о JavaScript — не единственное, с чем вам приходится иметь дело.

Если у вас есть интерфейс, HTML и CSS также вступают в игру. Не присваивайте своим контейнерам и общим именам классов — если вы назовете его «контейнер», вы навсегда останетесь в моей вечной ненависти.

Самый простой способ — это префикс [или суффикс, я не против] всего, с помощью строки, специфичной для букмарклета. И при написании вашего CSS, будьте очень, очень конкретны. Использование каскадирования это хорошо, но используйте его с высокой точностью. Утечка стилей на главную страницу нерегулярна и не вызывает доверия.

№ 6 — Тест, Тест, Тест

Если вы создаете меньший букмарклет, в котором включение сторонней библиотеки кажется бессмысленным, вы столкнетесь с вездесущим демоном — кросс-браузерной совместимостью.

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

Еще одна простая ловушка — это букмарклет, предназначенный для работы на всех сайтах, который работает только выборочно. Страницы могут иметь разные иерархии и использовать разные методологии. Некоторые сайты могут использовать HTML5 и использовать соответствующие контейнеры, в то время как другие могут быть безопасны и использовать общие div. При поиске информации обязательно учитывайте все школы развития.

И мы идем

Теперь, когда мы рассмотрели некоторые моменты, о которых следует помнить во время разработки, мы собираемся создать три букмарклета, о которых я говорил ранее — по одному на каждую категорию.

  • Книжный рынок, который подчиняется Reddit
  • Книжный рынок, который очищает куки текущего сайта
  • Букмарклет, который меняет цвет фона страницы

Если вы уже знакомы с базовым JavaScript, следующий код должен быть легким — это всего лишь несколько строк кода! Приведенные ниже букмарклеты были со мной уже довольно давно, и я не могу понять, где я их изначально видел. Если вы это сделаете, оставьте мне быстрое примечание в комментариях, и я добавлю кредиты соответственно.

Букмарклет № 1 — Отправить в Reddit

Мы начнем с очень простого — отправка на внешний сервис, в нашем случае Reddit .

1
2
3
javascript:location.href=’http://www.reddit.com/submit?url=’
                                +encodeURIComponent(location.href)
                                +’&title=’+encodeURIComponent(document.title)

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

Когда вызывается букмарклет, происходит следующее в логическом порядке:

  • Заголовок и URL страницы фиксируются с помощью location.href и document.title
  • Чтобы не допустить проникновения недопустимых символов, мы кодируем его с encodeURIComponent метода encodeURIComponent
  • Наконец, мы объединяем все, чтобы получить наш URL и изменить местоположение страницы на него

Этот шаблон работает в большинстве случаев для поиска и отправки. Единственной переменной здесь будет URL, который вы отправляете — каждое приложение использует свой подход. Менее минуты поиска должны увидеть вас до конца.

Например, проверочный букмарклет будет выглядеть так:

1
javascript:location.href=’http://validator.w3.org/check?uri=’+encodeURIComponent(location.href)

Обратите внимание, что мы просто отбросили заголовок страницы и изменили структуру URL-адреса, чтобы она указала на службу проверки W3.

Букмарклет № 2 — изменить фон страницы

1
javascript:void(document.bgColor=prompt(‘Color? Hex or name will do. May I suggest pink?’,’pink’))

Это так же просто, как кажется. Для простоты я решил не вводить переменные и валидацию. Мы просто посмотрим на основной код.

  • Сначала мы создаем приглашение, которое запрашивает у пользователя цвет для установки фона. Поскольку мы не проверяем ввод, я полагаюсь, что вы не шалите.
  • Наконец , мы устанавливаем фон для выбранного цвета через document.bgColor . Это оно!

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

Вы можете поиграть с этим совсем немного. Это похоже на то, как вы обычно применяете CSS-стили к элементам через JavaScript. Мы просто применяем это к произвольным страницам. Обратите внимание, что разные страницы имеют разную структуру, поэтому, если страница имеет полный контейнер, эффект может быть бессмысленным. В этих случаях вам, возможно, придется искать основной контейнер, а затем применить к нему стиль.

Букмарклет № 3 — Очистка куки

1
2
3
4
5
6
7
8
javascript:function(){
    var c=document.cookie.split(«;»);
    for(var i=0;i<c.length;i++){
        var e=c[i].indexOf(«=»);
        var n=e>-1?c[i].substr(0,e):c[i];
        document.cookie=n+»=;expires=Thu, 01 Jan 1970 00:00:00 GMT»;
    }
}()

На самом деле это не так сложно, как кажется — куки просто имеют очень строгий синтаксис, поэтому нам нужно разбирать его шаг за шагом. Давайте пройдемся по коду:

  • Сплит document.cookie на основе точки с запятой. c теперь становится массивом, содержащим все файлы cookie, установленные для текущего домена.
  • Цикл по массиву.
  • Проверьте, содержит ли cookie символ равенства, т.е. было ли установлено и возвращено значение cookie
  • Если да, мы собираем всю информацию только до нее. Если нет, пусть файл cookie будет таким, какой он есть
  • Наконец, добавьте строковое значение, которое очищает значение cookie вместе с определением даты истечения срока действия из прошлого, эффективно стирая его

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

Это упаковка

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

Вопросов? Хорошие вещи, чтобы сказать? Критицизмы? Нажмите на раздел комментариев и оставьте мне комментарий. Большое спасибо за чтение!

59
Share: