HTMLのソースコードの中に直接書かれた<script></script>のJavaScript（インラインスクリプト）を、外部の.jsファイルに書き出して呼び出す形式に変更するためのPerlスクリプトRefactorForCSPを書きました。GitHubで公開しています。
以下のように実行すると、引数で与えられたディレクトリ（以下の例ではdir/）内部のすべてのHTMLファイルに対して、前述の置換作業が行われます。
perl refactor_csp.pl dir/
たとえば、「index.html」というHTMLファイルのソースコードが次のようになっており、<script>タグが２箇所あるとき、
<html>
<head>
<title>Sample</title>
<script>
...
</script>
</head>
<body>
Hello!
<script> ... </script>
</body>
</html>
refactor_csp.plを実行すると、同ディレクトリ内に変更前のコピーファイル「index.html.pre_csp」とJavaScriptファイル「index.html.0.js」、「index.html.1.js」が生成されます。そして、「Index.html」が以下のように更新されます。
<html>
<head>
<title>Sample</title>
<script src="index.html.0.js"></script>
</head>
<body>
Hello!
<script src="index.html.1.js"></script>
</body>
</html>
いつ使うか
ウェブアプリを安全に保つための「Content Security Policy (CSP)」というルールのなかに「インラインスクリプトの禁止」というものがあり、Chromeアプリなどの厳格な実行環境では、HTMLファイル中にJavaScriptをベタ書きすると実行できません。
自分でJavaScriptを書く際にはこれに気をつけて、予め外部ファイルに記述するように心がけることはできますが、それでもやはり多少は面倒に感じていました。さらに大変なのが、他の方が作られたサンプルやWeb ComponentをChromeアプリとして実行しようと思ったときです。
ソースコードの中から一つ一つ手作業でインラインスクリプトを探して編集するのは時間がかかってしまいます。こんなときに、このプログラムを使えば、たくさんあるHTMLファイルに対して一発で処理をしてくれます！
ちなみに（その１）
実はこの機能、Chrome Dev Editorには実装されています。以前以下の記事でも書いていますが、フォルダを選択・右クリックしてRefactor for CSPメニューをクリックするだけで実行できます。
この機能に感動して、「これと同じことがターミナルでできればいいな」ということで作ってみた次第です。なので、出力されるファイルの名前はChrome Dev Editorの出力結果に合わせてみました。
ちなみに（その２）
実は今回これを作るためだけにperl言語に挑戦*1してみました。今後はもう少し勉強してモジュールとかを積極的に使っていきたいです。
