MockupForge 3D Open the studio

Capture the page you are already on.

A Chrome extension that screenshots the current tab, either as it is or through a real emulated tablet or phone viewport, and opens it in the studio ready to render.

Add to Chrome

Free on the Chrome Web Store · Chrome, Edge, Brave and other Chromium browsers

The extension popup, showing four buttons: Capture Desktop, Capture Tablet set to iPad Pro 13 and Air 13 at 1024 by 1366, Capture Mobile set to iPhone 15 and 14 at 390 by 844, and Capture Both set to 1512 by 982 plus 390 by 844.
The whole extension. Nothing is hidden behind a menu.

Three buttons. That is the whole interface.

Click the toolbar icon on any page and pick how you want it captured.

Capture Desktop

Screenshots the tab exactly as it is rendered on your screen, at your display's full pixel density. Best for dashboards, editors and anything wide.

Capture Tablet

Same idea at tablet width. The page reflows to whatever it actually does on an iPad, and the capture opens on the studio's iPad model rather than a laptop, so it is not cropped to fit the wrong screen.

  • iPad Pro 13 and Air 13, 1024 by 1366
  • iPad Pro 11, 834 by 1210
  • iPad Air 11 and iPad 10.9, 820 by 1180
  • iPad mini, 744 by 1133

Capture Mobile

Switches the page into a phone viewport first, then screenshots that. The site genuinely reflows to its mobile layout, so you get the real thing rather than a desktop shot squeezed into a phone frame.

  • iPhone 15 and 14, 390 by 844
  • iPhone 15 Pro Max, 430 by 932
  • iPhone SE, 375 by 667
  • Pixel 8, 412 by 915

Capture Both

Takes a desktop and a mobile shot of the same page in one go, then opens them together on the studio's MacBook and iPhone model. One image that shows a client both views of their site at once, without lining anything up by hand.

  • MacBook Pro 16, 1512 by 982
  • Laptop, 1440 by 900
  • Desktop, 1680 by 1050
  • Full HD, 1920 by 1080

Keyboard, if you prefer: CmdShift9 for desktop, CmdShift7 for tablet and CmdShift8 for mobile. Use Ctrl instead of Cmd on Windows and Linux.

One click from the Web Store.

It is listed, reviewed and free. The steps below are the manual route, which is still here for two reasons: you may want to read the code before you run it, and the packaged build occasionally runs ahead of the published listing.

  1. Download and unzip

    You get a folder called mockupforge-capture. Keep it somewhere you will not delete by accident, because Chrome loads it from that location every time it starts.

  2. Open the extensions page

    Type chrome://extensions into the address bar. Chrome will not let a link take you there, so it has to be typed.

  3. Turn on developer mode

    The switch sits in the top right of that page.

  4. Load unpacked

    Click Load unpacked, choose the unzipped folder, and the extension appears in your list. Pin it to the toolbar from the puzzle piece icon so it is one click away.

Add to Chrome

The guide covers the manual route, plus how to take your first capture.

The extension settings page, showing a mobile viewport preset, a tablet viewport preset, a desktop viewport preset used by Capture Both, studio defaults for device and backdrop, an option to always save a PNG copy, and the debugger permission state.
Settings, once it is installed. Pick a phone and a tablet preset, and pin the device and backdrop captures land on.

It asks for four things and sends nothing anywhere.

There is no server, no account, no analytics and no network request of any kind in the extension. Your screenshot goes from Chrome into the studio tab on your own machine, and the studio renders it in your browser. The code is short enough to read in one sitting, and the zip contains nothing but the files listed on this page.

Every permission, and why.

Chrome shows these when you install. Here is what each one is actually for.

activeTab
Lets the extension screenshot the tab you are on, and only at the moment you click the button or press the shortcut. It has no access to any other tab and no standing access to this one.
storage
Holds your settings, and briefly holds the capture itself while the studio tab is opening. The capture is cleared the moment the studio confirms it loaded.
downloads
Only used as a safety net. If the studio cannot be reached, the screenshot is written to your downloads folder instead of being lost.
alarms
Sets the timer behind that safety net. Chrome shuts idle extensions down, and an alarm is the only thing that reliably survives it.
debugger
Tablet and mobile capture only. Chrome's device emulation is reachable only through the debugger interface, and Chrome does not allow this particular permission to be optional, so it is asked for at install rather than the first time you press one of those buttons. It is attached only while such a capture runs, used only to set the tablet or phone viewport, and detached as soon as the screenshot is taken. Chrome shows a banner on the tab while it is in use. Desktop capture never touches it.

What it will not do.

Worth knowing before you install rather than after.

Free, like the rest of it.

Add to Chrome Download the zip Open the studio instead

Packaged build: Version 0.7.0 · 32 KB zip

Installing and using it

Install, once

  1. Download the zip and unzip it. Put the folder somewhere permanent, because Chrome reads it from that path on every launch.
  2. Type chrome://extensions in the address bar and press enter.
  3. Turn on Developer mode, top right.
  4. Click Load unpacked and select the unzipped folder.
  5. Click the puzzle piece icon in the toolbar and pin MockupForge Capture so it stays visible.

Take a capture

  1. Go to any normal web page.
  2. Click the MockupForge icon in the toolbar.
  3. Choose Capture Desktop for the page as it is, Capture Tablet for an iPad viewport, Capture Mobile for a phone one, or Capture Both for a desktop and a phone shot together.
  4. The studio opens in a new tab with your screenshot already on the device. Drag to rotate, then export.

Your first tablet or mobile capture

Chrome shows a banner on the tab reading that the extension is debugging it. That is expected and it is what makes the page reflow to a real tablet or phone layout: debugger access is the only route to Chrome's device emulation, and Chrome does not allow that particular permission to be optional, so it is granted when you install rather than the first time you press the button. It is released the moment the screenshot is taken, and desktop capture never uses it at all.

If nothing opens

The extension waits about half a minute for the studio to confirm it received the image. If it does not, your screenshot is saved to your downloads folder under mockupforge/ rather than being thrown away. You can drag that PNG into the studio by hand.