#daiizメモ

Scrapboxに夢中

Chrome Dev Editor の 'Refactor for CSP' で何が行われているのかを調べた

昨日の記事:

の続きです。

Polymerのエレメント(Web Components)を用いたプロジェクトをChromeアプリとして実行するためには、Chrome Dev EditorにてRefactor for CSPというワンステップが必要です。ここでは何が行われているのかを調べてみました。

f:id:daiiz:20140907231719j:plain

CSP logo (Mozilla)

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>を埋め込むことが出来るのです。

参考文献

追記(2015-03-14)

Chrome Dev Editor の 'Refactor for CSP'機能をターミナル上で使うためのスクリプトを書きました!!