31:T4df,viewof urlSubmitForm = { await api; const urlList = [ "https://svelte.dev/", "https://pptr.dev/", "https://astro.build", "https://react.dev/", "https://www.solidjs.com/", "https://vuejs.org/", "https://webdriver.io/" ]; const urlInput = Inputs.text({ label: "Site URL:", value: urlList[0] }); const newHandler = (url) => (ev) => { ev.preventDefault(); ev.stopPropagation(); urlInput.value = url; urlInput.dispatchEvent(new CustomEvent("input")); }; const introduction = htl.html`

Enter site URL and click "Go!" to create a screenshot. The DevTools extension will open a new window, load the site, create a screenshot and show it in the next cell. When the process is finished the extension closes the window.

`; let examples = htl.html`

Examples (click on links below to enter an URL):

${url}

`; return Inputs.form({ introduction, url: urlInput, submit: Inputs.button("Go", { label: " " }), timeout: Inputs.range([300, 5000], { label: "Timeout before screenshot:", step: 10, value: 500 }), examples }); }32:[] 2f:{"title":"WebRun DevTools - Sites Screenshots","cells":[{"id":0,"value":"# WebRun DevTools - Sites Screenshots\n\nThe example below allows you to create screenshots of external sites using the [WebRun DevTools](/@kotelnikov/webrun-devtools) browser extension.\nYou need to install it, generate an API key and enter in the box below. After that you will be able to enter a site URL and create screenshots.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"inputApiKey = newApiKeyInput()","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"In the next cell the API object will appear if this page successfully established connection with the DevTools extension:","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"api = loadApi({\n input: inputApiKey,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"{\n let submit = 0;\n const screenshotContainer = htl.html`

Waiting for a new URL...

`;\n yield screenshotContainer;\n\n for await (let info of Generators.input(viewof urlSubmitForm)) {\n if (submit === info.submit) continue;\n submit = info.submit;\n const url = info.url;\n if (!url) {\n screenshotContainer.innerHTML = \"\";\n screenshotContainer.append(\n htl.html`

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

`\n );\n continue;\n }\n const win = await api.windows.create({\n url,\n focused: true,\n type: \"popup\",\n width: 800,\n height: 600\n });\n try {\n await Promises.delay(info.timeout);\n const imgUrl = await api.tabs.captureVisibleTab(win.id, {\n format: \"png\"\n });\n const img = htl.html`

`;\n screenshotContainer.innerText = \"\";\n screenshotContainer.appendChild(img);\n } finally {\n await api.windows.remove(win.id);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { loadApi, newApiKeyInput } from \"@kotelnikov/webrun-devtools\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}