Hassle-free mocking of xhr and fetch calls.

Latest Version

Version
8.5.6
Update
November 22, 2024
Size
3.6MiB
Developer
Category
Users
364
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
Storage
Scripting
See more

Parrot API mocking Extension

Mocking your API responses like a pro. Parrot allows you to mock any asynchronous API call you want. It does this by patching both Fetch and XMLHttpRequest in such way that the actual call will always be done, but the response will be substituted by the mock data you specified.

💡 When to use this extension?

🔸 You are developing a front end that needs to connect to some back end API, but that back end API has not yet been developed or is down.

🔸 You want to give a live demo but the back end API needed is currently not available or broken.

🔸 You would not only like to test the happy flow, but would also like to see how your front end behaves given any possible alternate scenario or edge case.

🔸 You are experiencing a nasty bug but have no way of reproducing it easily using the real back end system. You would like to tweak the response to check if any unexpected response could be the cause of your issue.

💡 How to use this extension?

Just make sure you have the Parrot the network viewer (see below) option enabled and start your journey. Any API-call done will showup in the viewer and can be mocked by the click of one single button.

As an alternative, you can also start by pressing the \"Define your mocks\" button and then pressing the Add button to define a mocked response for a specific request. A line will show up on which you can define the HTTP verb/method and the URL-fragment of the request you would like to be mocked. The URL fragment is defined with a regular expression, allowing you to make any matching requirement as loose or strict as you would like it to be.

NB
In cases where the request also has a payload (like POST), the content of that payload can be used for determining if mocking should take place.

On that same line you can then define the status code of your response, the exact response type and the payload to be returned.

Once the extension detects the method/URL you expressed, the regular call will still be done. However, once the actual response has been received, no matter it's actual result, it will be replaced by the mocked response you defined.

