JavaScript: как узнать, является ли пользовательский браузер Chrome?

Обновление: см. ответ Джонатана, чтобы узнать об обновленном способе решения этой проблемы. Приведенный ниже ответ может по-прежнему работать, но он может вызвать ложные срабатывания в других браузерах.

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

Однако, как уже упоминалось, пользовательские агенты могут быть подделаны, поэтому всегда лучше использовать обнаружение функций (например, Modernizer) при работе с ними вопросы, как упоминается в других ответах.

Чтобы проверить, является ли браузер Google Chrome, попробуйте следующее:

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

Пример использования: http://codepen.io/jonathan/pen/WpQELR

Причина, по которой это работает, заключается в том, что если вы используете инспектор Google Chrome и переходите на вкладку консоли. Введите "окно" и нажмите клавишу ВВОД. После этого вы сможете просмотреть свойства DOM для «объекта окна». Когда вы сворачиваете объект, вы можете просматривать все его свойства, включая свойство chrome.

Вы больше не можете использовать строгое равенство true для проверки в IE на window.chrome. IE раньше возвращал undefined, теперь он возвращает true. Но знаете что, IE11 теперь снова возвращает undefined. IE11 также возвращает пустую строку "" для window.navigator.vendor.

Надеюсь, это поможет!

ОБНОВЛЕНИЕ:

Спасибо Halcyon991 за указание ниже, что новая Opera 18+ также выдает значение true для window.chrome. Похоже, Opera 18 основана на Chromium 31. Поэтому я добавил проверку, чтобы убедиться, что window.navigator.vendor равен: "Google Inc", а не "Opera Software ASA". Также спасибо Ring и Адриен Бе, чтобы предупредить о том, что Chrome 33 больше не возвращает истину ... window.chrome теперь проверяет, не равен ли нулю. Но обратите пристальное внимание на IE11, я добавил проверку для undefined, поскольку IE11 теперь выводит undefined, как это было при первом выпуске ... затем после некоторых сборок обновлений он выводится в true .. теперь последняя сборка обновлений снова выводит undefined. Microsoft не может принять решение!

ОБНОВЛЕНИЕ 24.07.2015 - дополнение для проверки Opera

Opera 30 только что вышла. Он больше не выводит window.opera. А также window.chrome выдает значение true в новой Opera 30. Таким образом, вы должны проверить, находится ли OPR в userAgent. Я обновил свое условие выше, чтобы учесть это новое изменение в Opera 30, поскольку он использует тот же движок рендеринга, что и Google Chrome.

ОБНОВЛЕНИЕ 13.10.2015 - дополнение для проверки IE

Добавлена ​​проверка IE Edge, так как он выводит true для window.chrome .., хотя IE11 выводит undefined для window.chrome. Спасибо artfulhacker за то, что сообщили нам об этом!

ОБНОВЛЕНИЕ 05.02.2016 - дополнение для iOS Chrome check

Добавлена ​​проверка для iOS Chrome check CriOS, так как она выводит true для Chrome на iOS. Спасибо xinthose за то, что сообщили нам об этом!

ОБНОВЛЕНИЕ 18.04.2018 - изменение для проверки Opera

Отредактированная проверка для Opera, проверка window.opr не undefined, так как теперь Chrome 66 имеет OPR в window.navigator.vendor. Благодаря Frosty Z и Daniel Wallman за сообщение об этом!

Если вы хотите обнаружить механизм рендеринга Chrome (а не определенные функции в Google Chrome или Chromium), простой вариант:

var isChrome = !!window.chrome;

ПРИМЕЧАНИЕ: это также возвращает true для многих версий Edge, Opera и т. д., основанных на Chrome (спасибо @Carrm за указание на это). Чтобы избежать этой постоянной битвы (см. window.opr ниже), вы следует спросить себя, пытаетесь ли вы обнаружить механизм рендеринга (используемый почти всеми основными современными браузерами в 2020 году) или какую-либо другую специфичную для Chrome (или Chromium?) функцию.

И вы, вероятно, можете пропустить !!

