javascript - How to determine in which browser your extension background script is executing?

Question

I'm talking about Chrome extensions, Firefox WebExtensions, Edge extensions...

In a background script, not a content script, is there a clear way to know which browser I am using? I need to do different operations for different browsers.

Yes, navigator.userAgent can be useful, but it's not very clear.

Is there any extension API that can be used to do this? Something like, chrome.extension.browserType. (Of course, this one doesn't really exist..)

Answer 1

There is no specific API to detect which browser is currently being used. One of the benefits of the major browsers moving to support a common extension framework is being able to have a single codebase which supports multiple browsers. While the set of functionality which is available from all applicable browsers is growing, there will always be some differences. These differences are not just in what is supported, but in some cased are in the specifics of the effects for a particular API, or how the API must be used.^1,2 Thus, for some things, it is necessary to be able to determine which browser the code is currently running.

There is some good code available from the top-voted answer to "How to detect Safari, Chrome, IE, Firefox and Opera browser?". However, it needs some modification to work in an extension environment.

Based on the code in that answer, the following will detect:

• Chrome
• Edge
• Firefox
• Opera
• the Bink engine

// Opera 8.0+ (tested on Opera 42.0)
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera 
                || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+ (tested on Firefox 45 - 53)
var isFirefox = typeof InstallTrigger !== 'undefined';

// Internet Explorer 6-11
//   Untested on IE (of course). Here because it shows some logic for isEdge.
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+ (tested on Edge 38.14393.0.0)
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+ (tested on Chrome 55.0.2883.87)
// This does not work in an extension:
//var isChrome = !!window.chrome && !!window.chrome.webstore;
// The other browsers are trying to be more like Chrome, so picking
// capabilities which are in Chrome, but not in others is a moving
// target.  Just default to Chrome if none of the others is detected.
var isChrome = !isOpera && !isFirefox && !isIE && !isEdge;

// Blink engine detection (tested on Chrome 55.0.2883.87 and Opera 42.0)
var isBlink = (isChrome || isOpera) && !!window.CSS;

/* The above code is based on code from: https://stackoverflow.com/a/9851769/3773011 */    
//Verification:
var log = console.log;
if(isEdge) log = alert; //Edge console.log() does not work, but alert() does.
log('isChrome: ' + isChrome);
log('isEdge: ' + isEdge);
log('isFirefox: ' + isFirefox);
log('isIE: ' + isIE);
log('isOpera: ' + isOpera);
log('isBlink: ' + isBlink);

---

1. Different implementations of an API which interfaces with something as complex and diverse as the different browsers will always end up with, at least, subtle differences between implementations. Currently, many of the differences are not that subtle.
2. Mozilla has explicitly stated that they intend to implement functionality for WebExtensions which is not currently available in other browsers by extending the chrome.*/browser.* APIs. One way that this is being done is that there is a mechanism called WebExtensions Experiments which is intended for non-Mozilla developers to implement additional functionality for WebExtensions. The intent is that such functionality, if approved, will be migrated into stock Firefox builds.