polymerをChrome Extensionで使う際のTipです。
対象者は以下です。
- Chrome Extensionを作ったことがある、または作ろうとしている
- polymerでCustom Elementを作ることができる
Content Security Policy(CSP)による制約
以下のようにChrome ExtensionではCSP制約が通常のwebページよりも厳しくなっています。
-
evalやnew Function()は禁止 -
<script>タグ内のjavascript、<button onclick="...">などのinline scriptは禁止 - Extension外部のスクリプトの読み込み禁止
manifest.jsonで"content_security_policy"を定義することにより制約を部分的に緩和することができますが、inline scriptを許可させることはできません。
polymerを素でコーディングするときは<polymer-element>内に<script>を設置してロジックやViewの振る舞いを記述しますが、これがこの制約に引っかかりうまく行きません。
vulcanizeによるscriptとhtmlの分離
polymerにはvulcanizeというコンパイラがあり、これによりinline script侵害を回避できます。
> vulcanize --csp target.html
必要に応じて-pでRootPathを指定してやれば、html、css、jsは依存ファイルも含めて全てvulcanize.htmlとvulcanize.jsに出力されるので、CSPセーフにロードすることが可能です。
所感
polymerもChromeもどちらもGoogle製なのに、vulcanizeで圧縮されたjavascriptでしかデバッグできないのは辛いです。
Extensionのdevelopモードでは'unsafe-inline'を許可するか、またはClosure Compilerにようにvulcanizeにpretty printオプション機能を追加するか(追記：vulcanizeはデフォルトでスクリプト自体の圧縮はしない)してもらえると嬉しいですね。