Firefox、Chrome、Internet Explorer(IE)、Opera、Safari 用の 5 つのアドオン/拡張機能があります。
ユーザーのブラウザを正しく認識し、（インストール ボタンがクリックされたら）対応するアドオンをダウンロードするようにリダイレクトするにはどうすればよいでしょうか?
ベストアンサー1
ブラウザの信頼性の高い検出をグーグルで検索すると、多くの場合、ユーザーエージェント文字列をチェックすることになります。この方法は信頼性が高くありません。この値を偽装するのは簡単だからです。
私はブラウザを検出する方法を書いています。ダックタイピング。
拡張機能をインストールするためのブラウザ固有の手順を表示するなど、本当に必要な場合にのみブラウザ検出方法を使用してください。可能な場合は機能検出を使用してください。
デモ：https://jsfiddle.net/6spj1059/
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;信頼性の分析
の以前の方法レンダリングエンジンの特性に依存します（-moz-box-sizingおよび-webkit-transform) を使用してブラウザを検出します。これらのプレフィックスは最終的には削除されるため、検出をさらに堅牢にするために、ブラウザ固有の特性に切り替えました。
- Internet Explorer: JScriptの条件付きコンパイル(IE9まで) および
document.documentMode。 - Edge: Trident および Edge ブラウザでは、Microsoft の実装により
StyleMediaコンストラクターが公開されます。Trident を除外すると、Edge が残ります。 - Edge (Chromium ベース): ユーザー エージェントには、末尾に値「Edg/[バージョン]」が含まれます (例:「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.16 Safari/537.36 Edg/80.0.361.9」)。
- Firefox: アドオンをインストールするための Firefox の API:
InstallTrigger chromeChrome:ドキュメント化されたプロパティを含むいくつかのプロパティを含むグローバルオブジェクトchrome.webstore物体。- アップデート3
chrome.webstoreは非推奨であり、最近のバージョンでは定義されていません - Safari: コンストラクターの命名における独自の命名パターン。これは、リストされているすべてのプロパティの中で最も耐久性の低い方法ですが、どうなったと思いますか? Safari 9.1.3 で修正されました。そのため、
SafariRemoteNotificationバージョン 7.1 以降に導入された をチェックして、3.0 以降のすべての Safari をカバーしています。 - オペラ：
window.opera長年存在してきましたが、落とされるOpera がエンジンを Blink + V8 (Chromium で使用) に置き換えたとき。 - アップデート1:Opera 15がリリースされました、その UA 文字列は Chrome に似ていますが、「OPR」が追加されています。このバージョンでは、
chromeオブジェクトが定義されています (chrome.webstore定義されていません)。Opera は Chrome を複製しようと懸命に努力しているので、この目的でユーザー エージェント スニッフィングを使用します。 - アップデート2:
!!window.opr && opr.addons検出に使用できるオペラ 20+（常緑樹）。 - 瞬き:
CSS.supports()ブリンクで紹介されましたGoogle が Chrome 28 を導入したとき。もちろん、これは Opera で使用されているものと同じ Blink です。
以下の環境でテストに成功しました:
- Firefox 0.8 - 61
- クローム 1.0 - 71
- オペラ 8.0 - 34
- サファリ 3.0 - 10
- IE6 - 11 の場合
- エッジ - 20-42
- エッジ開発 - 80.0.361.9
2016年11月に更新され、Safariブラウザ9.1.3以降の検出が含まれるようになりました。
2018 年 8 月に更新され、Chrome、Firefox、IE、Edge での最新の成功したテストが更新されました。
2019 年 1 月に更新され、Chrome 検出が修正されました (window.chrome.webstore の廃止のため)。また、Chrome での最新の成功したテストも含まれています。
2019 年 12 月に更新され、Chromium 検出に基づく Edge が追加されました (@Nimesh のコメントに基づく)。