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(); }
補足(動作説明)
以下の3点を利用してブラウザ判定しています。
- 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) { ... }
html
諦めて、JavaScriptで共通化する。基本的に分岐する必要はないはず。
manifest.json
要素 | Chrome | Firefox | Edge |
---|---|---|---|
author | - | - | 必須 |
developer | エラー | 有効 | - |
applications | エラー | 有効(一部必須) | - |
background.persistent | - | - | 必須 |
browser_action.browser_style | エラー | 有効 | エラー |
options_ui | 有効 | 有効 | - |
options_ui.browser_style | エラー | 有効 | エラー |
options_page | 有効 | - | 有効 |
※差異のある設定を記載(ひっかかったもののみ、他にもあるかも)
※-: 影響なし
※必須: ないとエラーとなる
※エラー: あるとエラーとなる
※有効: 設定が有効になる
マニフェストだけは、諦めて別々に作成するしかないのかな?