JavaScript: comment savoir si le navigateur de l'utilisateur est Chrome?

J'ai besoin d'une fonction renvoyant une valeur booléenne pour vérifier si le navigateur est Chrome .

Comment créer une telle fonctionnalité?

Mise à jour: veuillez consulter la réponse de Jonathan pour une façon actualisée de gérer cela. La réponse ci-dessous peut toujours fonctionner, mais elle pourrait probablement déclencher des faux positifs dans d'autres navigateurs.

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

Cependant, comme mentionné, les agents utilisateurs peuvent être usurpés, il est donc toujours préférable d'utiliser la détection des fonctionnalités (par exemple Modernizer ) lors du traitement de ces problèmes, comme d'autres réponses le mentionnent.

Pour vérifier si le navigateur est Google Chrome , essayez ceci:

// 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 
}

Exemple d'utilisation: http://codepen.io/jonathan/pen/WpQELR

La raison pour laquelle cela fonctionne est que si vous utilisez l'inspecteur Google Chrome et accédez à l'onglet console. Tapez «fenêtre» et appuyez sur entrée. Ensuite, vous pourrez afficher les propriétés DOM de «l'objet fenêtre». Lorsque vous réduisez l'objet, vous pouvez afficher toutes les propriétés, y compris la propriété «chrome».

Vous ne pouvez plus utiliser strictement égal à vrai pour vérifier dans IE window.chrome. IE retournait undefined, maintenant il revient true. Mais devinez quoi, IE11 renvoie à nouveau indéfini. IE11 renvoie également une chaîne vide ""pour window.navigator.vendor.

J'espère que ça aide!

METTRE À JOUR:

Merci à Halcyon991 d' avoir souligné ci-dessous que le nouvel Opera 18+ est également vrai window.chrome. On dirait qu'Opera 18 est basé sur Chromium 31 . J'ai donc ajouté une vérification pour m'assurer que le window.navigator.vendorest: "Google Inc"et non "Opera Software ASA". Merci aussi à Ring et Adrien Be pour les avertissements sur Chrome 33 ne retournant plus vrai ... window.chromevérifie maintenant si non nul. Mais faites très attention à IE11, j'ai ajouté la vérification undefineddepuis qu'IE11 sort maintenant undefined, comme il l'a fait lors de sa première sortie .. puis après quelques builds de mise à jour, il est sorti vers true... la build de mise à jour récente est de undefinednouveau en sortie . Microsoft ne peut pas se décider!

MISE À JOUR 7/24/2015 - ajout pour la vérification d'Opera

Opera 30 vient de sortir. Il ne sort plus window.opera. Et window.chromeaffiche également true dans le nouvel Opera 30. Vous devez donc vérifier si OPR est dans userAgent . J'ai mis à jour ma condition ci-dessus pour tenir compte de ce nouveau changement dans Opera 30, car il utilise le même moteur de rendu que Google Chrome.

MISE À JOUR 13/10/2015 - ajout pour la vérification IE

Ajout de la vérification pour IE Edge en raison de sa sortie truepour window.chrome.. même si IE11 sort undefinedpour window.chrome. Merci à artfulhacker de nous en avoir informé!

MISE À JOUR 2/5/2016 - ajout pour la vérification iOS Chrome

Ajout d'une vérification pour iOS Chrome en CriOSraison de sa sortie truepour Chrome sur iOS. Merci à xinthose de nous en avoir informé!

MISE À JOUR 4/18/2018 - changement pour chèque Opera

Sous la direction chèque de l' Opéra, la vérification window.oprn'est pas undefineddepuis maintenant Chrome 66 a OPRen window.navigator.vendor. Merci à Frosty Z et Daniel Wallman pour avoir signalé cela!

encore plus court: var is_chrome = /chrome/i.test( navigator.userAgent );

Une solution beaucoup plus simple consiste simplement à utiliser:

var isChrome = !!window.chrome;

Le !!convertit simplement l'objet en une valeur booléenne. Dans les navigateurs non Chrome, cette propriété sera undefined, ce qui n'est pas vrai.

Notez que cela retourne également vrai pour les versions d'Edge basées sur Chrome (merci @Carrm de l'avoir signalé).

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

Vous pouvez également souhaiter la version spécifique de Chrome:

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

Toutes mes excuses à The Big Lebowski pour avoir utilisé sa réponse dans la mienne.

Vous pouvez utiliser:

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

Il travaille sur v.71

Fonctionne pour moi sur Chrome sur Mac. Semble être plus simple ou plus fiable (dans le cas où la chaîne userAgent a été testée) que tout ce qui précède.

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

L'utilisateur peut changer d'agent utilisateur. Essayez de tester la webkitpropriété préfixée dans l' styleobjet de l' bodyélément

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

Vérifiez ceci: Comment détecter les navigateurs Safari, Chrome, IE, Firefox et Opera?

Dans votre cas: var isChrome = !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);

Connaître les noms des différents navigateurs de bureau (Firefox, IE, Opera, Edge, Chrome). Sauf 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;
}

Fonctionne dans les versions de navigateur suivantes:

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)

Voir l'essentiel ici et le violon ici

L'extrait de code d'origine ne fonctionnait plus pour Chrome et j'ai oublié où je l'ai trouvé. Il y avait un safari auparavant mais je n'ai plus accès au safari donc je ne peux plus vérifier.

Seuls les codes Firefox et IE faisaient partie de l'extrait d'origine.

La vérification d'Opera, Edge et Chrome est simple. Ils ont des différences dans userAgent. OPRn'existe que dans Opera. Edgen'existe que dans Edge. Donc, pour vérifier Chrome, cette chaîne ne devrait pas être là.

Quant à Firefox et IE, je ne peux pas expliquer ce qu'ils font.

Je vais ajouter cette fonctionnalité à un package que j'écris

toutes les réponses sont fausses. "Opera" et "Chrome" sont les mêmes dans tous les cas.

(partie éditée)

voici la bonne réponse

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