🔖 Кнопка "Зробити добре": Створюємо власні інструменти в панелі закладок

Привіт, екіпаж! Ми вже говорили про Chrome Snippets, але у них є мінус: треба натиснути F12, перейти в Sources, знайти скрипт, натиснути Run... Забагато кліків для частої дії. Хочете мати кнопку прямо під адресним рядком, яка робить магію одним кліком? Це називається Bookmarklet. Це шматок JS-коду, збережений замість URL.Що можна зробити одним кліком:
1️⃣

Очистити всі Cookies та LocalStorage для цього сайту.2️⃣

Підсвітити всі елементи без атрибута alt (для тестування доступності).3️⃣

Мій улюблений кейс: Скопіювати технічну інфо для баг-репорту.
Коли ви заводите баг, вам треба вказати: URL, розширення екрану, User Agent, час. Давайте зробимо кнопку, яка копіює це в буфер обміну автоматично.✨ Готовий промпт "Bookmarklet Creator":

Виступи в ролі Frontend Developer. Напиши мені JavaScript-код для **Bookmarklet**. Код має бути обгорнутий у `javascript:(function(){ ... })()`, щоб я міг зберегти його як закладку.**Функціонал:**1. Збери дані про поточну сторінку: - URL (`window.location.href`) - Роздільна здатність екрану (`screen.width` x `screen.height`) - Розмір вікна (`window.innerWidth` x `window.innerHeight`) - User Agent (`navigator.userAgent`)2. Сформуй красивий текст для Jira (markdown або plain text).3. Скопіюй цей текст у буфер обміну (Clipboard API).4. Покажи `alert("Інфо скопійовано!")`.
✅ Результат від AI (готовий код): javascript:(function(){ const info = `*URL:* ${window.location.href}*Screen:* ${screen.width}x${screen.height}*Viewport:* ${window.innerWidth}x${window.innerHeight}*UA:* ${navigator.userAgent} `; navigator.clipboard.writeText(info.trim()).then(() => { alert('✅ Інфо для баг-репорту скопійовано!'); }).catch(err => { console.error('Failed to copy: ', err); alert('❌ Помилка копіювання (перевір права доступу)'); });})();
Як встановити:
1️⃣

Натисніть Ctrl+D (додати закладку) на будь-якому сайті.2️⃣

Назвіть її "🐞 Copy Bug Info".3️⃣

Натисніть кнопку "Більше" (More) або "Змінити" (Edit).4️⃣

У поле URL видаліть посилання і вставте код, який дав AI (починаючи з javascript:).5️⃣

Збережіть.
Як це працює? Тепер, коли ви знаходите баг:
1️⃣

Тиснете на закладку "🐞 Copy Bug Info

" на панелі.2️⃣

Бачите повідомлення "Скопійовано!".3️⃣

Йдете в Jira і тиснете Ctrl+V. Всі технічні дані вставляються ідеально. Висновок: Ви можете створити закладки для будь-чого: "Заповнити форму логіну", "Увімкнути червоні границі блоків", "Показати приховані поля". Ви самі будуєте свій інтерфейс браузера. А у вас є корисні букмарклети чи тільки посилання на YouTube?

👇