# How to use MockFlow WireframePro Chrome Extension

> Quickly convert webpages into wireframes with the MockFlow WireframePro Chrome extension. This can be very useful when you find...

Source: https://mockflow.com/docs/integrations/chrome-extension/to-use-mockflow-chrome-extension

Quickly convert webpages into wireframes with the MockFlow WireframePro Chrome extension. This can be very useful when you find inspiration for a website section, web app section, or to redesign your own website.

Follow the steps below to install and use the extension.

1. Open the Chrome Web Store and search for **MockFlow WireframePro**.

![Searching MockFlow WireframePro in Chrome Web Store - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/90b6be8c366cc1735dd1277c.gif)

1. Click on the 'Add to Chrome' button to install the MockFlow Chrome extension in your browser.

![Navigate to Add to chrome - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/339c09322ebb847252ebb810.webp)

1. Confirm the installation by clicking Add Extension.

![Click on Add Extension - MockFlow WireframePro](https://assets.mockflow.com/docs/media/458700601713220798c97c40.webp)

1. Once installed, the MockFlow WireframePro Chrome extension will be added to your browser. You can pin it for easy access.

![Pin the MockFlow Wireframepro Chrome Extension - MockFlow WireframePro](https://assets.mockflow.com/docs/media/6b75c23174d2004998d19636.gif)

1. Click on the MockFlow WireframePro extension and log in with your MockFlow account.

![Log in to the MockFlow WireframePro Chrome Extension - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/534cff77824a5f2cc3bcde11.webp)

1. After logging in, choose the page you want to capture and click 'Capture.'

![Navigate to the Capture - MockFlow WireframePro extension](https://assets.mockflow.com/docs/media/d611dde7f0251b02492719b0.webp)

1. The MockFlow Chrome Extension provides two ways to capture a website for reference:

1. **Capture full page: **Converts a specific section of a webpage into a Wireframe.
2. **Capture selected portion:** Converts the entire webpage into a Wireframe.

1. Choose any one of the options.

![Choosing the options - MockFlow WireframePro](https://assets.mockflow.com/docs/media/ba1eafc3570cbabed23a1d79.webp)

1. The page will be captured.

![Capturing the page - MockFlow WireframePro Chrome extension](https://assets.mockflow.com/docs/media/6a57a3c9101724d5af91059a.gif)

1. After capturing, you can customize the wireframe using:

1. **Import All Images**: Includes all images captured from the webpage in the wireframe.
2. **Draw in Sketchy Style**: Creates the wireframe in a hand-drawn sketch style.

![Choosing Wireframe Options - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/fab86900e40f0b3f6090b812.webp)

1. You can repeat the steps to capture multiple pages if needed.

1. Once done, click 'Convert to Wireframe.'

1. Choose either 'New Project' to start a fresh project or 'Existing Project' to add the captured wireframe to an existing one.

![Choosing the options to convert to wireframe and save it - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/1282f07bd7fd6cbeda960b6b.webp)

1. By choosing 'Create New Project', you can create a new project and export it directly.

![Editor in the Create a New Project - MockFlow WireframePro Chrome Extension](https://assets.mockflow.com/docs/media/fd4ed921d0f5af3d0e18dd6a.webp)

1. On Choosing 'Select Existing Project', you can choose the design space and the project where you want to add the captured Wireframe.

![Selecting the Existing Project - MockFlow WireframePro Chrome Extension](https://assets.mockflow.com/docs/media/1945dc66d7bb3f8c2d21f61e.webp)

1. When importing into a project, you will have two options:

1. **This Page:** All pages will be imported into the same page.
2. **New Pages:** Each captured page will be imported into separate pages.

![Choose the page options to import the Wireframes - MockFlow WireframePro Chrome Extension](https://assets.mockflow.com/docs/media/f232bac1bccb3f81f88c322f.webp)

1. As seen in the image below, the webpage has been converted to an editable wireframe in sketchy style. You can now make edits to the wireframe as required.

![Imported wireframe is editable - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/0123c93f8d6896fdda99f2af.gif)

1. Click 'Export' to download the wireframe.

![Navigate to the export - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/8b3dbd6e1efbfcf4a04c4a7e.webp)

The open link icon at the top right is to open the wireframe editor in a new tab and continue editing your wireframe seamlessly.

![Choose this option to open the editor in the new tab - MockFlow WireframePro chrome extension](https://assets.mockflow.com/docs/media/8ab8e1f179b557a482a032c2.webp)