Edited at

Chrome ExtensionでReact.jsを使ってみた

More than 3 years have passed since last update.

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が使える


参考

【個人メモ】React Tutorialをちょこっとやってみた