Chrome、Firefox、Edgeの拡張機能を判定する

 投稿日 2018/05/05

Chrome、Firefox、Edgeの拡張機能は、WebExtensionsで共通化しました。ですが、細かい部分が異なるため、コードを共通化する必要があります。拡張機能でブラウザを判定する方法のまとめです。

JavaScript

// ブラウザ判定
function isEdge() {
  return isEdge.edge;
}
isEdge.edge = typeof chrome === 'object'
           && Object.keys(chrome).length == 1
           && typeof chrome.app === 'object'
           && Object.keys(chrome.app).length == 1
           && Object.keys(chrome.app)[0] == 'getDetails';
function isFirefox() {
  try {
    browser;
    return !isEdge();
  } catch (e) {}
  return false;
}
function isChrome() { // Chrome or Opera
  return !(isEdge() || isFirefox());
}
try {
  // Edge対策(chromeを使用しない前提)
  chrome = browser;
} catch (e) {}

// ブラウザ判定
function isFirefox() {
  try {
    browser;
    return true;
  } catch (e) {}
  return false;
}
function isChrome() { // Chrome or Opera
  return !isFirefox();
}

補足（動作説明）

以下の３点を利用してブラウザ判定しています。

  • Chromeは、browser(存在しないGlobal変数)へのアクセスでエラーする
  • Firefoxは、browserとchromeがともに存在する
  • Edgeは、chromeが{app:{getDetails:function(){[native]}}}である

また、Edgeのchrome変数をbrowser変数で置き換えるとこで、chrome変数のみで共通処理を行えるようにしています。（Edgeでchrome変数を使用しない前提）

css

cssは、以下のようなコードを使用する。CSSは、謎コードが探せばいろいろでてくるのでおこのみでどうぞ。

/* Firefoxのみ */
@-moz-document url-prefix() {
  ...
}
/* Chromeのみ（Edge、Operaでも動作してる気がする…） */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ...
}

Chromeのみ、Firefoxのみに適用させるCSSハック【CSS】 - E-riverstyle Vanguard

html

諦めて、JavaScriptで共通化する。基本的に分岐する必要はないはず。

manifest.json

要素 Chrome Firefox Edge
author - - 必須
developer エラー 有効 -
applications エラー 有効(一部必須) -
background.persistent - - 必須
browser_action.browser_style エラー 有効 エラー
options_ui 有効 有効 -
options_ui.browser_style エラー 有効 エラー
options_page 有効 - 有効

※差異のある設定を記載（ひっかかったもののみ、他にもあるかも）
※-: 影響なし
※必須: ないとエラーとなる
※エラー: あるとエラーとなる
※有効: 設定が有効になる

マニフェストだけは、諦めて別々に作成するしかないのかな？

LINE
 コメントを書く