Как добавить скрипт в закладки браузера
Букмарклет(bookmarklet) - это javascript-код, который сохраняется как закладка в браузере. Он работает за счет использования протокола <a href="javascript. ">.
Поэтому де-факто букмарклет - это javascript-плагин к браузеру.
Пример: поиск выделенного в google
Для примера сделаем букмарклет, который осуществляет поиск выделенного текста в гугле.
Функция на javascript была бы такая:
Выделите текст и кликните: Искать выделенное
Превращение функции в букмарклет
Чтобы превратить функцию в букмарклет - достаточно "запаковать" ее в одну строку и заменить кавычки на одинарные (или на ",), чтобы не было конфликта с закрывающими кавычками javascript:
Все, букмарклет готов. Для установки - достаточно перетащить мышкой эту ссылку в закладки.
После этого достаточно выделить текст на странице и кликнуть на закладку, чтобы найти выделенный текст в гугл.
Правила написания букмарклетов
Внимание, фреймы!
Открытый документ может представлять собой фреймсет. При этом способы обращения к содержимому, использованные в нашем примере, работать не будут. Текст надо искать во фреймах, а не в текущем окне.
Есть несколько способов обойти эту проблему.
Обнаружение фреймов
Если букмарклет не задуман для работы с фреймами - можно проверять их наличие и выводить предупреждение.
Для более надежной работы исключим ифреймы: в подавляющем большинстве сайтов они используются чисто технологически: в ajax, для обхода некоторых багов и тому подобное.
Обход фреймов
С другой стороны, поддержка фреймов - хорошая фича. Например, букмарклет для поиска в гугл должен работать на сайтах с фреймами.
Решение - рекурсивный обход фреймов:
Вызов traverse(window) рекурсивно обрабатывает(например, ищет выделение) все фреймы, начиная с текущего окна.
В нее добавлена конструкция try . catch для обработки возможных ошибок безопасности браузера, которые происходят, если доступ к фрейму противоречит политике Same Origin. Например, когда ифрейм используется для показа рекламы с другого домена.
Выбрать кавычки
Так как букмарклет закрыт в двойные кавычки - желательно использовать в коде либо ", либо одинарные.
Например, в букмарклете для поиска в гугл можно заменить все " на одинарные кавычки. Тоже будет работать:
Используй возвращаемое значение или void'и его
Если функция или операция присваивания возвращает значение - то, какое бы оно ни было, букмарклет перенаправит посетителя на новую страницу, которая показывает это значение.
Иногда это можно грамотно использовать. например показать сводку по ключевым словам в документе. Обычно же это значение перехватывают и обнуляют при помощи void . Типичное решение - поставить в конце букмарклета:
Альтернативный вариант - делать всю работу внутри функции, не возвращающей значения. Для этого создается и тут же вызывается анонимная функция:
Этот способ имеет еще тот бонус, что вы можете использовать локальные переменные и не загрязнять глобальную область видимости.
Переменные букмарклета и область видимости
Букмарклет работает в глобальной области видимости.
Это значит, что даже переменная, объявленная с var , будет глобальной:
Чтобы это обойти - используют 2 способа.
Первый - назначить переменным уникальные имена типа aBBZZ . Это криво.
Второй - оборачивать букмарклет в анонимную функцию:
При этом также отпадает необходимость в void .
Так выглядит поисковый букмарклет, обернутый в анонимную функцию:
В отличие от исходного варианта, он не загрязняет глобальную область переменными selected и q .
Число символов
Число символов в букмарклете ограничено. Причем, оно варьируется не только от браузера к браузеру, но и между версиями.
Вот некоторые данные:
| Браузер | Максимальное кол-во символов |
| Netscape | > 2000 |
| Firefox | > 2000 |
| Opera | > 2000 |
| IE 4 | 2084 |
| IE 5 | 2084 |
| IE 6 | 508 |
| IE 6 SP 2 | 488 |
| IE 7 | 2084 |
Как видите, Internet Explorer 6.0 держит до 508 символов, а Internet Explorer 6.0 SP2 - еще хуже, всего лишь 488 символов. Так что, если вы хотите быть уверенными, что букмарклет запустится в IE6 - ограничьте его 488 символами.
Это ограничение не относится напрямую к размеру скрипта в <a href="javascript. "> . Оно срабатывает когда букмарклет добавляют в избранное. Вы можете сделать замечательный букмарклет, он будет работать на странице, но при добавлении в избранное код будет обрезан.
Чтобы это обойти, букмарклет в IE может подключать внешние скрипты:
Альтернативный подход - разрабатывать букмарклет только для "Продвинутых браузеров". Это работает, если букмарклет представляет собой полезный инструмент, ради которого не лень и браузер сменить.
Например, многие SEO'шные букмарклеты сделаны именно так. Хочешь использовать - поставь FF и инструмент к твоим услугам.
Грамотная статья!
раскрыты некоторые особенности, про которые нет ни слова в других статьях про букмарклеты.
Большое спасибо
Как известно, букмарклет это небольшой 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) — фраза робота Бендера из второго эпизода первого сезона «Футурамы».
[JS] Соберите сценарий JavaScript в качестве закладки и нажмите Execute
Эффект
Из операции следует использовать сценарий JavaScript в качестве закладки. Когда вы хотите использовать соответствующие закладки в столбце, вы можете выполнить скрипт;
Поскольку действие, вы можете в основном выполнить несколько сценариев на текущей странице, например, в эксплуатации определенной страницы DOM, изменяя цвет шрифта, удаление рекламы и т. Д.; Особое использование JS может сказать слишком много, вам все еще нужно найти удобство и практично Функции, просто дайте метод;
Например, выберите щелчок для изменения закладки JS Цвет шрифта страницы:
Метод производства
(Здесь возьмите браузер Chrome в качестве примера, другие операции браузера похожи):
- Щелкните правой кнопкой мыши на пустом размещении ---- Добавить веб-страницу;
- Установите имя закладки и на URL JavaScript Colon. В начале, например, это:
3. После сохранения открыть любую веб-страницу (за исключением некоторых специальных страниц), нажмите на панель закладки, чтобы выполнить скрипт JS;
4. Если выполненный скрипт имеет возвращаемое значение, если вы измените цвет веб-шрифта, вы перейдете на новую страницу, отобразите возвращаемое значение, следующий код, вы можете использовать пустоту (0) в коде; для предотвращения прыжка, поддерживать переднюю страницу;
Не добавляйте пустоту (0):
Вы можете увидеть, что страница переходит после нажатия закладки сценариев JS, показывающая возвращаемое значение;
Добавить vid (0):
Вы можете видеть, что страница не имеет прыжках, а цвет основного шрифта основного корма изменился;
Bookmarklets (букмарклеты) - закладки с JavaScript кодом
Предлагаю админам прекрепить эту тему. Потому что это тоже разнавидность скриптов.
Как создать bookmarklet?
1. Создать закладку.
2. Вставить в поле адреса код bookmarklet
Готово!
Стандартный шаблон bookmarklet:
Пример 3:
Поиск в гугл выделенного на странице текста.
Выделить текст на странице. Нажать bookmarklet - откроется страница с результатами поиска в google.
Что за странный вид кода получается при вставке Bookmarklet в закладку?
Это URI Encoding в который кодируется JavaScript, потому что в адресе нельзя пробелы. Ну и чтобы проблем с кодировками не было.
Вы увидете код похожего вида:
Оптимизаци:
Лишние пробелы и табуляция, длинные имена переменных, комментарии. Всё это занимает место и память. Некоторые куски кода меденные, хотя это неочевидно.
Оптимизатор 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 символов.
Читайте также: