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

В этом блоге мы рассмотрим различные примеры создания букмарклетов.

  1. Сохранить в карман

Pocket — популярный сервис закладок, который позволяет сохранять статьи и веб-страницы для последующего чтения. Если вы используете Pocket, вы можете создать букмарклет, который сохранит текущую страницу в вашей учетной записи Pocket. Вот как:

javascript:void(location.href='https://getpocket.com/edit?url='+encodeURIComponent(location.href))

Скопируйте и вставьте приведенный выше код в новую закладку в веб-браузере. Когда вы щелкнете по букмарклету, откроется новое окно со страницей Pocket для текущего URL-адреса. Затем вы можете сохранить страницу в своей учетной записи Pocket.

2. Поиск выбранного текста в Википедии

Если вы часто просматриваете информацию в Википедии, вы можете создать букмарклет, который позволит вам искать выбранный текст в Википедии. Вот как:

javascript:void(location.href='https://en.wikipedia.org/wiki/Special:Search/'+encodeURIComponent(document.getSelection()))

Скопируйте и вставьте приведенный выше код в новую закладку в веб-браузере. Когда вы выбираете текст на веб-странице и нажимаете на букмарклет, открывается новое окно со страницей поиска Википедии для выбранного текста.

3. Выделите все ссылки

Если вы хотите быстро увидеть все ссылки на веб-странице, вы можете создать букмарклет, который выделяет все ссылки. Вот как:

javascript:(function(){var%20links=document.getElementsByTagName('a');for(var%20i=0;i<links.length;i++){links[i].style.backgroundColor='yellow';}})();

Скопируйте и вставьте приведенный выше код в новую закладку в веб-браузере. Когда вы нажимаете на букмарклет, он выделяет все ссылки на текущей веб-странице.

4. Перевести текущую страницу

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

javascript:void(location.href='https://translate.google.com/translate?hl=en&sl=auto&tl=en&u='+encodeURIComponent(location.href))

Скопируйте и вставьте приведенный выше код в новую закладку в веб-браузере. Когда вы нажмете на букмарклет, откроется новое окно со страницей Google Translate для текущего URL-адреса.

5. Удалить рекламу

Если вас отвлекает реклама на веб-страницах, вы можете создать букмарклет, удаляющий рекламу с текущей страницы. Вот как:

javascript:(function(){var%20elements=document.getElementsByTagName('*');for(var%20i=0;i<elements.length;i++){if(elements[i].tagName=='IFRAME'||elements[i].className.match(/ad/)||elements[i].className.match(/banner/)){elements[i].style.display='none';}}})()j

Скопируйте и вставьте приведенный выше код в новую закладку в веб-браузере. Когда вы щелкнете по букмарклету, он удалит все фреймы, элементы с классом «реклама» и элементы с классом «баннер» с текущей страницы.

Некоторые другие полезные букмарклеты показаны ниже:

  • Просмотр исходного кода — просмотр исходного кода любой веб-страницы с помощью этого букмарклета.
javascript:(function()%7Bvar%20e=document.createElement(%22textarea%22)%3Bdocument.body.appendChild(e)%3Be.value=document.documentElement.innerHTML%3Bdocument.title=%22Source%20Code%22%7D)()
  • Редактировать страницу — редактируйте содержимое любой веб-страницы, используя атрибут contentEditable.
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
  • Просмотр адаптивного дизайна — Предварительный просмотр того, как веб-страница будет выглядеть на разных размерах экрана.
javascript:var%20vp%3Ddocument.createElement('meta')%3Bvp.setAttribute('name'%2C'viewport')%3Bvp.setAttribute('content'%2C'width%3Ddevice-width%2Cinitial-scale%3D1.0')%3Bdocument.getElementsByTagName('head')%5B0%5D.appendChild(vp)%3Balert('Viewport%20set%20to%20%22device-width%22%20for%20responsive%20viewing.')
  • Проверить HTML — проверить HTML любой веб-страницы с помощью валидатора W3C.
javascript:location.href='https://validator.w3.org/nu/?doc='+location.href
  • Проверить CSS — проверить CSS любой веб-страницы с помощью валидатора W3C.
javascript:location.href='https://jigsaw.w3.org/css-validator/validator?uri='+location.href
  • Показать скрытые пароли — показать скрытые пароли на любой веб-странице.
javascript:(function(){var%20x=document.querySelectorAll('input[type=%22password%22]');for(var%20i=0;i<x.length;i++){x%5Bi%5D.type='text';}})();
  • Преобразование цветовых кодов — преобразование цветовых кодов HEX, RGB и HSL в соответствующие значения.
javascript:(function()%7Bvar%20c%3Dprompt('Enter%20a%20color%20code')%3Bif(c)%7Bc%3Dc.replace('%23'%2C'')%3Bif(c.length%3D%3D3)%7Bvar%20r%3DparseInt(c.charAt(0)%2Bc.charAt(0)%2C16)%2Cg%3DparseInt(c.charAt(1)%2Bc.charAt(1)%2C16)%2Cb%3DparseInt(c.charAt(2)%2Bc.charAt(2)%2C16)%3Balert('RGB%3A%20'+r%2B'%2C%20'+g%2B'%2C%20'+b)%3B%7Delse%20if(c.length%3D%3D6)%7Bvar%20r%3DparseInt(c.substring(0%2

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