2017年12月にWebExtensionsの作り方を勉強したときのサンプルコードや調査メモです。
本READMEではローカルのWebExtensionsのインストールやデバッグ方法、動作検証環境についてまとめています。 サンプルコード個別のビルド方法や説明については、それぞれのREADMEを参照してください。
サンプルコードの構成:
we-exercise1- browser actionでpopupを表示させるだけの動作確認用です。
we-exercise2- browser action, background page, option page などを連携させるサンプルです。
screenshot-demo-extension- browser actionで現在アクティブなタブの画面スクリーンショットを取得し、screenshot-demo-serverに送信するサンプルです。
screenshot-demo-server- Nettyで作ったローカルHTTPプロキシで、SpringによるWebUIを組み込んでいます。
- screenshot-demo-extension から送信されたスクリーンショットを、HTTP通信ログに紐付け、WebUI上に表示します。
child_process_args_problem- Windows環境でNode.jsから子プロセスを起動する場合に、引数がどのように渡るか検証したサンプルです。
require_json_problem- Windows環境でNode.jsからjsonをrequire()した時に、エラーが発生したパターンがあったので検証に用いたサンプルです。
TIPS_TROUBLES_MEMO.md- 今回の調査・検証で困ったところ・嵌ったところのメモなど。
DISTRIBUTE_MEMO.md- イントラ向けのWebExtensionsの配布方法の調査・検証メモ。
基本的に以下の環境でサンプルコードの動作検証を行いました。
- Win10 Pro (1709) 64bit 日本語版
- Chrome 63 (64bit)
- Firefox 57 (64bit)
- Microsoft Edge 41
- node v8.9.1 (2017-12時点でのLTSを採用)
- npm 5.5.1
- nodist v0.8.8 (nodeのインストールに使用)
- Cygwin (64bit) (コマンドライン操作に使用)
- Git for Windows 2.14.2.2 (Git Bashをコマンドライン操作に使用)
nodistをインストールして再起動すると、マシンの環境変数に以下が追加され、CygwinやGit Bashのmintty環境からもシームレスに使える状態になりました。
NODIST_PREFIX=C:\Program Files (x86)\Nodist
NODIST_X64=1
PATH=...;C:\Program Files (x86)\Nodist\bin;...
組み合わせによっては .bashrc / .bash_profile などの調整が必要になるかもしれません。(今回は調整無しで行けたのでラッキーだった)
Cygwin上から問題なく node と npm をインストールできました。
$ nodist + 8
$ nodist npm match
$ nodist global 8
$ node -v
v8.9.1
$ npm -v
5.5.1
Firefox:
- MDNからのWebExtensionsトップページ
- MDNからのWebExtensionsサンプル集
Chrome:
- What are extensions? - Google Chrome
- Sample Extensions - Google Chrome
Edge: (Windows 10 Anniversary Update 以降)
- Extensions - Microsoft Edge Development | Microsoft Docs
- Extensions for Microsoft Edge - Microsoft Store
- Extensions - Porting Chrome extensions - Microsoft Edge Development | Microsoft Docs
- https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/porting-chrome-extensions
- Chrome拡張の既存ソースを、Edge拡張用に変換するツールも出てる。
Firefox57以降:
about:debuggingを開く。- "Load Temporary Add-on" (「一時的なアドオンを読み込む」)ボタンをクリック
- ローカルのWebExtensionsの
manifest.jsonを選択 - -> Firefoxを再起動すれば、ロードしたWebExtensionsはクリアされる。
Chrome:
chrome://extensionsを開く。- "Developer mode"(「デベロッパーモード」) にチェックを入れる。
- "Load unpacked extension..."(「パッケージ化されていない拡張機能を読み込む...」) をクリックし、
manifest.jsonが置かれているフォルダを選択 - -> Chromeの場合は、再起動しても残ってる。
Edge:
about:flagsを開く。- "Enable extension developer features"(「拡張機能の開発者向け機能を有効にする」) にチェックを入れる。(ブラウザ再起動が必要)
- ブラウザ再起動後、"More (...)" メニュー -> "Extensions"(「拡張機能」) を開く
- "Load extension"(「拡張機能の読み込み」)をクリックし、
manifest.jsonが置かれているフォルダを選択 - -> Edgeの場合、再起動すると「不明な発行元からの拡張機能を無効にしました。～」通知が表示されることがある。デフォルトは無効になってるので、「有効にする」をクリックする必要がある。
- 後で、拡張機能メニューから個別に拡張を有効/無効切り替えられる。
Firefox: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging
about:debuggingを開き、"Enable add-on debugging"(「アドオンのデバッグを有効化」)にチェックを入れる。- 一時的に拡張をロードして、「デバッグ」をクリック -> 接続確認のダイアログが表示されたら"OK"をクリック。
- background page / content script / option page / popup などのデバッグが可能。(詳細はMDN参照)
- poup については、Developer Tool の「ポップアップが自動的に隠れないようにします」を有効化しないとうまくデバッグできない。
Chrome: https://developer.chrome.com/extensions/tut_debugging
chrome://extensions/を開き、デベロッパーモードにチェックを入れる。- browserActionに対応してる = アドレスバーの右にアイコンが表示されるタイプの拡張なら、アイコンを右クリックして「ポップアップを検証」をクリックするとその拡張用のDeveloper Toolsが表示される。
- バックグラウンドページを利用している拡張なら、
chrome://extensions/の拡張一覧で「ビューを検証：バックグラウンドページ」リンクが表示されるので、リンクをクリックするとその拡張用のDeveloper Toolsが表示される。
※Chromeの場合、--user-data-dir オプションでユーザデータのディレクトリを任意の場所に指定できる。これを使って、Storeからインストールした拡張パッケージがどう展開されたか、普段使いのユーザデータとは分離して確認することができる。(未検証)
cd C:\Program Files (x86)\Google\Chrome\Application
C:\Program Files (x86)\Google\Chrome\Application>chrome --user-data-dir=C:\work\chrome-extension\test-user-data-dir
Edge: https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/debugging-extensions
- background page / content script / popup page それぞれでDeveloper Toolsを開いてデバッグできる。
調査・サンプルコード作成・検証した人 : 坂本 昌彦 (研究開発部所属, 社内で使用するWebアプリケーション診断ツールの開発などに従事)
- Mail : sakamoto@securesky-tech.com
- Twitter : https://twitter.com/msakamoto_sf
- Facebook: https://www.facebook.com/masahiko.sakamoto.75
- GitHub : https://github.com/msakamoto-sf
本資料・サンプルコードに関するご意見・お問い合わせは坂本までお願いします。