Customize the Recorder with extensions

Sofia Emelianova

Jecelyn Yeen

You can customize the Recorder and integrate it into your workflow by installing third-party extensions that suit the tools you use.

Check out the collection of extensions.

Key point: If you can't find an extension that suits your tools, consider building your own.

Install extensions

To integrate the Recorder with your tools, install extensions:

1. Choose an extension from the collection and click it.
2. In Chrome Web Store, click Add to Chrome.
3. Open DevTools in a new tab and find new custom options in the Recorder.

This screenshot shows custom export and replay options provided by the extensions.

Note: You can open the collection of extensions from the Recorder. Select download Export > Get extensions... on the action bar at the top of the Recorder panel.

Troubleshooting

If you don't see export or replay options after installing an extension, check or do the following:

• The extension only works on web pages. For example, the export option is not available for chrome:// pages like chrome://extensions.
• Always open a new browser tab after installing the extension.
• The administrator's policy. The extension can be blocked by the administrator policy and thus not showing up (see runtime_blocked_hosts list in ExtensionSettings at chrome://policy/).

Known issues:

• Issue 1351416 in Chrome 104 and 105 prevents the display of the export option if you open the Recorder as the first DevTools panel. As a workaround, open another panel first (for example, Console), then open the Recorder. The issue is fixed in Chrome 106.

Build your own extension

To further customize the Recorder to your needs, you can build your own extension:

1. Check out Customize and automate user flows beyond Chrome DevTools Recorder.
2. Explore the chrome.devtools.recorder API.
3. Check out example extensions.
4. Develop your extension and publish it at Chrome Web Store.