ブラウザー拡張機能（アドオン）開発メモ

最近、（主にFireFox対象だったが）ブラウザ拡張機能（アドオン）を開発する機会があった。その際に参考にしたとっかかりのURLなどを、未来の自分のためのメモとして残しておく。

とっかかり

ドキュメントの入り口(FireFox)
https://developer.mozilla.org/ja/Add-ons/WebExtensions
ドキュメントの入り口(Chrome)
https://developer.chrome.com/extensions

※以下は主にFireFoxベースで確認した。互換性注意して実装すれば、対応ブラウザは広がる

最初に試してみるべきチュートリアル

初めての拡張機能
https://developer.mozilla.org/ja/Add-ons/WebExtensions/Your_first_WebExtension
2つめの拡張機能
https://developer.mozilla.org/ja/Add-ons/WebExtensions/Walkthrough

ちょっと試してみたら全体の理解の為に見るべきページ

拡張機能の中身
https://developer.mozilla.org/ja/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

　デバッグ

FireFoxでのデバッグ
https://developer.mozilla.org/ja/Add-ons/WebExtensions/%E3%83%87%E3%83%90%E3%83%83%E3%82%B0

API等利用出来ないと思ったら見るべき権限周り

Permissons
https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions

互換性

各ブラウザでのAPI提供
https://developer.mozilla.org/ja/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json

多分良く使うストレージAPI

storage API
https://developer.mozilla.org/ja/Add-ons/WebExtensions/API/storage
ストレージ、オプションページ、ボタンがまとめて学べるサンプル
https://github.com/mdn/webextensions-examples/tree/master/forget-it

サンプル中でよく使われるPromise関連を理解する

Promise
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
Using Promise
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

これぐらいとサンプルコードを見て試せば、徐々に色々と作れるようになるはず。