LoginSignup
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-06-15

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6