BNOD

← All templates
tabsscreenshotmonitoringtabs

Screenshot two URLs to disk

Open two URLs in new tabs, capture each as PNG, save to disk. Tabs stay open. Adapt the URL list to your monitoring set.

Install in BNOD

Install in BNOD

Opens BNOD sidepanel with this template installed. Requires BNOD extension.

You're monitoring a small set of pages for visual regression — a landing page, a checkout flow, a marketing experiment — and you want a snapshot in your downloads folder every time the page is updated. Manual Cmd+Shift+4 cropping gets old. This template opens two URLs in separate tabs, captures each as a PNG, and saves both to disk. Tabs stay open so you can keep reviewing. Useful for design QA, marketers tracking competitor landing page changes, or anyone who wants a low-effort visual archive.

How this workflow works

Nine blocks arranged as two parallel "open, wait, shoot, save" pipelines. The template ships with two URLs but the pattern scales.

  1. manual_trigger — Sidepanel Run, targetTab: "new".
  2. new_tab — Opens https://example.com in a fresh tab.
  3. wait_for — Waits for <h1> to be visible. This is your "page settled" signal; for a real monitoring set you'd point this at whatever element appears late on the page (e.g. .checkout-button or [data-loaded]).
  4. take_screenshot — Captures the visible viewport as a base64-encoded PNG. The as: "shot_a" field is metadata (helps with debugging) but the actual data is exposed as $('Capture example.com').dataUrl.
  5. save_file — Writes the data URL to example.png in your Downloads folder. Chrome's native download bar appears.
  6. new_tab — Opens https://example.org in another fresh tab. The first tab stays open in the background.
  7. wait_for — Same wait pattern, timeoutMs: 15000 for the slower second site.
  8. take_screenshot — Captures that tab.
  9. save_file — Writes example-org.png to disk.

Both PNGs end up in your default Downloads location. The workflow doesn't close any tabs — you can compare them visually after the run.

Customising it for your case

This template is a "monitoring set" starter; the URLs and filenames are placeholders.

Common gotchas

Three things to watch. First: take_screenshot captures the viewport, not the full page. If your hero section is fine but the below-the-fold content is what changed, you'll miss it — scroll the page first (via javascript_code running window.scrollTo(0, document.body.scrollHeight)) and snapshot again, or split a long page into two screenshots. Second: PNG files for large screen captures can be 2-5 MB each — over a few weeks of daily snapshots, downloads pile up. Add date-stamped filenames so old snapshots are easy to identify and prune. Third: pages that use lazy-loading images may snapshot before images load, leaving blank placeholders. Add a delay block (or a longer wait_for) between page settle and screenshot to give images time to swap in.

FAQ

Where do screenshots get saved? Chrome's default Downloads folder, with the filename you specify. The browser asks for permission the first time you run a save_file block — grant it for the extension origin.

Can I email or upload the screenshots? Not from save_file directly — that block writes to disk only. Chain a http_request block with body.content: "{{$('Capture example.com').dataUrl}}" to POST to a webhook (Discord, Slack, S3 presigned URL). The data URL format is data:image/png;base64,... — most upload endpoints accept this.

How is this different from a browser extension like "Awesome Screenshot"? Those tools are interactive one-shot captures. This template is a scheduled, reproducible batch — same URLs every time, no clicks needed. Automa, Browserflow, and Bardeen all have screenshot blocks; the file-save flow is the differentiator.

Blocks used

  • manual_trigger
  • new_tab
  • wait_for
  • take_screenshot
  • save_file

Works on

Any site

Install in BNOD

Free. No signup required.

Related templates