Customize the Recorder with extensions

Sofia Emelianova
Sofia Emelianova

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.

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.

Export and replay extensions.

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

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.