NB
Next to being JSON, for any response also SCRIPT can be specified. In this case plain JavaScript statements can be defined with which the original response can be modified (you can just reference the contextual variable \"response\").

Example (note that no function or return statement is needed):

response.someProperty = 'someValue';
response.someArray.push('blabla');

💡 Multiple mock rules

When determining the mock data to be substituted, there can be multiple rules matching the given URL and method. In this case, Parrot will just use the last available mock rule in top-down order.

💡 Timing your calls by adding a delay

Particularly for checking for, or debugging of, potential race condition issues, for any request a delay (expressed in milliseconds) can be specified. This delay will be taken into account before the response is returned to the client that made the request. By carefully timing request/response cycles you can make sure that responses will be received in the exact order you would like them to be.

💡 Export and Import your mock rules

The set of mock rules can also be exported to the file system using the Export button. This allows you to share your mock data with others and also allows you to create/maintain sets of mock rules. Exported files can easily be reimported by using the Import button. Imported files will be appended to any currently existing mock rules in the extension, allowing you to stack multiple sets on top of each other.

💡 Notification when mock data has been used

Every time mock data has been substituted, a small notification will show up. This behavior can be turned off using the popup dialog. The notification will show the path that's being mocked, the number of mock rules applied on it's response and, if applicable, the delay that was taken into account.

💡 Network viewer

Parrot will show all asynchronous calls in a compact view directly attached to your content page. This network view offers you the possibility to show and mock any response with the click of one single button. The overview also directly shows which responses were mocked and which responses were original. In case of a mocked response, opening the mock dialog will show you the response that resulted after applying all involved mock rules.

💡 Localhost

Localhost resources will not be mocked by Parrot.
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Parrot API mocking", "description": "Hassle-free mocking of xhr and fetch calls.", "version": "8.5.6", "author": "Ruud Landman", "background": { "service_worker": "background/js/background.js" }, "options_ui": { "page": "options/options.html", "open_in_tab": true }, "action": { "default_icon": "images/parrot.png", "default_popup": "popup/popup.html" }, "web_accessible_resources": [ { "resources": ["images/parrot.png"], "matches": ["http://*/*", "https://*/*"] } ], "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_start", "js": [ "generic/js/alert.js", "content/js/content-start.js" ], "css": [ "generic/css/css-variables.css", "generic/css/alert.css" ] }, { "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end", "js": [ "content/js/webcomponents-bundle.js", "content/js/mock-data-manager.js", "content/js/network-viewer.js", "content/js/content-end.js" ], "css": [ "generic/css/css-variables.css", "generic/css/alert.css" ] } ], "icons": { "128": "images/parrot.png" }, "host_permissions": [ "" ], "permissions": ["storage", "scripting"]}
Read more

How to download and manually install Parrot API mocking extension for Chrome

Looking for a way to install Parrot API mocking extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Parrot API mocking extensions manually, this article outlines two simple methods to effortlessly install Parrot API mocking extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Parrot API mocking extension and manually install through Drag &Drop

If you ever need to manually install a Parrot API mocking extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Parrot API mocking Extension by clicking the "Download CRX" button on the website.

Look for the Parrot API mocking extension you wish to install. Go to the website and download the Parrot API mocking extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Parrot API mocking extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Parrot API mocking extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Parrot API mocking extension for Chrome and install in Developer Mode

This is another method to install Parrot API mocking extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Parrot API mocking extension file

Select and download the Parrot API mocking extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Parrot API mocking extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Parrot API mocking extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Parrot API mocking extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Parrot API mocking extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Parrot Devtools Extension · Developer Tools 364 5 ★ 133KiB

icon

Get That API Extension · Developer Tools 364 2 ★ 80.25KiB

icon

xhr-devtool Extension · Developer Tools 364 1 ★ 51.34KiB

icon

Mimic , mock http requests Extension · Developer Tools 364 5 ★ 2.48MiB

icon

tweak: mock and modify HTTP requests Extension · Developer Tools 364 190 ★ 3.22MiB

icon

ModResponse - Mock and replay API Extension · Developer Tools 364 23 ★ 454KiB

icon

Mokku Extension · Developer Tools 364 76 ★ 3.28MiB

icon

Oh-my-Mock Extension · Developer Tools 364 8 ★ 7.07MiB

icon

Mock Proxy Extension · Developer Tools 364 4 ★ 2.03MiB

icon

MockMan - mock APIs Extension · Productivity 364 17 ★ 2.3MiB

icon

API Interceptor Extension · Developer Tools 364 1 ★ 2.4MiB

icon

Mock:Intercept and directly return data Extension · Developer Tools 364 6 ★ 487KiB

icon

Request Interceptor Extension · Developer Tools 364 12 ★ 23.97KiB

icon

Interceptor Extension · Developer Tools 364 2 ★ 180KiB

icon

Browser Proxy Extension · Developer Tools 364 1 ★ 2.54MiB

icon

Mockiato: Mocks on the Fly! Extension · Developer Tools 364 8 ★ 477KiB

icon

Request Interceptor Extension · Developer Tools 364 58 ★ 1.89MiB

icon

Rest API Inspector Extension · Developer Tools 364 6 ★ 365KiB

icon

Netify Extension · Developer Tools 364 40 ★ 1.24MiB

icon

Inssman: Open-Source: Modify HTTP Request Extension · Developer Tools 364 10 ★ 3.51MiB

icon

Automize - Testing/Scraping Tool Extension · Developer Tools 364 7 ★ 3.36MiB

icon

Scripter debugger extension Extension · Developer Tools 364 2 ★ 1.04MiB

icon

Tamper Dev Extension · Developer Tools 364 29 ★ 532KiB

icon

Chrome Response Override Extension · Developer Tools 364 15 ★ 488KiB

User reviews

icon

Peter Brons (ID: 0000006e76e2380a) Voted 5 ★ - Updated 12/19/2022 Great tool! Real easy to use and handles the mocking like charm. 5 out of 5!

icon

kami kamyar (ID: 000000f18cf1d9d7) Voted 5 ★ - Updated 06/08/2022 good job

icon

Henk Bouwensen (ID: 0000005d0dbffea9) Voted 5 ★ - Updated 04/10/2022 A real life saver. Next to fully replacing a response you can also process it using plain JavaScript! Really love this extension.