Розширення Lolly URL Screenshot дозволяє веб-застосунку робити знімок екрана будь-якої вебсторінки прямо з вашого браузера. Без нього для захоплення URL потрібен настільний застосунок - сторінка браузера не може сама зчитувати пікселі з іншого сайту. Розширення може, використовуючи те саме захоплення, що й настільний застосунок.
Він виконує ще одну роботу тим самим способом: читає єдину сторінку, яку ви назвете, щоб Brand Studio могла витягти бренд із живого сайту. Обидва описано нижче.
Воно працює в браузерах на основі Chromium: Chrome, Edge, Brave, Arc, Opera - Chrome 111 або новіший.
Поки його не встановлено, URL Screenshot усе одно відкривається, щоб ви могли скомпонувати знімок, а примітка вгорі елементів керування інструментом повідомляє, чого бракує.
signed by Lollyvector SVGПеревірте саміGet the signed file4 paths~2.4k nodes4 groups29 KB
signed by Lollyvector SVGПеревірте саміGet the signed file4 paths~2.4k nodes4 groups29 KB
Кожен елемент керування активний, поки ви чекаєте: цільова URL-адреса, глибина прокрутки, затримка стабілізації, відступи кадрування і зміна кольору. Лише саме захоплення потребує хоста.
signed by Lollyvector SVGПеревірте саміGet the signed file52 paths~3.6k nodes158 groups1 image62 KB
signed by Lollyvector SVGПеревірте саміGet the signed file52 paths~3.6k nodes158 groups1 image62 KB
Встановлення
З Chrome Web Store
Незабаром. Щойно його опублікують, ви встановите його в один клік, а потім перезавантажите Lolly.
Завантажити самостійно (для розробників)
Розширення живе в репозиторії за адресою shells/chrome-extension/.
- Відкрийте
chrome://extensions. - Увімкніть Режим розробника (у верхньому правому куті).
- Натисніть Завантажити розпаковане розширення й оберіть теку
shells/chrome-extension/. - Перезавантажте Lolly - URL Screenshot тепер працює в браузері.
Як це працює
- Невеликий скрипт повідомляє Lolly, що розширення присутнє, тож інструмент URL Screenshot вмикається автоматично - без налаштувань.
- Коли ви рендерите, розширення відкриває цільову сторінку у фоновій вкладці, захоплює її через DevTools Protocol (той самий
Page.captureScreenshot, що й настільний застосунок), потім закриває вкладку й повертає зображення. - Воно працює повністю у вашому браузері, у вашій мережі - тож захоплення
localhostабо внутрішнього сайту працює. Саме захоплення ніколи нікуди не завантажується; єдиний мережевий трафік - це завантаження вашим власним браузером сторінки, яку ви попросили зняти.
Поки триває захоплення, ви можете ненадовго побачити на тимчасовій вкладці банер "…почав налагодження цього браузера". Це працює DevTools Protocol; він зникає сам, щойно знімок готовий.
Читання сайту для Brand Studio
Джерело Website у Brand Studio починає бренд із сайту, який у вас уже є. У Chromium його читає розширення; у настільному застосунку ту саму роботу виконує нативний запит fetch, а у звичайному браузері без розширення цю плитку взагалі не пропонують.
Що відбувається, коли ви його натискаєте:
- Одна адреса, одна сторінка. Розширення відкриває її в такій самій фоновій вкладці, зчитує відрендерену розмітку, текст стилів і кілька зображень іконок і логотипів, потім закриває вкладку. Воно не переходить за посиланнями і не сканує сайт.
- Таблиці стилів і шрифти, розміщені деінде (CDN, сервіс шрифтів), також завантажуються, бо саме в них живуть кольори й типографіка сторінки. Міжджерельні запити йдуть без ваших кук; однодоменні використовують їх - точно як зробила б сама сторінка.
- Усе обмежено - фіксована кількість таблиць стилів, зображень і байтів - тож ворожа чи напівпоширена сторінка повертає часткові матеріали, а не зависає.
- Байти повертаються прямо до вкладки Lolly, яка їх запросила. Розбір на кольори, типографіку й логотипи відбувається на вашому пристрої; нічого не завантажується.
Нічого не зчитується, доки ви не натиснете. Вставлення адреси лише заповнює поле.
Після встановлення
Перезавантажте вкладку Lolly. Підказка "Get the extension" зникає, а URL Screenshot стає доступним у галереї та в режимі Batch.
Дозволи
Його manifest.json декларує чотири дозволи плюс доступ до хостів:
debugger- керує фоновою вкладкою через DevTools Protocol. Саме це робить знімок екрана.tabs- відкриває тимчасову фонову вкладку й закриває її потім.scripting- запускає односторінковий зчитувач усередині названого вами сайту для джерела Website у Brand Studio.storage- зберігає ідентифікатор відкритої вкладки лише в сховищі сесії, щоб вкладку все одно закрило, навіть якщо браузер призупинить розширення посеред читання. Очищається під час наступного запуску; нічого про вас не зберігається.host_permissions: ["<all_urls>"]- доступ до хостів на всіх сайтах, бо ви можете спрямувати його на будь-яку обрану вами URL-адресу. Chrome показує це під час встановлення як широке попередження "читати й змінювати всі ваші дані на всіх вебсайтах".
Попри це попередження, воно читає лише ту одну сторінку, яку ви просите захопити чи імпортувати, і не читає й не передає ваші дані перегляду - нічого нікуди не завантажується.
Маніфест також встановлює minimum_chrome_version: 111. Поточна версія - 0.2.1.
Усунення несправностей
- Досі бачите "Get the extension"? Перезавантажте вкладку Lolly - виявлення відбувається під час завантаження сторінки.
- На цьому сайті нічого не відбувається? Розширення активується лише на власних доменах Lolly. Запускаєте власну збірку на іншому домені? Додайте його до
content_scripts.matchesуmanifest.jsonрозширення. - Захоплення не вдається? Перевірте, що URL-адреса доступна й починається з
http://абоhttps://. Деякі сторінки активно блокують автоматизоване захоплення.