Source
QA Co-pilot | Кнопка "Зробити добре": Створюємо власні інструменти в панелі закладок...
34 Views/Reach
2025-12-19 10:16
Message №133
🔖 Кнопка "Зробити добре": Створюємо власні інструменти в панелі закладокПривіт, екіпаж!Ми вже говорили про 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? 👇