29:null 2a:["$","title",null,{"children":"WebRun DevTools - Sites Screenshots | Mikhail Kotelnikov | Observable"}] 2f: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 }); }30:[] 2d:{"id":"a337e55b6d4e0c9b","slug":"webrun-devtools-sites-screenshots","title":"WebRun DevTools - Sites Screenshots","thumbnail":"6aac98c6f6b42f81391bf6085a0535bb256e835a013a448edf375174358af1bd","access_level":"public","create_time":"$D2023-11-25T17:29:03.175Z","update_time":"$D2023-12-06T10:52:40.903Z","view_time":null,"first_public_time":"$D2023-11-25T17:35:16.828Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":"starter_2024"},"version":46,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null}],"members":[{"type":"individual","id":"cdbfd308e8310490","login":"kotelnikov","name":"Mikhail Kotelnikov","avatar_url":"https://avatars-next.observableusercontent.com/529fa53c5b4acc1414273473d4e049e502c44c1bdbb1a0af81f7faa463dcff4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"9f33e0955f713965","slug":"webrun-devtools","title":"WebRun DevTools","owner":{"id":"d4c65cdf77f8f4fd","login":"kotelnikov","name":"Mikhail Kotelnikov"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"inputApiKey = newApiKeyInput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"api = loadApi({\n input: inputApiKey,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { loadApi, newApiKeyInput } from \"@kotelnikov/webrun-devtools\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"