Chrome Extension Integration Guide

Typical installation time: 5 minutes

Hi there! You've found Honeybadger's guide to JavaScript error and exception tracking for your chrome extensions. Once installed, Honeybadger will automatically report errors from your chrome extension.

Installation

Code in Chrome extensions can run in different execution contexts, such as background scripts, content scripts, and popup or options pages. To monitor errors in all these contexts, you need to include the Honeybadger.js library in each of them.

Download the minified version of honeybadger.js to your source code from Honeybadger's CDN (i.e. https://js.honeybadger.io/v6.10/honeybadger.ext.min.js) and save under in your extension's source code (i.e. /vendor).

For the html (options or popup) pages, place the following code between the <head></head> tags of your page:

html

  

<!-- src should point to the honeybadger.ext.min.js you downloaded -->
<script src="vendor/honeybadger.ext.min.js" type="text/javascript"></script>

<script type="text/javascript">
  Honeybadger.configure({
    apiKey: 'Your project API key',
    environment: 'production',
    revision: 'git SHA/project version'
  });
</script>

Background Scripts

For background scripts, add the following code at the top of your background script:

javascript

  

importScripts(chrome.runtime.getURL('vendor/honeybadger.ext.min.js'));

Honeybadger.configure({
  apiKey: 'Your project API key',
  environment: 'production',
  revision: 'git SHA/project version'
});

Content Scripts

Finally, for content scripts, the manifest file should also be updated to include the Honeybadger library:

json

  

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["vendor/honeybadger.ext.min.js", "content-script.js"]
    }
  ]
}

Then, inside the content-script.js file, configure Honeybadger:

javascript

  

Honeybadger.configure({
  apiKey: 'Your project API key',
  environment: 'production',
  revision: 'git SHA/project version'
});

Note: Errors that happen in development and test environments are not reported by default. To always report errors or to change the defaults, see Environments and Versions.

See an example chrome extension + honeybadger.js project.

Reporting Errors

By default Honeybadger will report all uncaught exceptions automatically using our window.onerror handler.

You can also manually notify Honeybadger of errors and other events in your application code:

javascript

  

try {
  // ...error producing code...
} catch(error) {
  Honeybadger.notify(error);
}

Identifying Users

Honeybadger can track what users have encountered each error. To identify the current user in error reports, add a user identifier and/or email address with Honeybadger.context:

javascript

  

Honeybadger.setContext({
  user_id: 123,
  user_email: 'user@example.com'
});

Tracking Deploys

Honeybadger can also keep track of application deployments, and link errors to the version which the error occurred in. Here's a simple curl script to record a deployment:

sh

  

HONEYBADGER_ENV="production" \
HONEYBADGER_REVISION="git SHA/project version" \
HONEYBADGER_API_KEY="Your project API key" \
  curl -g "https://api.honeybadger.io/v1/deploys?deploy[environment]=$HONEYBADGER_ENV&deploy[local_username]=$USER&deploy[revision]=$HONEYBADGER_REVISION&api_key=$HONEYBADGER_API_KEY"

Be sure that the same revision is also configured in the honeybadger.js library. Read more about deploy tracking in the API docs.

Source Map Support

Honeybadger can automatically un-minify your code if you provide a source map along with your minified JavaScript files. See our Source Map Guide for details.

Limitations

Google's recent extension review policies forced us to remove the feature to Collect User Feedback in Chrome Extensions. If you are already using Honeybadger in your chrome extensions, please note that Google may reject your extension when you update it. In that case, please download a new build build from our CDN and replace the existing build in your extension. If you are using the Collect User Feedback feature in your extension and would like to have it in the future, please let us know!

Package:
@honeybadger-io/js

Version:
6.10.0

Repository:
https://github.com/honeybadger-io/honeybadger-js/tree/master/packages/js