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

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

JavaScript

ブラウザ判定// ブラウザ判定
function isFirefox() {
  return 'browser' in window;
};
function isChrome() {
  return !isFirefox();
};

css

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

Firefoxのみ/* 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
developer	エラー	有効
applications	エラー	必須
browser_action.browser_style	エラー	有効
options_ui.browser_style	エラー	有効

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

• manifest.json - Mozilla | MDN

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