Add plugins/extensions to remote browsers

Learn how to add extensions to remote Chrome browsers in BrowserStack Automate.

You can add extensions to remote Chrome browsers in BrowserStack Automate.

End-users extend browser functionalities with plugins / extensions. For some scenarios, you may need to verify the following:

1. How your web pages look or behave on browsers with 3rd party plugins / extensions.
2. How your plugin / extension modifies the appearance or behavior of different webpages. You can add plugins / extensions to remote browsers in BrowserStack Automate.

Prerequisites

First, you’ll need the Chrome extension’s .crx file. To obtain it, follow the steps below:

1. Find the Extension ID
   • Open Google Chrome browser on your workstation.
   • Open URL: chrome://extensions/. This will show you a list of installed extensions.
   • Tick the Developer Mode checkbox. This will show you the ID of each extension installed on your Chrome browser.
   • Find the extension you want to add on the remote Chrome browser. Copy its extension ID to Notepad.
2. Locating Extension-version subdirectory
   • Find the extensions directory on your workstation.
   • In the extensions directory, find the subdirectory with the extension’s version number.
   • Copy the path to this extension-version subdirectory and paste it in the Notepad.
3. Pack extension
   • Go back to Google Chrome extensions page and click ‘Pack extension’.
   • In the dialogue box that pops up, paste the path to the extension-version subdirectory in the “Extension root directory” input field.
   • Click the ‘Pack extension’ button. This will create a .crx file in the extension-version folder.

Copy the path to the extension-version folder (now containing the .crx file). We’ll need this path to configure our Selenium test.

Adding extensions to remote Chrome browser

This section shows you how to use Selenium’s chromeOptions class to add extensions in our remote Chrome browsers.

Add the code snippet below in your test script. This will instruct the remote ChromeDriver to add the specified extension before executing the test:

MutableCapabilities capabilities = new MutableCapabilities();
ChromeOptions options = new ChromeOptions();
HashMap<String, Object> browserstackOptions = new HashMap<String, Object();
capabilities.setCapability("browserName", "Chrome");
browserstackOptions.put("os", "Windows");
browserstackOptions.put("osVersion", "10");
capabilities.setCapability("bstack:options", browserstackOptions);
options.addExtensions(new File("<path to extension directory>.crx"));
capabilities.setCapability(ChromeOptions.CAPABILITY, options)

/* You need to use the below modules into your NodeJS test before implementing this code.

var chrome = require("selenium-webdriver/chrome");
var fs = require('fs');

*/

let file_path = '<path to extension directory>.crx';
let buff = new Buffer.from(fs.readFileSync(file_path));
let base64data = buff.toString('base64');

var capabilities = {
	'bstack:options' : {
		"os" : "Windows",
		"osVersion" : "10",
	},
  "chromeOptions": {
  "extensions" : [ base64data ] }
	"browserName" : "Chrome",
	"browserVersion" : "latest",
}

var driver = new webdriver.Builder().
  usingServer('https://hub-cloud.browserstack.com/wd/hub'). 
  withCapabilities(capabilities).
  build();

/* You need to use the below packages into your C# test before implementing
this code.

using System.IO;
using System.Collections.Generic;

*/

IWebDriver driver;

Byte[] bytes = File.ReadAllBytes("<path to extension directory>.crx");
String crx_file_base64 = Convert.ToBase64String(bytes);

String[] files_string_array = { crx_file_base64 };

Dictionary<string, object> chromeOptionsD = new Dictionary<string,
object>();
chromeOptionsD.Add("extensions", files_string_array);

ChromeOptions capabilities = new ChromeOptions();
capabilities.BrowserVersion = "latest";
Dictionary<string, object> browserstackOptions = new Dictionary<string, object>();
browserstackOptions.Add("os", "Windows");
browserstackOptions.Add("osVersion", "10");
browserstackOptions.Add("browserName", "Chrome");
capabilities.AddAdditionalOption("bstack:options", browserstackOptions);


driver = new RemoteWebDriver(
	new Uri("https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub/"), capabilities
);

/* Requires PHP Class
You need to use the class "Facebook\WebDriver\Chrome\ChromeOptions" into your PHP test before implementing following code. */