еще короче: var is_chrome = /chrome/i.test( navigator.userAgent );

Вы можете использовать:

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

Работает на v.71

Если вы чувствуете себя смелым, вы можете поэкспериментировать с обнюхиванием браузера и получить версию:

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

Эта обнаруженная версия может быть версией Chrome, версией Edge или чем-то еще. Плагины браузера могут легко изменить userAgent, платформу и другие вещи, поэтому делать это не рекомендуется.

Приношу свои извинения Большому Лебовски за то, что использовал его ответ в моем.

Начиная с Chrome 89 (март 2021 г.), все предыдущие ответы устарели. Chrome теперь поддерживает подсказки для агента пользователя. Итак, теперь это нужно сделать, используя:

navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

Или, если вы не используете Babel:

navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

Это возвращает true для Chrome 89 и выше, false для последних версий Opera и Edge и undefined для браузеров, которые не поддерживают userAgentData.

Чтобы проверить, является ли браузер Google Chrome:

var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc");

console.log(navigator.vendor);
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 "

console.log(navigator.userAgent); 
// "Google Inc."

Есть несколько дополнительных свойств окна, которые можно использовать при обнаружении браузера. Одно из них - необязательное свойство chrome (Chromium), а другое - необязательное свойство opr (Opera).

Если в браузере есть необязательное свойство chrome для объекта Window, это означает, что браузер является браузером Chromium. Раньше в большинстве случаев это означало Chrome, но в наши дни многие браузеры построены на Chromium (включая Edge и Opera), поэтому только проверка наличия свойства не поможет конкретно обнаружить браузеры Chrome.

Затем часто бывает несколько пользовательских агентов для разных версий браузеров (Edg или Edge) или операционных систем (EdgiOS, ChriOS и FxiOS).

Я использую следующую логику и тестировал множество случаев (обычные пользовательские агенты):

const GOOGLE_VENDOR_NAME = 'Google Inc.';

function isOpera(){
  return Boolean(window.opr);
}

function isChromium() {
  return Boolean(window.chrome);
}

function getBrowserName() {
  const userAgent = window.navigator.userAgent;
  const vendor = window.navigator.vendor;
  switch (true) {
    case /Edge|Edg|EdgiOS/.test(userAgent):
      return 'Edge';
    case /OPR|Opera/.test(userAgent) && isOpera():
      return 'Opera';
    case /CriOS/.test(userAgent):
    case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
      return 'Chrome';
    case /Vivaldi/.test(userAgent):
      return 'Vivaldi';
    case /YaBrowser/.test(userAgent):
      return 'Yandex';
    case /Firefox|FxiOS/.test(userAgent):
      return 'Firefox';
    case /Safari/.test(userAgent):
      return 'Safari';
    case /MSIE|Trident/.test(userAgent):
      return 'Internet Explorer';
    default:
      return 'Unknown';
  }
}

function isChrome() {
  const name = getBrowserName();
  return name === 'Chrome';
}

Вы можете найти этот упрощенный код в этой скрипке:

Хитрость заключается в том, чтобы сначала протестировать другие браузеры, а не Chrome (Edge, Opera). Во всех этих случаях в переключателе различные возможные идентификаторы браузера объединяются в одно регулярное выражение и проверяются на соответствие строке пользовательского агента. Для Chrome и Opera добавлены дополнительные тесты для свойства окна, а для Chrome мы также проверяем, соответствует ли имя поставщика ожидаемому значению.

Примечание. Я тестировал множество различных пользовательских агентов, но не буду здесь утверждать, что это решение безупречно. Мы приветствуем любые предложения по улучшению или обнаружение сбоев в браузере, чтобы я мог улучшить этот код.

ОБНОВИТЬ:

Исправлена ​​ошибка с обнаружением Chrome на iOS (пользовательский агент CriOS). Chrome на iOS не имеет свойства chrome: true в объекте окна, поэтому его следует проверять только на наличие строки пользовательского агента.

