Розширення Lolly URL Screenshot дозволяє веб-застосунку робити знімок екрана будь-якої вебсторінки прямо з вашого браузера. Без нього для захоплення URL потрібен настільний застосунок - сторінка браузера не може сама зчитувати пікселі з іншого сайту. Розширення може, використовуючи те саме захоплення, що й настільний застосунок.
Воно виконує ще дві роботи тим самим способом. Вебадреса, вставлена в слот зображення, може стати знімком цієї сторінки (Зробити знімок цієї сторінки), а розширення може прочитати єдину сторінку, яку ви назвете, щоб Brand Studio могла витягти бренд із живого сайту. Кожен запит чекає на ваше схвалення в розширенні.
Воно працює в браузерах на основі Chromium: Chrome, Edge, Brave, Arc, Opera - Chrome 111 або новіший.
Поки його не встановлено, URL Screenshot усе одно відкривається, щоб ви могли скомпонувати знімок, а примітка вгорі елементів керування інструментом повідомляє, чого бракує.
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KBПеревірте саміОтримати підписаний файл
signed by Lollyvector SVG4 paths~2.4k nodes4 groups30 KBПеревірте саміОтримати підписаний файл
Кожен елемент керування активний, поки ви чекаєте: цільова URL-адреса, глибина прокрутки, затримка стабілізації, відступи кадрування і зміна кольору. Лише саме захоплення потребує хоста.
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KBПеревірте саміОтримати підписаний файл
signed by Lollyvector SVG31 paths~1.7k nodes38 groups30 KBПеревірте саміОтримати підписаний файл
Встановлення
З Chrome Web Store
Незабаром. Щойно його опублікують, ви встановите його в один клік, а потім перезавантажите Lolly.
Завантажити самостійно (для розробників)
Розширення живе в репозиторії за адресою shells/chrome-extension/. Ця тека - виробнича збірка, яка працює з Lolly лише за адресою https://lolly.tools.
- Відкрийте
chrome://extensions. - Увімкніть Режим розробника (у верхньому правому куті).
- Натисніть Завантажити розпаковане розширення й оберіть теку
shells/chrome-extension/. - Перезавантажте Lolly - URL Screenshot тепер працює в браузері.
Для локального сервера розробки виконайте pnpm run pack:chrome-extension:dev і натомість завантажте dist/chrome-extension-dev. Цей пакет також приймає http://localhost:5173, а в його назві є Development.
Як це працює
- Невеликий скрипт повідомляє Lolly, що розширення присутнє, тож URL Screenshot може зберігати знімки без додаткових налаштувань.
- Ви схвалюєте кожен запит. Коли Lolly питає, розширення відкриває власне вікно Approve page request, яке показує сайт, що робить запит, чи потрібен йому знімок екрана, чи вміст сторінки, та адресу сторінки. Доки ви не натиснете Approve once, нічого не зчитується. Cancel або закриття вікна завершує запит.
- Коли ви вперше схвалюєте запит для сайту, Chrome також питає, чи може розширення отримати доступ до цього сайту. Chrome зберігає цей доступ, щойно ви його дозволите, але кожен наступний запит усе одно потребує власного Approve once.
- Схвалення стосується одного запиту й спливає за 30 секунд. Лише один запит може чекати або виконуватися одночасно, а схвалений запит зупиняється через 55 секунд. Якщо сторінку Lolly закрито чи змінено або цільова сторінка переходить на інший сайт, запит скасовується.
- Після вашого схвалення розширення відкриває цільову сторінку у фоновій вкладці, захоплює її через DevTools Protocol (той самий
Page.captureScreenshot, що й настільний застосунок), потім закриває вкладку й повертає зображення вкладці Lolly, яка його запросила. - Воно працює повністю у вашому браузері, у вашій мережі - тож захоплення
localhostабо внутрішнього сайту працює. Сторінка завантажується з вашою сесією браузера, тому сторінка, до якої ви ввійшли, може показати в результаті приватну інформацію. Саме захоплення ніколи нікуди не завантажується; єдиний мережевий трафік - це завантаження вашим власним браузером сторінки, яку ви попросили зняти.
Поки триває захоплення, ви можете ненадовго побачити на тимчасовій вкладці банер "…почав налагодження цього браузера". Це працює DevTools Protocol; він зникає сам, щойно знімок готовий.
Читання сайту для Brand Studio
Джерело Website у Brand Studio починає бренд із сайту, який у вас уже є. У Chromium його читає розширення; у настільному застосунку ту саму роботу виконує нативний запит fetch, а у звичайному браузері без розширення цю плитку взагалі не пропонують.
Що відбувається, коли ви його натискаєте:
- Одна адреса, одна сторінка. Після вашого схвалення розширення відкриває її в такій самій фоновій вкладці, зчитує відрендерену розмітку, текст стилів і кілька зображень іконок і логотипів, потім закриває вкладку. Воно не переходить за посиланнями і не сканує сайт.
- Таблиці стилів, розміщені деінде (CDN, сервіс шрифтів), також завантажуються, бо саме в них живуть кольори й типографіка сторінки. Міжджерельні запити йдуть без ваших кук; однодоменні використовують їх - точно як зробила б сама сторінка.
- Усе обмежено - фіксована кількість таблиць стилів, зображень і байтів - тож ворожа чи напівпоширена сторінка повертає часткові матеріали, а не зависає.
- Байти повертаються прямо до вкладки Lolly, яка їх запросила. Розбір на кольори, типографіку й логотипи відбувається на вашому пристрої; нічого не завантажується.
Вставлення адреси лише заповнює поле. Нічого не зчитується, доки ви не запустите читання й не натиснете Approve once.
Після встановлення
Перезавантажте вкладку Lolly. Підказка "Get the extension" зникає, URL Screenshot (в розділі Утиліти) може зберігати знімки у файл, а інструмент стає доступним у режимі Batch.
Дозволи
Його manifest.json декларує чотири дозволи, а також доступ до сайтів, який воно запитує по одному сайту за раз:
debugger- керує фоновою вкладкою через DevTools Protocol. Саме це робить знімок екрана.tabs- відкриває тимчасову фонову вкладку й закриває її потім, а також перевіряє, що ні сторінка Lolly, ні цільова сторінка не перейшли кудись від моменту вашого схвалення запиту.scripting- запускає односторінковий зчитувач усередині названого вами сайту для джерела Website у Brand Studio.storage- зберігає ідентифікатор відкритої вкладки лише в сховищі сесії, щоб вкладку все одно закрило, навіть якщо браузер призупинить розширення посеред читання. Очищається під час наступного запуску; нічого про вас не зберігається.optional_host_permissions: ["http:///", "https:///"]- доступ до сайтів, який не надається під час встановлення. Коли ви натискаєте Approve once, розширення просить у Chrome доступ до єдиного сайту з цього запиту, а Chrome питає вас уперше для кожного сайту.
Воно читає лише ту одну сторінку, яку ви схвалили, і не читає й не передає ваші дані перегляду - нічого нікуди не завантажується.
Маніфест також встановлює minimum_chrome_version: 111. Поточна версія - 0.4.0.
Усунення несправностей
- Досі бачите "Get the extension"? Перезавантажте вкладку Lolly - виявлення відбувається під час завантаження сторінки.
- На цьому сайті нічого не відбувається? Розширення працює лише на
https://lolly.tools, а в пакеті для розробки - ще й наhttp://localhost:5173. Іншому джерелу, наприклад власній копії Lolly, потрібна окрема збірка розширення, яка вказує це джерело і вmanifest.json, і вpolicy.js. Редагування самого маніфесту більше не допомагає. - Захоплення не вдається? Перевірте, що URL-адреса доступна й починається з
http://абоhttps://. Деякі сторінки активно блокують автоматизоване захоплення. Якщо ви натиснули Cancel, закрили вікно схвалення або чекали довше за 30 секунд, почніть захоплення знову.