Intoli Remote Browser Tour

Launching and Controlling Remote Browsers

In the code on the right, you can see that we import the Browser class from the remote-browser package, instantiate a new class instance, and then wait for browser.launch() to resolve. When we call browser.launch(), the Remote Browser client connects to one of our servers, launches an instance of Firefox with the Remote Browser Web Extension installed, and then bridges the connection between the client and the extension using WebSockets. Later on, we call browser.quit() to shutdown the remote Firefox instance and clean up the connection.

Often when you see JavaScript demos like this, built using RunKit or similar libraries, the code is shipped off to a server and run using NodeJS. In this case, the Remote Browser client code is actually running directly in your browser. This means that we can't launch a local Firefox instance due to browser sandboxing, but that limitation only applies when running the client itself inside of a web browser. When used with Node, the client can launch browsers locally, remotely, and even connect to a browser that's already running.

In between launching and quitting our remote browser instance, we navigate the current tab of the remote browser to the Intoli Blog by calling browser.tabs.update(). What might be surprising here is that browser.tabs.update() isn't actually part of Remote Browser's API! In fact, the Remote Browser API doesn't even include a method for navigating to a new URL.

The browser.tabs.update() method is actually part of the Web Extensions API, as is the browser.tabs.Tab object that it returns. Any of the Web Extension API's methods which are exposed via the browser object in an extension can be called directly using an instance of Remote Browser's Browser control class. Even if you're controlling a browser that uses the older callback-based chrome API object, the browser object is automatically polyfilled so that you can use the newer promise-based browser API.

This means that Remote Browser doesn't have to implement its own methods for things like navigating, taking screenshots, modifying cookies, or intercepting request headers. The Web Extensions API already offers all of this functionality, and Remote Browser simply makes it really easy to interact with this extremely powerful API. In fact, the name "Remote Browser" is actually meant to reflect the idea of having remote access to the Web Extension API's browser object.

2/7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Browser from 'remote-browser';
// Launch a remote browser instance.
const browser = new Browser();
await browser.launch();
// Navigate to the Intoli Blog.
const url = 'https://www.intoli.com/blog';
const tab = await browser.tabs.update({ url });
// Log the `Tab` object so we see inspect it 
    below.
console.log(tab);
// Clean up the browser instance.
await browser.quit();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX