JavaScript: come scoprire se il browser dell'utente è Chrome?

Ho bisogno di alcune funzioni che restituiscono un valore booleano per verificare se il browser lo è Chrome .

Come posso creare tale funzionalità?

Aggiornamento: consultare la risposta di Jonathan per un modo aggiornato di gestirlo. La risposta che segue potrebbe ancora funzionare, ma potrebbe innescare alcuni falsi positivi in ​​altri browser.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

Tuttavia, come indicato, gli agenti utente possono essere falsificati, quindi è sempre meglio utilizzare il rilevamento delle funzionalità (ad es. Modernizer ) quando si gestiscono questi problemi, come menzionano altre risposte.

Per verificare se il browser è Google Chrome , prova questo:

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

Esempio di utilizzo: http://codepen.io/jonathan/pen/WpQELR

Il motivo per cui funziona è perché se usi la finestra di ispezione di Google Chrome e vai alla scheda della console. Digita "finestra" e premi invio. Quindi sarai in grado di visualizzare le proprietà DOM per l '"oggetto finestra". Quando si comprime l'oggetto è possibile visualizzare tutte le proprietà, inclusa la proprietà 'chrome'.

Non è più possibile utilizzare rigorosamente uguale a true per verificare in IE window.chrome. IE era solito tornare undefined, ora ritorna true. Ma indovina un po ', IE11 ora torna di nuovo indefinito. IE11 restituisce anche una stringa vuota ""per window.navigator.vendor.

Spero che aiuti!

AGGIORNARE:

Grazie a Halcyon991 per aver sottolineato di seguito, che anche la nuova Opera 18+ viene trasmessa su true window.chrome. Sembra che Opera 18 sia basato su Chromium 31 . Quindi ho aggiunto un segno di spunta per assicurarmi che window.navigator.vendoris: "Google Inc"and not is "Opera Software ASA". Anche grazie a Ring e Adrien Be per il testa a testa su Chrome 33 che non torna più vero ... window.chromeora controlla se non nullo. Ma fai molta attenzione a IE11, ho aggiunto il check back undefinedpoiché IE11 ora viene emesso undefined, come ha fatto quando è stato rilasciato per la prima volta .. poi dopo alcuni build di aggiornamento è stato emesso su true... ora la build di aggiornamento recente viene undefinednuovamente lanciata . Microsoft non riesce a decidersi!

AGGIORNAMENTO 24/07/2015 - aggiunta per Opera check

Opera 30 è stata appena rilasciata. Non viene più emesso window.opera. E anche window.chromeoutput su true nel nuovo Opera 30. Quindi è necessario verificare se OPR è in userAgent . Ho aggiornato le mie condizioni sopra per tenere conto di questa nuova modifica in Opera 30, poiché utilizza lo stesso motore di rendering di Google Chrome.

AGGIORNAMENTO 13/10/2015 - aggiunta per controllo IE

Aggiunto controllo per IE Edge grazie alla sua uscita trueper window.chrome.. anche se le uscite IE11 undefinedper window.chrome. Grazie ad artfulhacker per averci fatto sapere questo!

AGGIORNAMENTO 2/5/2016 - aggiunta per iOS Chrome check

Aggiunto controllo per iOS Chrome check CriOSgrazie alla sua uscita trueper Chrome su iOS. Grazie a xinthose per averci informato di questo!

AGGIORNAMENTO 18/04/2018 - modifica per il controllo Opera

A cura di controllo per Opera, il controllo window.oprnon è undefineddato che ora Chrome 66 ha OPRin window.navigator.vendor. Grazie a Frosty Z e Daniel Wallman per aver segnalato questo!

ancora più breve: var is_chrome = /chrome/i.test( navigator.userAgent );

Una soluzione molto più semplice è solo per usare:

var isChrome = !!window.chrome;

Il !!just converte l'oggetto in un valore booleano. Nei browser non Chrome, questa proprietà sarà undefined, il che non è vero.

Nota che questo vale anche per le versioni di Edge basate su Chrome (grazie a @Carrm per averlo segnalato).

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

Puoi anche desiderare la versione specifica di Chrome:

var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
    var uaArray = ua.split(' ')
    ,   version = uaArray[uaArray.length - 2].substr(7);
}

Mi scuso con The Big Lebowski per aver usato la sua risposta nella mia.

Puoi usare:

navigator.userAgent.indexOf("Chrome") != -1

Funziona su v.71

Funziona per me su Chrome su Mac. Sembra essere o più semplice o più affidabile (nel caso in cui la stringa UserAgent sia stata testata) di tutto quanto sopra.

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);

L'utente potrebbe cambiare l'agente utente. Prova a testare la webkitproprietà con prefisso stylenell'oggetto bodydell'elemento

if ("webkitAppearance" in document.body.style) {
  // do stuff
}

Controlla questo: Come rilevare i browser Safari, Chrome, IE, Firefox e Opera?

Nel tuo caso: var isChrome = !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);

Conoscere i nomi di diversi browser desktop (Firefox, IE, Opera, Edge, Chrome). Tranne Safari.

function getBrowserName() {
  var browserName = '';
  var userAgent = navigator.userAgent;
  (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
  ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
  (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
  (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
  (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');

  /**
   * Expected returns
   * Firefox, Opera, Edge, Chrome
   */
  return browserName;
}

Funziona nelle seguenti versioni del browser:

Opera - 58.0.3135.79
Firefox - 65.0.2 (64-bit)
IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
Edge - 44.17763.1.0
Chrome - 72.0.3626.121 (Official Build) (64-bit)

Guarda l'essenza qui e il violino qui

Lo snippet di codice originale non funzionava più per Chrome e ho dimenticato dove l'ho trovato. Prima aveva un safari ma non ho più accesso al safari, quindi non posso più verificarlo.

Solo i codici Firefox e IE facevano parte dello snippet originale.

Il controllo per Opera, Edge e Chrome è diretto. Hanno differenze in userAgent. OPResiste solo in Opera.Edgeesiste solo in Edge. Quindi per verificare la presenza di Chrome questa stringa non dovrebbe essere lì.

Per quanto riguarda Firefox e IE, non posso spiegare cosa fanno.

Aggiungerò questa funzionalità a un pacchetto che sto scrivendo

tutte le risposte sono sbagliate. "Opera" e "Chrome" sono uguali in tutti i casi.

(parte modificata)

ecco la risposta giusta

if (window.chrome && window.chrome.webstore) {
    // this is Chrome
}