Букмарклеты

16 ноября 2016  174  инструменты, Firefox, скрипты, букмарклет

 

Букмарклет (bookmarklet) — функциональный инструмент для браузера. В основе букмарклета лежит JavaScript, который в один клик выполняет определенную задачу. К примеру, извлекает данные из страницы, открывает список ссылок, переводит на русский или отправляет URL текущей веб-страницы на сторонний сервис.

Поклонники Mozilla Firefox или Google Chrome хорошо знакомы с браузерными расширениями. Букмарклет — кроссбраузерная мини-версия расширения в виде закладки. Букмарклет не нагружает браузер и оперативную память, практически невесомый и очень удобный. Если вы до сих пор не пользуйтесь — самое время начать!

Как установить букмарклет

Есть два способа установки. Первый — буквально перетаскивание готового букмарклета в закладки браузера. Второй — редактирование готовой закладки.

1) Перетаскивание

Захватите ссылку-букмарклет левой кнопкой и, не отпуская, перетащите ее в закладки.

Перетаскивание

2) Редактирование закладки

Скопируйте ссылку-букмарклет...

Копирование

или JavaScript код букмарклета.

Копирование

Сохраните любую веб-страницу в закладки (используйте быстрые клавиши Ctrl + D).

Новая вкладка

Откройте список закладок. Найдите сохраненную закладку, нажмите правую кнопку мыши — Свойства. Переименуйте закладку, в строку адреса вставьте скопированный JavaScript код. Сохранить.

Редактирование вкладки

Как пользоваться букмарклетом

При просмотре какой-либо веб-страницы откройте закладки своего браузера, выберите нужный букмарклет и кликните на него. Скрипт начнет выполнять задачу в текущем или новом окне. Всё :-)

Полезные букмарклеты для браузера

Ниже — мой список. А какими букмарклетами пользуетесь вы? Поделитесь в комментариях.

Google Переводчик

Перевод страницы на русский язык одним кликом.

Google Поиск по сайту

Удобная функция поиска по сайту с помощью Гугла.

Google Page Speed

Отправляет страницу на проверку в сервис Google Page Speed.

Google Mobile-Friendly

Отправляет страницу на проверку в сервис Google Mobile-Friendly.

HTML Валидатор

Отправляет исходный код страницы на валидацию в Markup Validator W3C.

Список ссылок на странице

Создает аккуратный список всех URL на странице.

Блокнот для записей

Окно для записей, вставки каки-либо данных и т. п.

GTMetrix анализ сайта

Отправляет страницу на проверку в сервис GTMetrix.

Мета-теги страницы

Показывает данные мета-тегов страницы: заголовок, описание, ключевые слова.

Заголовки H1–H6

Выделяет и подписывает все заголовки на странице.

960 Grid

Сетка для верстки с виджетом настроек.

Кол-во слов и знаков

Считает количество символов, символов без пробелов и слов в выделенном тексте.

Resizer — проверка адаптивной вёрстки

Просмотр страницы в разных размерах экрана.

javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return%20false;d.write('<!DOCTYPE%20HTML><html%20style="opacity:0;"><head><meta%20charset="utf-8"/></head><body><a%20data-viewport="240x240"%20data-icon="handy">Mobile</a><a%20data-viewport="320x480"%20data-icon="mobile">Mobile%20(e.g.%20Apple%20iPhone)</a><a%20data-viewport="320x568"%20data-icon="mobile"%20data-version="5">Apple%20iPhone%205</a><a%20data-viewport="375%C3%97667"%20data-icon="mobile"%20data-version="7">Apple%20iPhone%207</a><a%20data-viewport="414%C3%97736"%20data-icon="mobile"%20data-version="7+">Apple%20iPhone%207%20Plus</a><a%20data-viewport="600x800"%20data-icon="small-tablet">Small%20Tablet</a><a%20data-viewport="768x1024"%20data-icon="tablet">Tablet%20(e.g.%20Apple%20iPad%202-3rd,%20mini)</a><a%20data-viewport="1024x768"%20data-icon="display"%20data-version="17%E2%80%B3">17%E2%80%B3%20Display</a><a%20data-viewport="1280x800"%20data-icon="notebook">Widescreen</a><a%20data-viewport="2560x1600"%20data-icon="display"%20data-version="30%E2%80%B3">30%E2%80%B3%20Apple%20Cinema%20Display</a><script%20src="https://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));

Изображения на странице

Выводит в отдельном окне все изображения со страницы и их URL.

javascript:var%20win=window.open("","","width=300,height=500,resizable=0,scrollbars=1,status=0,toolbar=0");win.document.write("<style>img{max-height:100px}input{width:100%}</style>");var%20imgs=document.getElementsByTagName("IMG");if(imgs.length>0){[].forEach.call(imgs,function(e){if(e.src)win.document.write("<p><img%20src='"+e.src+"'/><br/><input%20value='"+e.src+"'/></p>")})}

Открыть несколько выделенных ссылок

Открывает выделенный список ссылок «пачкой» — каждую ссылку в новой вкладке.

javascript:(function(){var%20n_to_open,dl,dll,i;%20function%20linkIsSafe(u)%20{%20if%20(u.substr(0,7)=='mailto:')%20return%20false;%20if%20(u.substr(0,11)=='javascript:')%20return%20false;%20return%20true;%20}%20n_to_open%20=%200;%20dl%20=%20document.links;%20dll%20=%20dl.length;%20if%20(window.getSelection%20&&%20window.getSelection().containsNode)%20{%20/*%20mozilla%20*/%20for(i=0;%20i<dll;%20++i)%20{%20if%20(window.getSelection().containsNode(dl[i],%20true)%20&&%20linkIsSafe(dl[i].href))%20++n_to_open;%20}%20if%20(n_to_open%20&&%20confirm('Open%20'%20+%20n_to_open%20+%20'%20selected%20links%20in%20new%20windows?'))%20{%20for(i=0;%20i<dll;%20++i)%20if%20(window.getSelection().containsNode(dl[i],%20true)%20&&%20linkIsSafe(dl[i].href))%20window.open(dl[i].href);%20}%20}%20/*%20/mozilla%20*/%20if%20(!n_to_open)%20{%20/*ie,%20or%20mozilla%20with%20no%20links%20selected:%20this%20section%20matches%20open_all_links,%20except%20for%20the%20alert%20text%20*/%20for(i%20=%200;%20i%20<%20dll;%20++i)%20{%20if%20(linkIsSafe(dl[i].href))%20++n_to_open;%20}%20if%20(!n_to_open)%20alert%20('no%20links');%20else%20{%20if%20(confirm('No%20links%20selected.%20%20Open%20'%20+%20n_to_open%20+%20'%20links%20in%20new%20windows?'))%20for%20(i%20=%200;%20i%20<%20dll;%20++i)%20if%20(linkIsSafe(dl[i].href))%20window.open(dl[i].href);%20}%20}%20})();

 

Комментарии для сайта Cackle
наверх