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はデフォルトでスクリプト自体の圧縮はしない)してもらえると嬉しいですね。