ChromeExtensionの中のpopup.htmlで動的なViewを作成するために流行りのReactを使用しました。その時に少しつまづいたので書いておきます
Chrome Extensionの中では外部スクリプトは読み込めない
最初チュートリアルにあるように
index.html
<!-- index.html -->
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
// Your code here
</script>
</body>
</html>
のようにして外部スクリプトとしてreactを読み込もうとしました。
しかし、 **chrome extensionの中では外部スクリプトは読み込めなかった。**よってFB公式ページよりreactをDLしてjs/libの中に配置した。
しかし、jsxtransformerの中で外部スクリプトが呼ばれているらしく、再びsecurity errorが出た。
jsxのコンパイル
上記の理由よりjsxをweb上でコンパイルするのは厳しいということが分かったので、jsxファイルを事前にコンパイルする。
今回はreact-toolsを使用する
install方法は
ターミナル
$ npm install -g react-tools
react-tookを手に入れたらjsx -watchを利用することによって自動的にjs形式にコンパイルするようにする。
ターミナル
$ jsx --watch jsxの入ってるディレクトリ jsの入るディレクトリ
あとはjsの中に入ってるコンパイルしたやつを読み込めば普通にreactが使える