31:T6fa,{ const screenshotContainer = htl.html`

Waiting for a new URL...

`; const root = htl.html`

${screenshotContainer}

`; yield root; let prevSubmit = 0; for await (const info of Generators.input(urlSubmitForm)) { const { url, focused, width, height, timeout, submit } = await info; if (prevSubmit === submit) continue; if (!url) { screenshotContainer.innerHTML = ""; screenshotContainer.append( htl.html`

URL is empty. Waiting for a new one...

` ); return; } prevSubmit = submit; let win = await api.windows.create({ url, focused, type: "popup", width, height }); const close = async () => { if (win) { const id = win.id; win = null; await api.windows.remove(id); } }; invalidation.then(close); try { const windowId = win.id; const tabId = win.tabs[0].id; screenshotContainer.innerHTML = ""; for await (let { imgUrl, top, left, right, bottom } of makeFullPageScreenshots({ windowId, tabId, timeout: 500 })) { const img = await newImage(imgUrl); const croppedImg = await cropImage({ img, top, left, right, bottom }); screenshotContainer.appendChild(croppedImg); } } catch (error) { console.error(error); } finally { await close(); } } }32:Tf89,// This method returns an Async Iterator for a series of screenshots of the specified target window. // Parameters of this method: // @param options - options object // @param options.windowId - id of the window to take a snapshot // @param options.tabId - id of the tab // @param options.timeout - a timeout to wait before the first screenshot // Each returned screenshot has the following structure: // * imgUrl - URL fo the image with base64-encoded content // * top - top position of this screenshot // * left - left screenshot position // * right - right position // * bottom - bottom screenshot position async function* makeFullPageScreenshots({ windowId, tabId, timeout = 500 }) { // Initial step: measure the size of the loaded page const { result: windowInfo } = await api.custom.injectScript( { tabId }, { args: [{ timeout }], func: async function ({ timeout = 0 } = {}) { // Await until the page is loaded await untilLoaded(); // Create a fixed element and cover with it the page content. // It is required to block user's interaction during the scroll const div = document.createElement("div"); Object.assign(div.style, { backgroundColor: "rgba(255,255,255,0)", zIndex: 100000, position: "fixed", top: 0, left: 0, right: 0, bottom: 0 }); const body = document.body; body.appendChild(div); // Await for the content loading before measuring the document size await new Promise((resolve) => { timeout ? setTimeout(resolve, timeout) : requestAnimationFrame(resolve); }); // Get the page parameters to return const { x, y, top, right, bottom, left, width, height } = body.getBoundingClientRect(); const { innerHeight, innerWidth } = window; const info = { x, y, top, right, bottom, left, width, height, window: { innerHeight: window.innerHeight, innerWidth: window.innerWidth }, body: { clientWidth: body.clientWidth, clientHeight: body.clientHeight, scrollHeight: body.scrollHeight, scrollWidth: body.scrollWidth } }; return info; async function untilLoaded() { return new Promise((resolve, reject) => { if (document.readyState === "complete") { resolve(); } else { document.addEventListener("DOMContentLoaded", function onLoad() { resolve(); document.removeEventListener("DOMContentLoaded", onLoad); }); } }); } }.toString() } ); console.log("* [windowInfo]", windowInfo); const scrollHeight = windowInfo.body.scrollHeight; const windowHeight = windowInfo.window.innerHeight; const bodyWidth = windowInfo.body.clientWidth; for ( let pos = 0, prevPos = 0; pos < scrollHeight; prevPos = pos, pos += windowHeight ) { if (pos > 0) { await scrollTo({ tabId }, pos); } // We have to wait at least 500ms because the default // MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND value is 2 // (2 screenshots per second) await Promises.delay(500); const imgUrl = await api.tabs.captureVisibleTab(windowId, { format: "png" }); const top = windowHeight - Math.min(scrollHeight - pos, windowHeight); const bottom = windowHeight; const left = 0; const right = bodyWidth; yield { imgUrl, top, right, bottom, left }; } async function scrollTo(target, pos) { return await api.custom.injectScript(target, { args: [pos], func: async function (pos) { window.scrollTo(0, pos); }.toString() }); } }33:[] 2f:{"title":"WebRun DevTools - Full Page Screenshot","cells":[{"id":181,"value":"# WebRun DevTools - Full Page Screenshot\n","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"\nThis notebooks shows how to create a full page screenshot using the [WebRun DevTools Browser Extension](/@kotelnikov/webrun-devtools).\n\n*Note: This example will not work on sites with blocked scripts evaluations*\n\nTo create a full-length site screenshot you need:\n1. Connect to the extension via API\n * Generate the API key\n * Initialize the API\n2. Open a site in a new window\n3. Create screenshot of the visible part of the page\n4. Scroll the page\n5. Repeat the 3-4 steps until you arrive at the end of the page\n6. Closes the window\n","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"## Step 1: Connect to the API\n\nTo connect to the [WebRun DevTools Browser Extension](/@kotelnikov/webrun-devtools) please generate an API Key and enter it in the box below:","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"inputApiKey = newApiKeyInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"If the API key is valid then the next cell will show an API object.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"api = loadApi({ input: inputApiKey, invalidation })","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"## Step 2: Define screenshot parameters","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"urlSubmitForm = Inputs.form({\n url: Inputs.text({\n label: \"Site URL:\",\n value: \"https://astro.build\"\n // value: \"https://pptr.dev\"\n }),\n timeout: Inputs.range([300, 5 * 1000], {\n label: \"Timeout before screenshot:\",\n step: 10,\n value: 500\n }),\n width: Inputs.range([420, 1600], {\n label: \"Window Width:\",\n step: 10,\n value: 512\n }),\n height: Inputs.range([420, 1200], {\n label: \"Window Height:\",\n step: 10,\n value: 512\n }),\n focus: Inputs.toggle({ value: true, label: \"Focus Window:\" }),\n submit: Inputs.button(\"Make Screenshot\", { label: \" \" })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"## Step 3: Generate Screenshot\n\nThe next cell creates a new window, navigates the browser to the specified URL and creates a full-page screenshot by automatically scrolling the page and creating individual screenshots: ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"async function cropImage({ img, left, top, bottom, right }) {\n const width = right - left;\n const height = bottom - top;\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(img, left, top, width, height, 0, 0, width, height);\n const url = ctx.canvas.toDataURL();\n return await newImage(url);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"async function newImage(url) {\n return new Promise((resolve, reject) => {\n try {\n const img = document.createElement(\"img\");\n img.src = url;\n img.addEventListener(\"load\", () => resolve(img));\n img.addEventListener(\"error\", reject);\n } catch (error) {\n reject(error);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { loadApi, newApiKeyInput } from \"@kotelnikov/webrun-devtools\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}