0

I'm working on a Chrome extension for the first time and trying to integrate Bugsnag js error reporting.

I found a lot of useful information, but I don't understand how to actually load bugsnag into the extension. (e.g. in the background script, content script, a background.html page or somewhere else). Do you write code to insert the script tag into the page?

Bugsnag setup docs suggest configuring 

<script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-2.min.js"
     data-apikey="YOUR-API-KEY-HERE"></script>

I tried adding that to a background.html page, but no luck. I also tried adding the cloudfront script to content and background scripts in the extension, but had trouble loading it.

Uncaught ReferenceError: Bugsnag is not defined

Similarly, where's the best place to put reference to the bugsnag script and modify the Bugsnag object (e.g. 

Bugsnag.beforeNotify = function (error, metaData) {
    error.stacktrace = error.stacktrace.replace(/chrome-extension:/g, "chromeextension:");
}

to permit extension errors to reach bugsnag, as suggested here.

Realize it's a pretty basic setup question but have had some trouble finding a direction for this specific use case. Thanks for any suggestion!

Community
  • 1
  • 1
abaldwinhunter
  • 107
  • 1
  • 2
  • 8

1 Answers1

2

You're trying to include an external script. That's going to be tough - extensions primarily expect all their resources bundled with them.

For extension pages (background/popup), yes, you can include it, but:

  1. You need to declare a CSP that allows this code as an exception.

  2. You have to explicitly load it over https://, the protocol-relative URL //... fails since the origin has chrome-extension://... URL.

For content scripts, it's going to be more complicated. You can't use the tag method, since anything in a <script> tag goes to the page context, not the content script context.

So you will need to inject it with executeScript, having previously downloaded it with XHR (you can't specify a remote URL for executeScript but you can specify a string containing the code). You'll need to set the API key with the alternative method, obviously.

Do note that Bugsnag mentions bundling the code locally as a possibility:

If you'd like to avoid an extra blocking request, you can include the javascript in your asset compilation process so that it is inlined into your existing script files. The only thing to be sure of is that Bugsnag is included before your onload handlers run.

As such, all of the above can be safely ignored. But it will be up to you to keep the script up to date.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • 1
    Thanks Xan! That answer is really helpful. One thing I realized is that I could just include a `vendor/bugsnag-2.min.js` file in the extension instead of loading the external script. That got Bugsnag reporting, but still working on getting the error catching set up! Not sure if an external script embedded in page will be required so that Bugsnag can catch the content-script errors. Thanks again for answer! – abaldwinhunter Mar 17 '16 at 20:30
  • Indeed, that's a possibility. – Xan Mar 17 '16 at 20:32