Chrome Extension Setup

download.coffee

child_process = require 'child_process'

# Get the Chrome Extension download path.
# A great explanation of how this works can be found here:
# http://chrome-extension-downloader.com/how-does-it-work.php
chromeExtensionId = 'lpcaedmchfhocbbapmcbpinfpgnhiddi'
downloadUrl = "https://clients2.google.com/service/update2/crx?response=redirect&prodversion=49.0&x=id%3D#{chromeExtensionId}%26installsource%3Dondemand%26uc"

# Download your extension through curl.
# You can choose where you want your extension to be. This path will be used later when building your driver.
child_process.exec "curl -L -v -o '/tmp/location/of/extension.crx' '#{downloadUrl}'"

setup.coffee

# Load the Chrome extension and convert to base64 format.
# This is specific to how the node-selenium webdriver sets up its capabilities.
# Refer to http://stackoverflow.com/a/27278322/2204868 for more info.
data = fs.readFileSync '/tmp/location/of/extension.crx'
encodedExtension = data.toString 'base64'

capabilities =
  browserName: 'chrome'
  chromeOptions:
    extensions: [encodedExtension] # This needs to be a base64 String array of our extensions.

# This is the driver you can now use to power all of your tests.
@driver = new webdriver
  .Builder()
  .withCapabilities(capabilities)
  .build()

usage.coffee

class Extension

  # In this example, we have two iframes. The one built into our extension directly,
  # and the one that renders our actual content.
  # We would need to jump through two frames to get to our extension code, and we
  # can also jump out to interact with the main webpage.
  enterInnerFrame: ->
  
    # Enter our extension-provided iframe.
    @driver.wait(webdriver.until.elementLocated(css: @selectors.extensionFrame), 5000)
    @extensionFrame = @driver.findElement(css: @selectors.extensionFrame)
    @driver.switchTo().frame(@extensionFrame)
    
    # Enter the iframe which hosts our actual content.
    @contentFrame = @driver.findElement(css: @selectors.contentFrame)
    @driver.switchTo().frame(@contentFrame)
  
  # We can use this to jump back to our parent page. (LinkedIn, AngelList, etc.).
  enterRootFrame: ->
    @driver.switchTo().defaultContent()