31:T83f,{ const renderMarkdown = (content) => { const elm = md`${content}`; const list = []; for (let node = elm.firstChild; node; node = node.nextSibling) { list.push(node); } return list; }; const renderExample = (example) => { const url = `https://observablehq.com/${example.notebookId}`; const title = htl.html`${example.title}`; const description = htl.html`${renderMarkdown( example.description )}`; return htl.html`

${title} - ${description}

`; }; const renderExamples = (examples) => { if (!examples || !examples.length) return ""; const renderedExamples = examples.map( (example) => htl.html`

${renderExample(example)}

` ); return htl.html`

${renderedExamples}`; }; const renderCard = (info) => { const title = htl.html`

${info.title}

`; const description = htl.html`

${renderMarkdown( info.description )}

`; const examples = renderExamples(info.examples); return htl.html`

${title} ${description} ${examples}

`; }; const cards = useCases.map(renderCard); return htl.html`

${cards}

`; }32:Tc18,useCases = [ { title: "Screenshots", description: "Make site screenshots at any resolution", examples: [ { title: "Site Screenshot", description: "open any site and make a screenshot", notebookId: "@kotelnikov/webrun-devtools-sites-screenshots" }, { title: "Full Page Screenshots", description: "create the screenshot of the whole page, even with the scroller", notebookId: "@kotelnikov/webrun-devtools-full-page-screenshot" } ] }, { title: "Scraping", description: "Extract content and data from external sites", examples: [ { title: "Extract Text", description: "get HTML code for specified elements", notebookId: "@kotelnikov/webrun-devtools-site-scraping" } ] }, { title: "PDF Generation", description: "Transform a site to a printable PDF. It can be especially useful to generate printable documents directly in the browser - like create visit cards, presentations etc", examples: [ { title: "Print To PDF", description: "open a site, print it to PDF and visualize in Observable", notebookId: "@kotelnikov/webrun-devtools-pdf-generation" } ] }, { title: "Debugging", description: "The WebRun DevTools extension gives access to the full set of methods exposed by the [Chrome Devtools Protocol] API(https://chromedevtools.github.io/devtools-protocol/).", examples: [ { title: "Explore DOM with Debugger", description: "open a page, select elements and explore the associated debugger information", notebookId: "@kotelnikov/webrun-devtools-debugger-explore-dom" } ] }, { title: "Puppeteer API", description: "Pilot your browser from the browser using with the Puppeteer API", examples: [ { title: "Pilot Browser with the Puppeteer API", description: "open Wikipedia, search keywords, make full-page screenshot and get the table of content", notebookId: "@kotelnikov/puppeteer-pilot-browser-with-the-puppeteer-api" } ] }, { title: "Headless Browsers", description: "You can control headless browser from notebooks using the latest Puppeteer API", examples: [ { title: "Latest Puppeteer API via WS", description: "control a remote browser instance with the latest Puppeteer API using WebSockets", notebookId: "@kotelnikov/webrun-devtools-puppeteer-ws" }, { title: "[puppeteer] Puppeteer Over WS", description: "minimalistic template showing how to automate external headless browser", notebookId: "@kotelnikov/puppeteer-over-ws" } ] } // { // title: "Automation", // description: // "Perform automatically actions on the site - like clicking on elements, scrolling, filling forms. Especially useful to create screenshots, PDFs or extract content from multiple pages.", // examples: [] // }, ]33:[] 2f:{"title":"WebRun DevTools","cells":[{"id":390,"value":"# WebRun DevTools\n***Pilot Browser From The Browser***","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"[WebRun DevTools](https://github.com/statewalker/webrun-devtools) is a Chrome Extension and the associated JavaScript APIs allowing to pilot your browser directly from the browser – from your HTML pages or your Observable Notebooks. This functionality allows you to automate a variety of operations and tests on external websites directly within the browser. It eliminates the need install heavy-weight Node-based tools such as Puppeteer or Playwright.\n* [GitHub > WebRun DevTools](https://github.com/statewalker/webrun-devtools) - source code\n* [Google Chrome Store > WebRun DevTools](https://chromewebstore.google.com/detail/cfphcdekgckldjfmjajcklchnajkpakf) - installable extension (version 0.1.3)","pinned":false,"hidden":false,"mode":"md"},{"id":402,"value":"> **Note:** See also the [Puppeteer In The Browser](/@kotelnikov/webrun-devtools-puppeteer-ws) notebook! We are actively working on integrating the entire Puppeteer functionality into the browser using the [WebRun DevTools extension](/@kotelnikov/webrun-devtools?collection=@kotelnikov/webrun-devtools) without the need for any external processes or NodeJS installations. Your feedback is highly valuable – please share your thoughts!","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"## Project Information\n\n* JavaScript API: [unpkg: @statewalker/webrun-devtools/dist/webrun-devtools.js](https://unpkg.com/@statewalker/webrun-devtools/dist/webrun-devtools.js)\n* Extension: [unpkg: @statewalker/webrun-devtools/dist/webrun-devtools-extension.zip](https://unpkg.com/@statewalker/webrun-devtools/dist/webrun-devtools-extension.zip)\n* Code Source: https://github.com/statewalker/webrun-devtools\n* License: MIT\n","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"## Use Cases\n","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"toc({\n headers: \"h2,h3,h4\"\n // title: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"## Q&A\n### How it works?\n\nIn short - the API sends commands to the extension and the extension executes them. This approach allows to perform operations with the browser not available from the normal JavaScript API. For example - it allows to open a site in a new window, debug it, make screenshots, generate PDFs, extract page content, inject and execute custom JavaScripts etc. \n\n### Is it secure?\n\nThe API can not connect to the extension without a private key, generated by the extension itself. This key never leave the browser, and you can re-generate/re-define it at any time. You can review the code of both the extension and the API in this repository: https://github.com/statewalker/webrun-devtools. \n\n","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"\n## Getting Started\n\n${renderIntroduction()}\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"## Imports / Implementations","pinned":false,"hidden":false,"mode":"md"},{"id":54,"value":"function renderIntroduction() {\n const description = md`\n1. [Download and install WebRun DevTools Chrome extension](https://github.com/statewalker/webrun-devtools#step-1-install-extension) how it is described on the project page\n2. Generate an API Key
\n ![](https://github.com/statewalker/webrun-devtools/raw/main/docs/images/generate-api-key.png)\n3. Activate and use the API:\n\\`\\`\\`javascript\nimport initDevTools from \"https://unpkg.com/@statewalker/webrun-devtools\";\n(async () => {\n const apiKey = 'azevajqpn'; // your_generated_api_key\n const api = await initDevTools({ apiKey });\n try {\n ...\n } finally {\n await api.close(); // Close connection to the extension\n }\n})();\n\\`\\`\\`\n`;\n const { id } = DOM.uid();\n return htl.html`

\n${description}\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"function newApiKeyInput() {\n const form = Inputs.text({\n label: \"API Key:\",\n submit: \"OK\"\n });\n Object.assign(form.style, {\n background: \"#eee\",\n border: \"1px solid silver\",\n borderRadius: \"0.25em\",\n padding: \"0.8em\",\n fontSize: \"1.1em\"\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"// This named cell is used to overload the API URLs in other notebooks. It is used for testing/debugging.\napiUrls = [\n // Try to load local script for test purposes.\n // \"http://127.0.0.1:5500/packages/webrun-devtools/dist/webrun-devtools.js\",\n\n // The last client version on CDN\n \"https://unpkg.com/@statewalker/webrun-devtools\",\n // Used with the first version of the WebRunDevTools extension published on the GoogleChrome Store.\n \"https://unpkg.com/@statewalker/webrun-devtools@0.0.12\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"async function loadApi({ input, invalidation }) {\n let promise =\n input instanceof HTMLElement\n ? new Promise((resolve) => {\n input.addEventListener(\"input\", function onUpdate(ev) {\n input.removeEventListener(\"input\", onUpdate);\n resolve(input.value);\n });\n })\n : input;\n const apiKey = await promise;\n let api, error;\n for (let apiUrl of apiUrls) {\n try {\n const { default: connect } = await import(apiUrl);\n api = await connect({ apiKey });\n if (api) break;\n } catch (e) {\n error = e;\n console.warn(error);\n }\n }\n if (!api && error) throw error;\n invalidation && invalidation.then(() => api.close());\n return api;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"## API Initialization example\n\nTo activate the API piloting your browser you need to create an API key using the extension and enter it in the box below:","pinned":false,"hidden":false,"mode":"md"},{"id":466,"value":"inputApiKey = newApiKeyInput()","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"The `api` cell below will be automatically created after defining the API key:","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"api = loadApi({\n input: inputApiKey,\n invalidation\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"An utility method transforming a form submits to async iterator. \nA form is considered submitted when the \"submit\" field takes a new value.\nThe iterator returns the first value only after the first submit field change.\n\n```javascript\nform = Inputs.form({\n firstName : Inputs.text({ value : \"\", label : \"First Name:\"}),\n lastName : Inputs.text({ value : \"\", label : \"Last Name:\"}),\n submit : Inputs.button(\"OK\")\n})\n```\n\nThe `listenForm` method transforms this element to an async iterator:\n```javascript\npersonalInfo = listenForm(form)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":407,"value":"async function* listenForm(\n form,\n {\n validate = (d) => true,\n value = (d) => d,\n submit = (d) => d?.submit || 0\n } = {}\n) {\n let prevSubmit = 0;\n for await (const d of Generators.input(form)) {\n const newSubmit = submit(d);\n if (!d || newSubmit === prevSubmit) continue;\n prevSubmit = newSubmit;\n if (validate(d)) yield await value(d);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"## Misc","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"import { toc } from \"@nebrius/indented-toc\" // This component generates the Table of Contents","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}