$options = new ChromeOptions();
$options->addExtensions(array(
  '<path to extension directory>.crx',
));

$caps = array(
	'bstack:options' => array(
		"os" => "Windows",
		"osVersion" => "10",
    "chromeOptions"=>$options
	),
	"browserName" => "Chrome",
	"browserVersion" => "latest",
)

$web_driver = RemoteWebDriver::create(
  "https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub",
  $caps
);

chrome_options = Options()
chrome_options.add_extension('<path to extension directory>.crx')
desired_cap = chrome_options.to_capabilities()
desired_cap = {
	'bstack:options' : {
		"os" : "Windows",
		"osVersion" : "10",
	},
	"browserName" : "Chrome",
	"browserVersion" : "latest",
}

caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => {"extensions" => [ Base64.strict_encode64(File.open("<path to extension directory>.crx", 'rb').read) ]})
capabilities = {
	'bstack:options' => {
		"os" => "Windows",
		"osVersion" => "10",
	},
	"browserName" => "Chrome",
	"browserVersion" => "latest",
}
driver = Selenium::WebDriver.for :remote, url: 'https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub', desired_capabilities: caps

DesiredCapabilities caps = new DesiredCapabilities();
ChromeOptions options = new ChromeOptions();
caps.setCapability("os", "Windows");
caps.setCapability("os_version", "10");
options.addExtensions(new File("<path to extension directory>.crx"));
caps.setCapability(ChromeOptions.CAPABILITY, options)

/* You need to use the below modules into your NodeJS test before implementing this code.

var chrome = require("selenium-webdriver/chrome");
var fs = require('fs');

*/

let file_path = '<path to extension directory>.crx';
let buff = new Buffer.from(fs.readFileSync(file_path));
let base64data = buff.toString('base64');

var capabilities = {
  'browserName' : 'Chrome',
  'os' : 'Windows',
  'os_version' : '10',
  'chromeOptions': {
  'extensions' : [ base64data ]
  }
}

var driver = new webdriver.Builder().
  usingServer('https://hub-cloud.browserstack.com/wd/hub'). 
  withCapabilities(capabilities).
  build();

/* You need to use the below packages into your C# test before implementing
this code.

using System.IO;
using System.Collections.Generic;

*/

IWebDriver driver;

Byte[] bytes = File.ReadAllBytes("<path to extension directory>.crx");
String crx_file_base64 = Convert.ToBase64String(bytes);

String[] files_string_array = { crx_file_base64 };

Dictionary<string, object> chromeOptionsD = new Dictionary<string,
object>();
chromeOptionsD.Add("extensions", files_string_array);

DesiredCapabilities capabilities = new DesiredCapabilities();
capabilities.SetCapability("browserName", "Chrome");
capabilities.SetCapability("browserVersion", "75.0");
capabilities.SetCapability("chromeOptions", chromeOptionsD);


driver = new RemoteWebDriver(
	new Uri("https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub/"), capabilities
);

/* Requires PHP Class
You need to use the class "Facebook\WebDriver\Chrome\ChromeOptions" into your PHP test before implementing following code. */

$options = new ChromeOptions();
$options->addExtensions(array(
  '<path to extension directory>.crx',
));

$caps = array(
    "browser" => "Chrome",
    "os" => "Windows",
    "os_version" => "10",
    "chromeOptions"=>$options
);

$web_driver = RemoteWebDriver::create(
  "https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub",
  $caps
);

chrome_options = Options()
chrome_options.add_extension('<path to extension directory>.crx')
desired_cap = chrome_options.to_capabilities()
desired_cap.update({
    'browser': 'chrome',
    'os': 'Windows',
    'os_version': '10'
})

caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => {"extensions" => [ Base64.strict_encode64(File.open("<path to extension directory>.crx", 'rb').read) ]})
caps['browser'] = 'Chrome'
caps['os'] = 'Windows'
caps['os_version'] = '10'
driver = Selenium::WebDriver.for :remote, url: 'https://YOUR_USERNAME:YOUR_ACCESS_KEY@hub-cloud.browserstack.com/wd/hub', desired_capabilities: caps