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