Как добавить скрипт в закладки браузера

Обновлено: 05.07.2024

Букмарклет(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 символов.

Читайте также: