Ваши закладки в браузере могут быть умными, а не просто ссылками.

И речь не про AI, если вы подумали об этом. Речь про букмарклеты.

Букмарклеты? 🤔

Фича, добавленная в браузеры еще в 1995 года, но актуальная и полезная до сих пор.

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

Выглядит как-то так:

javascript:console.log('hello world');

Да, в закладку можно положить любой js код и при клике на нее он выполнится в контексте текущей страницы.

Получается дико удобный инструмент для всяких рутинных мелочей.

И нет, расширения это не тоже самое. Расширения нужно писать, как полноценные приложение, деплоить, публиковать в сторе и каждый раз обновлять манифест, когда гугл снова захочет поменять формат.

Букмарклету же можно написать самому или нейронкой за пару минут и получить полезность в браузере на расстояние 1 клика.

Какие букмаркелеты я использую сам? ✍🏼

1) Мое любимое – смена стейджа проекта с сохранением урла

Как и у всех у нас в проекте есть 4 стенда: локальный, препрод, препрод с номером моего пулла и прод. Между ними хочется удобно переключаться, при этом сохраняя все текущие параметры страницы из урла.

Для этого я собрал 4 букмарклеты, которые аккуратно лежат в папке.

Суть их проста – они забирают текущий location.pathname + search и подклеивают к урлу тестинга / беты из пулла / локалки / прода. В итоге за один клик я могу из прода открыть тестинг, сохранив при этом нужную часть урла.

Больше не нужно руками копировать квери и добавлять к новой вкладке. Технолоджия! ✨

2) Смена темы страницы в Яндекс Поиске

Когда я работал в Поиске, то часто нужно было проверять верстку в двух темах. Можно конечно открыть девтулзы и менять там. Но зачем, когда можно положить в закладку однострочный код, который будет переключать тему намного быстрее.

3) Поход в ручку бекенда

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

4) Добавление нужных квери параметров

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

5) Открытие сайта сразу с запросом юзера

Можно сразу открывать perplexity или другой гпт чат с вашим запросом. Для этого нужно позвать дефолтный браузерный prompt() и подклеить в урл. В таком случае ваш prompt реально становится промптом :)

const q = prompt('Введите ваш запрос для Perplexity:');

window.open('perplexity.ai/search?q=' + q);

6) Чистка определенного поля в localstorage или куках

Если вам нужно чистить определенное поле в local storage или куках, то это легко сделать букмарклетой. Теперь не нужно каждый раз идти в девтулзы, искать там нужный таб, искать нужное поле для удаления. Клик в закладку и все готово.

Короче, думаю вы поняли, что букмарклеты это офигеть какая удобная вещь и ей можно найти 1000 и 1 применение. Скидывай коллегам разрабам и менеджерам.

Как вам букмарклеты?

🔥 – полезно, спасибо
👀 – уже знал про них

@dlents