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をちょこっとやってみた