Selenium & WebExtension - Installation

Recently, we built a E2E test environment with selenium@4.0.0-alpha.1 and wrote some test suites for testing ShopBack’s browser extension. In the following section, we will go through how we install a local browser extension into Google Chrome and Mozilla Firefox which initialized by Selenium.

Google Chrome

• selenium@4.0.0-alpha.1
• chromedriver@2.41.0

Google Chrome is much simpler than Firefox, just prepare your local extension as well then write few selenium code like below:

However, How will you do if you want to install extension after chrome start up? Google Chrome doesn’t allow you to load a local extension after it started, instead a .crx file is acceptable. So what is crx file? Actually, it’s just kind of archive file like .zip. It’s almost the same thing for Firefox’s .xpi file.

You can get your .crx file through chrome://extensions:

1. Enable the developer mode on the right top corner.
2. Click the Pack extension button. A dialog appears.
3. Choose the path of your local extension.
4. Done, Chrome will generate a .pem and .crx file the parent path of step three.

Now, you can get this thing done by this .crx :

Mozilla Firefox

• selenium@4.0.0-alpha.1
• geckodriver@1.12.1

Firefox is a bit tricky when install browser extension through Selenium. You are not allow to install local browser extension into Firefox even you disable the xpinstall.signatures.required like below:

const firefoxOption = new firefox.Options();
firefoxOption.setPreference('xpinstall.signatures.required', false);

Fortunately, you still can achieve it in Firefox Developer Edition(a.k.a AURORA). Firstly, you have to finish is install Developer Edition from https://www.mozilla.org/firefox/developer

Secondly, it is supposed to be a application property in manifest.json. For example:

"applications": {
    "gecko": {
        "id": "ANY_ID_HERE",
        "strict_min_version": "52.0"
    }
}

After finish above two steps, when you install a local extension, you can not give a extension folder just like case of chrome. You are supposed to assign a .xpi file. It is almost same as .zip, you can just archive your extension to .zip file then change to .xpi file.

When you archive the extension, please do not archive the root folder of local extension, instead, you should select all the extension assets then archive. ref: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Package_your_extension_

The last step is initializing a Developer Edition through Selenium then install extension:

The error message shown below appears when running, it means selenium can not locate Firefox:

Error: Could not locate Firefox on the current system

You can config the firefox bin path manually via following command:

firefox.Channel.AURORA.darwin_ = PATH_TO_FIREFOX_BIN;

In the Mac OSX, the default path should be:

/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox-bin

Anyway, as I know there still are couple ways to install the local extension to firefox. However, some of them are tricky workaround or only work on Selenium 3. I will share more in this post if I get some updates.