Как добавить скрипт в закладки браузера
Как известно, букмарклет это небольшой javascript-код который, будучи сохраненным в закладках браузера, используется для выполнения каких либо действий над содержимым текущей веб-страницы.
- первая часть букмарклета, которая является собственно букмарклетом это компактный javscript-код — не более 2000 символов, главная, но не единственная задача которого загрузить вторую часть;
- вторая часть букмарклета: это javscript-код произвольного размера, который выполняет всю оставшуюся работу;
- резервная часть букмараклета – которая запускается в действие, если вторая часть букмарклета не загрузилась.
- Определяет переменные, которые будут использоваться в букмарклете.
- Инициирует начало работы букмарклета или прекращает его работу с уборкой всего внедренного на чужую страничку в режиме вкл. / выкл., а также проверяет особые условия выполнения букмарклета.
- Подключает индикатор загрузки, чтобы пользователь не нервничал, пока все богатство функциональности продолжает загружаться.
- Подгружает вторую часть букмарклета которая обеспечивает выполнения всей дальнейшей работы.
- Если вторая часть букмарклета не может быть подгружена, получает данные на текущей странице, необходимые для передачи в резервную часть букмарклета
- Вызывает резервную часть букмарклета и передает ей необходимые данные.
Реальный пример
В качестве примера «из реальной жизни» воспользуемся букмарклетом веб-сервиса TheOnlyPage (сервис хранения закладок, заметок и html-фрагментов).
Чтобы установить букмарклет в ваш браузер достаточно перейти на страничку справочной системы TheOnlyPage и перетянуть соответствующую ссылку на панель закладок браузера.
К выполнению букмарклета можно перейти проделав следующие 4 шага:
Шаг 1: Кликнуть на ссылку букмарклета, если вы еще не входили в TheOnlyPage, то переходите к Шагу 2, если уже вошли, то сразу к заключительному Шагу 4.
Шаг 2: Нажать на кнопку Войти в TheOnlyPage в открывшейся форме.
Шаг 3: В результате, в отдельном окне отображается форма входа. Для быстрой регистрации / входа можно воспользоваться кнопками входа через социальные сервисы.
Шаг 4: Отображается форма сохранения закладки / заметки / html-фрагмента(картинки) получаемых с текущей просматриваемой страницы.
Tеперь пройдемся по javascript-коду букмарклета и увидим как все происходит.
Код букмарклета следующий:
- размещение всего кода внутри анонимной функции;
- использование только локальных переменных, объявленных внутри этой функции, что исключает возможность конфликтов с внешней средой.
но при этом создается переменная bookmarlet_code , которая является потенциальным источником конфликта со скриптами текущей страницы. Чтобы не допустить возникновение глобальной переменной, декларацию и выполнение функции совмещают:
Определение переменных
- все переменных объявляются в одном месте, одним ключевым словом var ;
- имена переменных задаются одним символом;
- глобальным переменным, параметрам и функциям, которые будут неоднократно использоваться, следует присвоить односимвольные псевдонимы.
В нашем примере переменные объявляются следующим образом:
Включение / выключение, проверка особых условий выполнения букмарклета
Важным моментом является возврат именно пустого значения void(0) . Потому, что иначе, текущий документ, то есть контент просматриваемой веб-странички будет заменен возвращаемым значением.
Механизм включения / выключения используют для того, чтобы повторные нажатия ссылки букмарклета не запускали букмарклет на выполнение снова и снова. Значительно удобней наоборот, иметь возможность повторным кликом по той-же ссылке завершить работу этого букмарклета.
Механизм включения / выключения, в нашем примере реализуется следующим образом.
Если кликнули первый раз: внедряем в просматриваемый документ картинку-индикатор загрузки
Если кликнули второй раз: обнаруживаем уже внедренной картинку-индикатор загрузки, удаляем эту картинку и завершаем работу, возвратом пустого значения: void(0).
Картинку-индикатор загрузки мы определили в начале, при объявлении всех переменных
Если кликнули первый раз, картинки еще нет, g=undefined
Если второй раз, то переменная g содержит картинку и завершение работы происходит следующим образом:
Подключение индикатора загрузки
Подключение индикатора загрузки в нашем примере осуществляется следующим образом
- в коде второй части букмарклета, после окончания загрузки, обнаружить индикатор загрузки и отключить;
- при повторном клике по ссылке букмарклета обнаружить индикатор загрузки и отключить.
Подгрузка второй части букмарклета
Чтобы загрузить javascript-код второй части букмарклета, следует проделать действия подобные тем, что и при внедрении картинки-индикатора закгрузки.
Важным моментом является присоединение скрипта именно к телу ( body ), а не к заголовку ( head ) документа. Для HTML 5 заголовок не является обязательным атрибутом и возможны проблемы, если вместо document.body.appendChild использовать document.head.appendChild .
Резервное выполнение букмарклета
К сожалению, встречаются ситуации, когда скрипт второй части букмарклета в принципе не может быть прикреплен к текущему документу.
Помимо экзотических случаев, типа, просмотр pdf файла браузером Firefox, главной причиной возникновения ошибки загрузки скрипта является новый механизм обеспечения безопасности веб-страниц Content Security Policy.
Основное предназначение нового стандарта Content Security Policy является защита пользователя от кроссайтового выполнения скриптов. Полностью его поддерживают браузеры Firefox и Google Chrome.
Что не может не огорчать, а иногда и вызывать недоумение и справедливый гнев у создателя букмарклета. Конечно, можно посоветовать в качестве альтернативы браузер Opera, в котором этот стандарт еще не реализован, но требуется решение и для преданных пользователей браузеров Firefox и Google Chrome.
Стоит отметить, что если сайт оборудован средствами Content Security Policy то «блэк джек со шлюхами» * далеко не всегда получится замутить, но некий резервный вариант, с урезанными функциональностью и презентабельностью возможен.
На этот раз форма букмарклета не отображается непосредственно над текущей страницей сайта, а вместо этого загружается новая страница по адресу:
То есть попадаем на специальную страничку веб-сервиса TheOnlyPage, на которой отображается очень знакомая форма, для создания новой закладки, заметки или картинки.
Как можно заметить, параметры для резервной части букмарклета передаются в адресной строке. В нашем случае были переданы следующие 4 параметра:
Совершенно ясно, что резервный вариант букмарклета запускается на выполнение только, если не удалось присоединить код второй части букмарклета. Для того, чтобы перехватить ошибку загрузки скрипта, устанавливаем соответствующий обработчик события error .
«с блэк джеком и шлюхами» * (with blackjack and hookers) — фраза робота Бендера из второго эпизода первого сезона «Футурамы».
Для выполнения однотипных задач лучше всего использовать пакетные файлы, т. е. файлы которые автоматизируют работу. Например в среде DOS — BAT-файлы, в Windows — WSH (Сервер Сценариев) и т. д. Ну, а с помощью закладок любого браузера, поддерживающего протокол javascript:,можно добиться невообразимо быстрых и полезных результатов, создавая cкриптовые закладки или просто JS-закладки. После того, как вы установите первую такую закладку, я гарантирую, что ваш взгляд на блуждание по интернету (и не только) в корни изменится, разумеется в лучшую сторону.
Совет:
Создайте отдельную папку в «Избранном» (Favorites), и все JS-закладки устанавливайте в эту папку. После, вам будет легче соорентироваться. Также, для быстрого доступа к основным, часто используемым закладкам, можно использовать панель «Ссылки» (Links).
Первый способ установки JS-закладок:
* Откройте в браузере любой документ.
* Установите на него заклкадку (CTRL + D).
* Откройте свойства закладки и впишите в поле URL любой скрипт на javascript, например:
* Вас встретит выскочка-предупреждение, — согласитесь: «Да» (Yes).
Способ второй, используемый на сайте:
Ссылки помеченные звездочками с обеих сторон, и есть JS-закладки (пример: * закладка *). Перед установкой, вы можете попробовать закладку в действии, кливнув по ней как по обыкновенной ссылке.
* Вам остается кликнуть по такой ссылке правой кнопкой мыши, и выбрать «Добавить в Избранное» (Add to Favorites).
* Или кликнуть левой кнопкой мыши и, не отпуская ее, перетащить закладку на панель «Ссылки» или в папку «Избранное».
* Опять выскочка, опять «Да».
При создании собственной закладки, помните три условия:
1. Строка скрипта должена начинаться с javascript:.
2. Максимально допустимое количество символов в строке скрипта 2048.
3. Для подстраховки, в конец скрипта добавляйте void(null), т. к. если ваш скрипт возвратит какое либо значение, то это значение перепишет открытый в этот момент документ.
* * Быстрый поиск по странице *.
Достойная замена стандартному "Find" (Ctrl+F). (для документов без фреймов, IE4+).
* * Просмотр части HTML кода *. (перед активизацией нужно отметить нужный участок документа).
Закладка очень пригодится начинающим вэб-программистам и в особенности верстальщикам, которым не придется каждый раз просматривать весь HTML-документ в поисках отдельной нужной части кода. (для документов без фреймов, IE4+).
* * Маштабируем документ *.
Подробнее о закладке и свойстве zoom смотрите статью «Свойство zoom».
Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite . Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.
Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel . Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню.
Для браузера Opera ссылка добавления в закладки должна иметь атрибут rel="sidebar" . Но если этот атрибут ставить сразу по умолчанию, то некоторые браузеры типа Netscape будут отрабатывать функцию добавления в закладки дважды: первый раз через скрипт и второй раз через атрибут rel. Поэтому придется изменять атрибуты ссылки динамически, предварительно определив браузер проверкой типа объекта opera.
Теперь, когда у нас есть все исходные данные, можно написать кроссбраузерный скрипт для добавления страницы в закладки. У меня получился вот такой:
Пример ссылки "Добавить в Избранное" для этого скрипта:
Рабочий пример реализации вы можете увидеть прямо на этой странице. Использование конструкций try-catch позволяет скрипту правильно отрабатывать в любых нестандартных ситуациях, например в окне IE Tab, открытом в браузере Firefox. Также скрипт корректно работает в различных экзотических браузерах, которые нельзя однозначно определить через UserAgent или DOM-свойства . Всякие хваленые коммерческие поделки типа DLE в этой ситуации молча обламываются.
Ищется документация по движку WebKit (браузеры Safari, Chrome) в части добавления страницы в закладки. Кто найдет - большая просьба поделиться.
Как и многие веб-разработчики, я посвящаю много времени тестированию пользовательского интерфейса сайтов, над которыми работаю.
Автоматизированное тестирование, конечно, является хорошей помощью в этом процессе, но « болевые точки » в интерфейсе зачастую невозможно выявить иным способом, кроме как использовать сайт. Ещё и ещё раз. Этот процесс может очень быстро надоедать. Особенно заполнение форм.
Я сам попал в такую ситуацию пару месяцев назад, когда мы добавляли британский фунт к поддерживаемым валютам при расчёте в Wufoo .
Для проверки необходимо было заполнить множество полей с именами, адресами, номерами кредиток и всего прочего, что подразумевается в процессе расчёта. Разумеется, значительная часть этих данных не должна была повторяться:
В конце концов, я сделал букмарклет для быстрого заполнения форм тестовыми данными. ( Bookmarklet – программа на JavaScript , выполненная в виде закладки в браузере, гибрид английских слов « bookmark » – закладка и « applet » – маленькое приложение. – Прим. перев.)
Я выбрал форму букмарклета, потому что:
- его легко передать пользователю;
- его легко обновить без участия пользователя;
- он запускается на любой платформе без изменений.
Вы можете легко сделать букмарклет, создав новый « загончик » на CodePen и поместив в HTML что-то вроде:
Пользователю достаточно перетащить получившуюся ссылку в область закладок своего браузера. Клик по закладке запустит код на текущей странице.
В этом проекте я полагался на jQuery для придания коду максимальной удобочитаемости и кроссбраузерности. Если кому-то нужна версия на чистом JavaScript , напишите мне комментарий – я постараюсь что-нибудь сообразить.
Для создания случайных данных я использовал замечательную библиотеку Faker . Её JavaScript -реализацию можно взять здесь .
Основа букмарклета
Мы можем поместить весь код прямо в ссылку. Но такой вариант будет неудобно читать и сопровождать. Кроме того, мне хотелось иметь возможность вносить исправления в код, не заставляя пользователей обновлять закладку. Так что лучше оставить в букмарклете ссылку на внешний файл.
Сам букмарклет выглядит так:
Вполне возможно, что при разработке букмарклета вы захотите воспользоваться локальным сервером. В таком случае не забудьте заменить адрес в ссылке на адрес реального сервера, когда будете распространять ваш скрипт.
Заполнение полей
Теперь, когда мы закончили с закладкой, загружающей наш скрипт, можно взяться и за сам скрипт.
Сверхважной задачей для нас будет не сломать ничего в странице, над тестированием которой будет работать наш скрипт.
Поэтому мы обернём его в самозапускающуюся анонимную функцию . Это соответствующим образом ограничит область видимости наших функций и переменных:
Мне очень нравится функция генератора псевдослучайных чисел, приведённая Крисом Койлером в этой статье . Воспользуемся ей по мере необходимости:
Теперь загрузим FakerJS . Поскольку наш скрипт зависит от jQuery , мы можем использовать его механизм отложенной загрузки при помощи функции $.getScript :
Теперь, когда доступ к Faker нам обещан , мы можем использовать его методы для генерации разнообразных правдоподобных имён, мест, адресов и других тестовых данных.
Повторное использование сгенерированных данных обеспечит нам следующий конструктор:
Неплохо было бы протестировать также чекбоксы и радиокнопки на нашем сайте, выбирая их в случайном порядке. Для этого нам придётся несколько расширить функциональность нашего конструктора:
И наконец, нам нужно сопоставить генерируемые данные с различными полями тестируемых форм. Мы извлечём из нашей страницы все поля форм и заполним их данными в соответствии с их типом и CS S-классом.
В таком виде наш скрипт прекрасно реализует разделение между механизмом генерации данных и механизмом их использования:
Заключение
Таким образом, мной был написан простой и быстрый заполнитель форм в виде букмарклета для тестирования одного проекта. Определённо, существует множество способов его улучшить. Однако в условиях нехватки времени этот инструмент был использован как есть, и вполне справился со своей работой.
Если хотите, можете рассмотреть также Inline Copy Editor – ещё один мой букмарклет, код которого я открыл для команды дизайнеров SurveyMonkey .
Надеюсь, моя статья была вам полезна. Дайте знать, если появятся вопросы.
Bookmarklets (букмарклеты) - закладки с JavaScript кодом
Предлагаю админам прекрепить эту тему. Потому что это тоже разнавидность скриптов.
Как создать bookmarklet?
1. Создать закладку.
2. Вставить в поле адреса код bookmarklet
Готово!
Стандартный шаблон bookmarklet:
На место alert('test'); подставьте стандартный код JavaScript. После нажатия на закладку - он выполнится.
Пример 3:
Поиск в гугл выделенного на странице текста.
Выделить текст на странице. Нажать bookmarklet - откроется страница с результатами поиска в google.
Где взять:
1. http://marklets.com/ - сборник букмарклетов, код никто не проверяет, будьте осторожны!
2. Попросить на любом форуме в теме "скрипты" написать для вас, может кто-то поможет
3. Использовать google для поиска
Что за странный вид кода получается при вставке Bookmarklet в закладку?
Это URI Encoding в который кодируется JavaScript, потому что в адресе нельзя пробелы. Ну и чтобы проблем с кодировками не было.
Вы увидете код похожего вида:
Существует 2 (два) стандартных способа вернуть этому коду оригинальный вид:
1. Вставить код в онлайн сервис: http://jsbeautifier.org/ или любой другой.
2. Использовать стандартные инструменты браузера (ctrl+shift+I) и там в разделе "дебаг" (отладка) есть кнопочка, которая делает код красивым.
Конечно вы можете найти любое дополнение или даже отдельную программу для красивого форматирования кода. Например дополнение Web Developer или любая IDE типа Eclipse или NetBeans умеет красиво форматировать. Как и множество плагинов для текстовых редакторов: Notepad++, Atom и других.
Оптимизаци:
Лишние пробелы и табуляция, длинные имена переменных, комментарии. Всё это занимает место и память. Некоторые куски кода меденные, хотя это неочевидно.
Оптимизатор Google Closure Compiler исправит всё за вас! Просто вставьте код в окошко и нажмите кнопочку! Это не единственный оптимизатор, их не мало, например: UglifyJS
Если видите код с переменными a, b, c - это не значит, что его кто-то так писал:
Его пропустили через оптимизатор.
Где писать bookmarklets. (инструменты разработки)
1. Самый простой и удобный инструмент: Scratchpad. Он встроен в Firefox, нажмите Shift+F4 для открытия. И откройте консоль, чтобы видеть ошибки: Ctrl+Shift+K. Только нужно помнить, что и Scratchpad не всегда ведет себе так, как поведет bookmarklet.
2. Множество сред разработки (IDE) типа Eclipse или NetBeans могут открывать результат работы JavaScript в браузере или даже имеют встроенный браузер.
3. Atom - текстовый редактор. По сути сам является браузером. Но для удобной разработки придется поискать плагины к нему.
4. GreaseMonkey - в нём тоже можно тестировать код, только нужно иметь ввиду, что возможности и привилегии кода в GreaseMonkey больше. Поэтому код работающий там может не сработать в bookmarklet. Для Chrome (Chromium) есть аналог: Tampermonkey
Как писать bookmarklets.
1. Способ 1: просто писать код. По некоторым сведениям до 2000 символов. (поэтому код пропускают через оптимизатор - чтобы больше кода поместилось)
2. Способ 2: написать код, который подгружает другой код из интернета и выполняет. Так снимается ограничение на 2000 символов.
Хаки bookmarklet (отличия от JavaScript)
1. Если функция вернет без void значение return '123', то возвращенное значение '123' откроется в текущей вкладке и будет помещено в
2. Ещё варианты обёрток для кода bookmarklet:
Вариант 1. Вызвать void последним: javascript:console.log('hello');void(0);
Вариант 2. Не вызывать return вконце: javascript:(function()< console.log('hello'); /* в конце нету return */ >)();
3. Если вставить в адресную строку код: javascript:(function()< return 'hello'; >)();, то javascript: из него удалится само в целях безопасности. Но если ввести javascript: вручную, то bookmarklet сработает.
Проблемы:
1. Если на сайте включено Content Security Policy, то window.open(), window.location.href = document.URL и подобные функции для загрузки контента с других сайтов не сработают.
Причем такой хак со вставкой скрипта в страницу содержимое которой получаем через return - тоже не сработает . И при этом даже ошибок в консоль не пишет:
Читайте также: