Question

I’m making a kind of Browser Detection library (I know user agent sniffing isn’t ideal). I found a pretty useful snippet on quirksmode.org that looked something like this:

var $browser = {
    init: function () {
        this.name = this.searchString(this.dataName) || "An unknown browser";

        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
    },

searchString: function (data) {

    for (var i=0;i<data.length;i++) {

        var dataString = data[i].string;

        var dataProp = data[i].prop;

        this.versionSearchString = data[i].versionSearch || data[i].identity;

        if (dataString) {
            if (dataString.indexOf(data[i].subString) != -1)
                return data[i].identity;
        }

        else if (dataProp) {
            return data[i].identity;
        }
    }
},

searchVersion: function (dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index == -1) return;
    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},

dataName: [
    {
        string: navigator.userAgent,
        subString: "Chrome",
        identity: "Chrome"
    },
    {   string: navigator.userAgent,
        subString: "OmniWeb",
        versionSearch: "OmniWeb/",
        identity: "OmniWeb"
    },
    {
        string: navigator.vendor,
        subString: "Apple",
        identity: "Safari",
        versionSearch: "Version"
    },
    {
        prop: window.opera,
        identity: "Opera",
        versionSearch: "Version"
    },
    {
        string: navigator.vendor,
        subString: "iCab",
        identity: "iCab"
    },
    {
        string: navigator.vendor,
        subString: "KDE",
        identity: "Konqueror"
    },
    {
        string: navigator.userAgent,
        subString: "Firefox",
        identity: "Firefox"
    },
    {
        string: navigator.vendor,
        subString: "Camino",
        identity: "Camino"
    },
    {       // for newer Netscapes (6+)
        string: navigator.userAgent,
        subString: "Netscape",
        identity: "Netscape"
    },
    {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Internet Explorer",
        versionSearch: "MSIE"
    },
    {       // for older Netscapes (4-)
        string: navigator.userAgent,
        subString: "Mozilla",
        identity: "Netscape",
        versionSearch: "Mozilla"
    }
]
};
$browser.init();

So now I can do something like

alert($browser.name + $browser.version);

But I also want to be able to do $browser.author, $browser.prefix and $browser.engine.
Anyone know how I could do this? I know I could do

 if($browser.name == "Chrome"){ var engine = "WebKit" }

But I don’t want just “engine”, I want “$browser.engine”

EDIT

Ok, look guys, as I said before I know user agent sniffing isn’t ideal. And I’m not basing my entire project on this. This is just a short little module on a bigger JS file. This is just a handy $browser module. I know feature detection is way better than ua sniffing, and I use modernizr way more than I do jQuery browser object, or Dojo “has”. In fact I never use those.
And I know that stackoverflow typically isn’t a tutoring website (well, isn’t a tutoring website rather), but I was kinda hoping just to find out a quick little way to add extra information in each object manually. I’ve tried many ways and kept getting errors or fails.

Answer 1

Take a look at these links:

• Detect Mobile Browsers
• DetectRight
• DeviceAtlas
• WURFL
• MDBF

Keep in mind though that you shouldn’t generally use this information instead of feature detection (unless you have to – like for some mobile browsers where you can’t do proper feature detection which is probably not aplicable here since you’re doing it in JavaScript anyway).

For proper feature detection use Modernizr and yepnope and be as future friendly as you possibly can.