Local-first handoffs

Chrome and VS Code screenshot extensions

Start closer to the source.

Two small extension alphas remove the download, rename and re-upload loop.

Unpacked alpha

Chrome capture

Capture the visible tab and open it as a new MockFrame shot. The image is removed from extension storage after the editor confirms receipt.

Marketplace publication is pending store review and signed release packaging.

Development alpha

VS Code selection

Send selected source code, language and filename directly into the code screenshot workflow.

Marketplace publication is pending store review and signed release packaging.

Website screenshots from Chrome

  1. 01CaptureClick MockFrame Capture in the toolbar and choose Capture visible tab. Chrome takes a PNG of what is on screen in the current tab.
  2. 02Hand offThe extension keeps the image in its local storage for a moment and opens the MockFrame editor in a new tab.
  3. 03EditThe editor picks the capture up, drops it into a new shot, and the extension deletes its stored copy. Put it in a browser frame or a device and export.

Code screenshots from VS Code

  1. 01Select codeHighlight the lines you want to share in any file.
  2. 02Run the commandRight-click and choose MockFrame: Create Screenshot from Selection, or run it from the Command Palette.
  3. 03Style itYour browser opens MockFrame's code screenshot template with the code, the file's language and its name filled in. Style it and export.

Permissions and privacy

Chrome permissions
activeTab and tabs to capture the current tab and open the editor; storage to hold the capture until the editor has it. The capture is a PNG of the visible area only, not the full page.
Where your data goes
The extensions don't upload files. The Chrome capture moves from extension storage to the MockFrame tab inside your browser; VS Code opens MockFrame with the selection in the page URL.
VS Code limits
Up to 12,000 characters of the selection are sent. The mockframe.baseUrl setting points the command at another MockFrame origin, such as a local development server.
Availability
Both are alphas. Chrome Web Store and Visual Studio Marketplace listings are pending store review and signed release packaging.

No extension needed for a one-off? The website screenshot generator and the code screenshot generator work in the browser.

Figma pluginSend selected frames into device mockups or a store listing set.