How to load chrome extension in

Reading Time: 3 minutes

In our previous blog Progressive Web App Testing with, we explained:

  • What is
  • How is it different from Selenium?
  • How do we set up

Here we will see how do we load a chrome extension in

So before moving on, As we know chrome extension do have a qualified URL which we can automate by using cypress commands so the first question is, why we need to load an extension?

Chrome web store extension URL supports HTTP protocol, but what if we have a EUT (extension under test) unpacked version, normally these extensions supports chrome custom protocol which is chrome://extensions. Cypress does not support custom protocols, Cypress only supports web pages with protocol HTTP or HTTPS.

Here we will use Grammarly dev tools chrome extension for this whole exercise.

Get the extension:

We have multiple ways to get this extension, but here I am using an extractor that enables us to download the extension on the click of our finger:

  • In chrome browser add a chrome extension CRX Extractor and downloader which enable to download the extension zar.
  • Go to Grammarly Chrome extension
  • Click on the CRX extractor icon at the top of your browser and download the extension as a ZIP.
  • Extract the downloaded ZIP in a working directory.

Load the Extension in Cypress:

As we know cypress is a node module so to handle chrome extension we need to add an npm plugin by using the following command, which helps us to test our browser extension without messing with its code just for testing.

  • $ npm install -g –save-dev cypress-browser-extension-plugin

In your project’s plugins file:

// cypress/plugins/index.js
const extension loader = require('cypress-browser-extension-plugin/loader');
module.exports = (on) => {
on('before:browser:launch', extensionLoader.load('/path/to/your/extension'));

 In your project’s supports file:

// cypress/support/command.js
const addExtensionCommands = require('cypress-browser-extension-plugin/commands');

That’s all you need to load a single extension now run cypress by hitting following command.

  • $ npx cypress open
  • Select the spec file, loadChromeExtension.spec.js.

Note: When the test run analyze the cypress terminal window you will see an info log like:

‘Cypress Extensions: Copying and preparing extension myExtension from /home/knoldus/Downloads/kbfnbcaeplbcioakkpcpgfkobkghlhen to /tmp/cypress-extensions/myExtension’

And the extension will be loaded in your cypress test browser.


Written by 

Gaurav is a Module Lead QA Consultant having experience of more than 4.5 years. He is well familiar with core QA concepts and well versed in designing automation frameworks in a microservice environment. He has good hands-on experience in automation tools like ReadyAPI, SoapUI,,,,, Selenium (Java & Scala) and others. He actively promotes shifting left in the development cycle and understands the project domain to work closely with the development team. He has a good understanding of different domains like Airline, health Care and Shipping and cruising domain.