昨日の記事:
の続きです。
Polymerのエレメント(Web Components)を用いたプロジェクトをChromeアプリとして実行するためには、Chrome Dev EditorにてRefactor for CSP
というワンステップが必要です。ここでは何が行われているのかを調べてみました。
Refactor for CSP では「'unsafe-inline'回避」が行われていた
実際にこの作業の前後のbower_components
フォルダ内のファイルのソースコードの違いを比べてみたところ、非常にシンプルな結果が得られました。なんと、
インラインスクリプトを外部JavaScriptの呼び出しに変更している
だけのことでした!
つまり、link rel="import"
する<my-component>のHTMLファイルに
... <polymer-element name="my-component"> <template> ... </template> </polymer-element> <script> (function() { function hoge(){}; Polymer('my-component', {}); })(); </script>
のように直接scriptを書いていたところを、
<polymer-element name="my-component"> <template> ... </template> </polymer-element> <script src="my-component.html.js"></script>
と変更して、scriptを外部ファイルとして呼び出すようにすれば、Chromeアプリでも問題なく<my-component>を埋め込むことが出来るのです。
参考文献
- ChromeのContent Security Policyについて
追記(2015-03-14)
Chrome Dev Editor の 'Refactor for CSP'機能をターミナル上で使うためのスクリプトを書きました!!