суббота, 18 ноября 2017 г.

Как сделать свой букмарклет

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

По факту  javascript работает с объектами, и этими объектами может быть окно (window), текущая страница (document) или объекты браузера, грубо говоря


Если мы запустим скрипт  window.open('http://ya.ru'); то у нас откроется новая страница с яндексом. Но для того чтобы браузер понял что это именно скрипт для выполнения, то необходимо перед этим поставить обязательный атрибут javascript:
То есть полностью скрипт будет иметь вид: javascript: window.open('http://ya.ru'); можно сократить просто open. Если его скопировать в закладку, то при щелчке по нему код будет выполняться и открывать страницу яндекса, но это совсем не интересно, интересно передавать скрипту нужную информацию, например, искать в яндексе выделенное слово . Сейчас расскажу как это сделать.

Для работы с выделенным текстов в javascript используется метод window.getSelection(). А для того чтобы этот текст дальше передавать в обработку, его нужно записать в переменную, и сделать это можно вот так:
videleno = window.getSelection();
После этого мы можем открывать окно яндекса и передавать ему выделенный текст таким образом:
open('https://yandex.ru/search/?text='+videleno);
И тогда сложив все вместе мы получаем код работающего букмарклета :
javascript:videleno=window.getSelection();open('https://yandex.ru/search/?text='+videleno);
Это очень грубый букмарклет, но он работает. Вообще по хорошему нужно еще добавлять метод encodeURIComponent() для более правильной обработки адреса. То есть более правильная конструкция (хотя может я и ошибаюсь, но часто видел именно такую) выглядит так javascript:selected=window.getSelection();open('адрес'+encodeURIComponent(selected));
И да, во всех написаниях методов необходимо соблюдать регистр букв, иначе скрипт не будет работать.

Продолжаем дальше. Если необходимо чтобы яндекс открывался в том же окне, то вместо open нужно использовать location.href=''. Объект location содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.
Скрип получается такой: 
javascript:videleno=window.getSelection();location.href='https://yandex.ru/search/?text='+videleno;
 Чтобы в яндексе найти просто информацию о странице где вы сейчас находитесь, то можно сделать вот так: 
javascript:location.href='https://yandex.ru/search/?text='+location.href
Чтобы в яндексе найти просто информацию о домене где вы сейчас находитесь, то можно сделать вот так: 
javascript:location.href='https://yandex.ru/search/?text='+location.host
Как уже говорилось ранее, чтобы открыть в новом окне используем open.

Кроме выделенного в документе, можно выудить и элементы с определенными свойствами. Например, если на ютубе найти кнопку воспроизведения (с поможет панель разработчика), а потом написать скрипт который будет щелкать по этой кнопке сам с заданным интервалом, то можно будет... ну например накручивать просмотры в автомате. Готовый скрипт выглядит так:
javascript:setInterval("document.getElementsByClassName('ytp-play-button ytp-button')[0].click()", 1000);
По аналогии можно автоматизировать что-угодно, достаточно узнать имя класса нужного вам элемента страницы. здесь 1000 - это одна секунда (1000ms), то есть каждую секунду будет нажиматься кнопка воспроизведения . Можно всегда поменять на нужное вам время. Чтобы остановить скрипт, перезагрузите страницу.

Есть уже готовый скрипт по поиску логинов на домене. Например вы находитесь на форуме и хотите что-то что-то скачать, но без авторизации форум это не позваляет сделать, но нажав на букмарклет вы сможете найти логины других людей которыми можно воспользоваться
javascript:(function(){w=open(('http://www.bugmenot.com/view/'+encodeURIComponent(location.host)),'w','location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=500,height=400,modal=yes,dependent=yes');if(w){setTimeout('w.focus()',1000)}else{location='http://www.bugmenot.com/view/'+encodeURIComponent(location.host)}})();
Из этого скрипта можно для своих использовать настройки открытия окна. BugMeNot
Проверка тИЦ домена
javascript:void(str='http://search.yaca.yandex.ru/yca/cy/ch/' + document.location.host+'/');if(str){yaca=open(href=str,'','scrollbars,resizable');}yaca.focus();
Скрипт для закрытия всех PopUp окон. PopKiller
javascript:void(a=document.getElementsByTagName('*'));for(i=0;i<a.length;++i)if(a[i].style.position=='absolute'||a[i].style.position=='fixed')void(a[i].style.display='none');
По сути этот скрипт ищет все элементы на странице, и если какой-то элемент имеет аттрибуты фиксированной позиции (как все попап окна), то он делает его невидимым.

Создание ссылки, для вставки ее в HTML редактор. В нем просто интересна функция применения prompt. LinkMake
javascript: void(prompt('Ссылка сна эту страницу',unescape('%3Ca href=%22') + location.href + unescape('%22%3e') + document.title + unescape('%3c/a%3e')));
После нажатия на ссылку, появится всплывающее окно с заголовком  Ссылка на эту страницу, а ниже будет идти поле, по умолчанию заполненное конструкцией <a href='тут ссылка на текущую страницу (location.href )'>тут заголовок страницы (document.title) </a>

Убрать лишнее - позволяет убрать лишние блоки со страницы.
ClipConvert - конвертирует клипы с ютуба с помощью сервиса www.clipconverter.cc
Ruler - рулетка на мониторе, узнать расстояние между элементами на странице
Night - включить ночной режим на странице
Printlimitator - еще один сервис для улучшения печатающих свойств сайта
GoogleSite - искать на сайте при помощи гугла
javascript:void(str=prompt('String to search for at '+document.domain,''));if(str){void(location=('http://www.google.com/search?as_q='+str+'&as_sitesearch='+document.domain));}
SuperGenPass  - генератор паролей
AdBlock -
Поиск картинок в гугле
javascript:location.href='http://www.google.com/searchbyimage?image_url='+location.href
ROT13 - кодирование декодирование rot13 (только для латинницы)
AdBlock
OfflineCalc
VirusTotalScan
Disable StyleSheet
3D
EditPage - javascript:document.body.contentEditable='true';document.designMode='on';void 0
КодСтраницы
PwnYouTube - скачивание с ютуба
URL Encoder - javascript:void(prompt('Encoded:',encodeURIComponent(prompt('Stringtoencode:'))))
DuckDuckGo
Increment URL
Screenshot
View all images
Open in new tab

1 комментарий:

  1. Вот тут https://iksweb.ru/tools/bookmarklet/ ещё есть хорошие букмарклеты

    ОтветитьУдалить