Firefox 48 と Edge(Windows 10 Anniversary Update) が、Chrome拡張機能(extension API)互換のWebExtensionsに正式対応しました

基本は以下のページを参考にしています
ゼロからはじめる Microsoft Edge 用の拡張の作り方 – monoe's blog
WebExtensions - Mozilla | MDN
manifest.json - Mozilla | MDN
Extensions: Supported APIs - Microsoft Edge Development

Edgeとmanifest.json

Edgeではmanifest.jsonの"background"に"persistent"が必要

この書式はChromeでもFifefoxでもエラーは起きない

  "background": {
    "scripts": ["background.js"]
  },

↓

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
},

Edgeではmanifest.jsonの"browser_action"に19・38の大きさのアイコンが必要

この書式はChromeでもFifefoxでもエラーは起きない

  "browser_action": {
    "default_icon": "images/icon32.png"
  },

↓

  "browser_action": {
    "default_icon": {
      "19": "images/icon19.png",
      "38": "images/icon38.png"
    }
  },

Firefoxとmanifest.json

Firefoxでは「"options_page"」は使えず「"options_ui"」を使う

"options_ui"を使う時にはさらに"applications"の指定が必要→アドオンのデバッグの時だけかもしれない
idには「(拡張機能名)@(自分が持ってるオリジナルなドメイン名)」あたり？idの値について詳しくは以下のURL参照
Install Manifests - Mozilla | MDN
この書式はFirefoxの時のみ使う

  "options_page" : "options.html",

↓

  "applications": {
    "gecko": {
      "id": "extensionname@example.org"
    }
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },

Edgeと*.js

Edgeでは名前空間の「chrome」を「browser」に置換する

Edgeではbrowserのみ使える
Fifefoxではchromeとbrowser両方使える
Chromeではchromeのみ使える

  url = chrome.extension.getURL(url);

  url = browser.extension.getURL(url);

jsファイルの一番上に以下の書式を書く事で、Chrome・Edge・Firefox一律で名前空間「browser」で使えるようになる(今後もこの方法が使えるかどうかの保障はしません)

//chromeとbrowserの名前空間対策
if (!("browser" in window)) {
  window.browser = chrome;
}

Edgeでは日本語環境のnavigator.languageの戻り値が"ja-JP"で帰って来る

Chromeだと"ja"が帰って来る
この書式はChromeでもFifefoxでもエラーは起きない

    var lang = navigator.language;
    if(lang == "ja"){
    }

↓

    var lang = navigator.language;
    if(lang == "ja" || lang == "ja-JP"){
    }

Firefoxと*.js

Firefoxではtabs.createのパラメータに"selected"は使えず"active"を使う

この書式はChromeでもFifefoxでもエラーは起きない

  chrome.tabs.create({
    "url": url,  //URL
    "selected": true  //タブをアクティブにする
  });

↓

  browser.tabs.create({
    "url": url,  //URL
    "active": true  //タブをアクティブにする
  });