Instrumenting Web Extension Views With The New Relic Browser Agent

The New Relic browser agent helps you monitor the performance, errors, and user experience of your web application or site. It collects data on page load time, Ajax requests, JavaScript errors, and custom events, and sends them to New Relic for analysis and visualization. But did you know that the view rendered by a web extension also operates with the same mechanics as a traditional web page? The New Relic browser agent can be utilized to observe the same wide variety of real user monitoring (RUM) data directly in the views rendered by your web extension.

If you want to use the New Relic browser agent in a web extension view, such as a pop-up, a sidebar, or an options page, you need to follow some steps to install and configure it properly. Here’s a guide on how to do that.

Install the browser agent as an NPM package

The first step is to install the browser agent to your web extension project. The examples used in this article utilize the browser agent NPM package. 

You can install the New Relic browser agent NPM package by running the following command:

npm install @newrelic/browser-agent –save

This will add the browser agent as a dependency in your package.json file and download it to your node_modules folder.

By utilizing the NPM agent library, the output of building your app will directly include the agent code, which can simplify the configuration of content security policy (CSP) rules for your web extension. If you desire to implement the agent by copying and pasting our snippet as an inline script into your extension views, you’ll need to ensure your extension has permission to load external resources from the New Relic content delivery network (CDN).

Load the browser agent in your extension view

The browser agent must be included and initialized in the code running in your views in order to observe and record data. To do this, add the agent to the highest level of the code defining your web view. This example shows the agent being added and initialized to the highest level of a react-based web extension view.

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';

// Populate your configuration using values in copy-paste JavaScript snippet in the NR1 UI.

const options = {

   Init:{ … },
loader_config: { … }
Info: { … }

}
 

// The agent loader code executes immediately on instantiation.

const browserAgent = new BrowserAgent(options)

// Passing the agent instance into the React application so that other components can access it if needed

ReactDOM.render(

  <App 

    browserAgent={browserAgent} 

  />, 

  document.getElementById('root')

);

Once the agent is installed and running in your web extension views, it will be able to detect all the RUM data it’s able to detect on a standard web page. To configure your Browser Agent to behave to your liking, please see the NPM readme for detailed information.

By following these steps, you can successfully add the New Relic browser agent to your Chrome extension view and start monitoring the performance and real-user experience of your extension views. You can view the data collected by the browser agent in your New Relic account dashboard and use it to optimize and troubleshoot your extension. Install the browser agent today to start understanding your extension’s impact on your customer experience.