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

投稿日 2018/05/05 更新日 2021/01/21

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) {
  ...
}

参考

html

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

manifest.json

要素ChromeFirefox
developerエラー有効
applicationsエラー必須
browser_action.browser_styleエラー有効
options_ui.browser_styleエラー有効

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

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

コメント