Load SessionBox One extension with Selenium

This guide is for users who wish to manually implement automation. For the preferred method, please use our official SDK.

When it comes to automating browser interactions, Selenium is a popular choice. This guide offers an in-depth tutorial on seamlessly integrating the Sessionbox extension into Selenium webdriver instances. Additionally, a full working example is included at the end of the article.

To ease this process, you can also the SessionBox toolkit, by clicking here.

For this tutorial we will use TypeScript. However this process is adaptable to other programming languages.

First you will need to create a project folder and install Node.js, as well as Selenium.

Start by accessing the endpoint below. It is part of Google's update services and is used for retrieving Chrome extensions in their CRX format. 

https://clients2.google.com/service/update2/crx

Generic

Don’t forget to  include these query parameters:

?response=redirect&prodversion={versionOfYourSessionBoxOne}&acceptformat=crx2,crx3&x={extensionId}&nacl_arch={architecture}

Generic

Make sure that you are including the latest version number of Chrome and adjust the architecture parameter as per your machine. If you're unsure about this, refer to the relevant section below for guidance.

To identify the ID of the extension you wish to download, go to Chrome extensions, enable developer mode, and locate the extension’s ID.

After fetching the above URL, you’ll receive a binary CRX file. Convert this to an array buffer and save it as a file:

function downloadSessionBoxExtension(browserVersion: string, architecture: string) {
    const response = await fetch(`https://clients2.google.com/service/update2/crx?response=redirect&prodversion={browserVersion}&acceptformat=crx2,crx3&x=id%3Dgmechnknnhcmhlciielglhgodjlcbien%26uc&nacl_arch={architecture}`);
    const buffer = await response.arrayBuffer();
    fs.writeFileSync(OUTPUT_PATH, Buffer.from(buffer), 'utf-8');
}

JavaScript

With the CRX file on hand, set up a driver and load the extension.

function createDriverWithSessionBox(){
    const options = new Options(); 
    options.addExtensions(CRX_PATH); 
    let driver = await new Builder() 
         .forBrowser('chrome') 
         .setChromeOptions(options) 
         .build();
}

JavaScript

With this setup, you will have a webdriver that automatically loads the Sessionbox extension.

To identify your system’s architecture, you can refer to the userAgent, or if you are using Node.js, you can use the built-in ‘os’ module.

function getArch() {
    const arch = os.arch();
    if (arch.includes('86')) {
        return 'x86-32';
    } else if (arch.includes('64')) {
        return 'x86-64';
    } else {
        return 'arm';
}

JavaScript

To get the Chrome version you can create a headless driver and query the browser version:

function getChromeVersion(){
    const options = new Options().addArguments('--headless');
    let driver = await new Builder()
         .forBrowser('chrome')
         .setChromeOptions(options)
         .build();
    const capabilities = await driver.getCapabilities();
    const browserVersion = capabilities.get("browserVersion");
}

JavaScript

You’ll need to ensure the browser version follows this format: major.minor.build.revision.patch.

Alternatively, you can check the latest version of your browser manually.

import * as fs from 'fs';
import { Options } from 'selenium-webdriver/chrome';
import { Builder } from 'selenium-webdriver';
import * as os from 'os';
import fetch from 'node-fetch-commonjs';

const FOLDER_NAME = 'ext';
const CRX_PATH = 'ext/sbo.crx';
const EXTENSION_ID = 'gmechnknnhcmhlciielglhgodjlcbien';

async function downloadSessionBoxExtension(browserVersion: string, architecture: string) {
    try {
        createOutputFolder();
        const response = await fetch(`https://clients2.google.com/service/update2/crx?response=redirect&prodversion=${browserVersion}&acceptformat=crx2,crx3&x=id%3D${EXTENSION_ID}%26uc&nacl_arch=${architecture}`);
        if (response.ok) {
            const buffer = await response.arrayBuffer();
            fs.writeFileSync(CRX_PATH, Buffer.from(buffer), 'utf-8');
        } else {
            throw new Error('Error: could not query extension');
        }
    } catch (e) {
        throw new Error(e);
    }
}

async function createDriverWithSessionBox() {
    const options = new Options();
    options.addExtensions(CRX_PATH);
    return await new Builder()
        .forBrowser('chrome')
        .setChromeOptions(options)
        .build();
}

export const createOutputFolder = () => {
    if (!fs.existsSync(FOLDER_NAME)) {
        fs.mkdirSync(FOLDER_NAME);
    }
}

function getArch() {
    const arch = os.arch();
    if (arch.includes('86')) {
        return 'x86-32';
    } else if (arch.includes('64')) {
        return 'x86-64';
    } else {
        return 'arm';
    }
}

async function getChromeVersion() {
    const options = new Options().addArguments('--headless');
    let driver = await new Builder()
        .forBrowser('chrome')
        .setChromeOptions(options)
        .build();
    const capabilities = await driver.getCapabilities();
    return await capabilities.get('browserVersion');
}

async function main() {
    const arch = getArch();
    const chromeVersion = await getChromeVersion();
    await downloadSessionBoxExtension(chromeVersion, arch);
    const driver = createDriverWithSessionBox();
    // continue working with the driver
}

main();

JavaScript