По состоянию на июнь 2021 года это обнаруживает Chrome. Но через неделю, месяц, год в какой-то момент перестанет работать, но основной принцип останется. Сначала проверьте браузер userAgent, а затем проверьте функцию, которая уникальна только для этого браузера.

Вот сценарий, который определяет между Chrome и Brave и Opera. Все используют один и тот же движок, но так уж получилось, что объект window.navigator.plugins.length имеет разную длину по умолчанию для каждого браузера.

Я не вижу никакого смысла в обнаружении браузера, если только он не предназначен для цифрового отпечатка пальца (или не знает, как этого избежать), а при разработке для Интернета это должны быть функции, которые мы обнаруживаем, а не дискриминируем пользователя при выборе любой конкретный браузер. Верно?

Чтобы подделать userAgent, вы можете использовать любую надстройку или расширение, но это не убережет вас от обнаружения функций. Например, в этом примере я мог бы определить window.navigator.plugins.length как 4 и предсказать, что вы, вероятно, используете Brave, даже если ваш userAgent говорит мне иное.

Причина для обнаружения userAgent в первую очередь заключается в том, что это означает, что человек НЕ занимается спуфингом, и, следовательно, можно определить, кто на самом деле спуфинг, что также может быть использовано для снятия отпечатков пальцев.

// Check between Brave, Chome and Opera
window.onload = function detectBraveBrowser() {
  try {
    console.log(navigator.userAgent);
    // First match Chrome uerAgent, since Brave userAgent is identical
    if (navigator.userAgent.match(/chrome/i)) {
      // Next check feature, Chrome value is 2, Opera 3, Brave 4
      if (window.navigator.plugins.length === 4) {
        document.getElementById('detection').textContent = 'Brave ';
      }
      else if (window.navigator.plugins.length === 3) {
        document.getElementById('detection').textContent = 'Opera ';
      }
      else if (window.navigator.plugins.length === 2) {
        document.getElementById('detection').textContent = 'Chrome ';
      }
    } else {
      document.getElementById('detection').textContent = 'Unknown';
    }
  } catch (e) {
    // Statement to handle errors
     document.getElementById('detection').textContent = 'Error';
  }
};

<div id="detection"></div>

Пользователь может изменить пользовательский агент. Попробуйте протестировать свойство с префиксом webkit в объекте style элемента body

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

У меня работает в Chrome на Mac. Кажется, это или проще, или более надежно (в случае проверки строки userAgent), чем все вышеперечисленное.

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

Знать названия различных настольных браузеров (Firefox, IE, Opera, Edge, Chrome). Кроме 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;
}

Работает в следующих версиях браузеров:

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)

Просмотрите суть здесь и скрипку здесь

Исходный фрагмент кода больше не работал в Chrome, и я забыл, где его нашел. Раньше у меня было сафари, но у меня больше нет доступа к сафари, поэтому я больше не могу проверить.

Только коды Firefox и IE были частью исходного фрагмента.

Проверка для Opera, Edge и Chrome проста. У них есть отличия в userAgent. OPR существует только в Opera. Edge существует только в Edge. Итак, чтобы проверить Chrome, этой строки там не должно быть.

Что касается Firefox и IE, я не могу объяснить, что они делают.

Я добавлю эту функцию в пакет, который я пишу

Лучшее решение, которое я нашел, и которое дает истинное или ложное значение в большинстве браузеров:

var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)

Использование .indexOf вместо .includes делает его более совместимым с браузером. Даже если (или потому что) все дело в том, чтобы сделать ваш код специфичным для браузера, вам нужно, чтобы условие работало в большинстве (или во всех) браузерах.

Проверьте это: Как определить Safari, Chrome, IE, Firefox и браузер Opera?

В твоем случае:

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;

var is_chrome = browseris.chrome

или проверьте в других браузерах:

browseris.firefox
browseris.ie
browseris.safari

Кроме того, вы можете проверить версию, например browseris.chrome7up и т. д.

проверьте всю существующую информацию в объекте browseris

все ответы неверны. «Опера» и «Хром» во всех случаях одинаковы.

(отредактированная часть)

вот правильный ответ

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