chrome-extensionをReactでさくっとつくる

Reactの公式ドキュメントが日本語化されて改めて読み直してる。
英語で読んだ時によくわからなかったりしていた部分もちゃんとわかるようになって、翻訳をしてくださった方には感謝でいっぱい。

とはいえ、英語でドキュメントを読めた方がなにかと便利なのは間違いない。
読む際に、わからない単語とかは検索してたりしてたんだけど、同じ単語を検索してたりして、あんま覚えられないなと。

紙に書いたり、なんかのアプリをつかってももちろんいいんだけど、chorme-extensionが若干気になっていたので、chrome-extensionでつくってみることにした。

ものすごく味気ない英単語ノート

拡張機能のpopup

書いた内容をFirebaseに送るだけ。
肝心の書いた内容をTodoListっぽく参照するアプリはつくってない。
ReactNativeに入門したらつくるんだ！

実装

Reactのプロジェクトを作る

$ create-react-app

public配下に、chorme-extensionだとchromeに認識させるためのmanifest.jsonを作る。

manifest.json

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "Note",
  "description": "simple note",
  "browser_action": {
    "default_title": "Note",
    "default_popup": "index.html"
  }
}

記載内容はchrome-extensionのチュートリアルを見るべし。 今回は、Chromeの右上のアイコンをクリックすると、popupで表示されるやつの設定。 popupにReactで書かれたjsを読み込むindex.htmlを指定している。

最後に.envに以下を追加するだけ。

.env

INLINE_RUNTIME_CHUNK=false

これは、chrome-extensionが、HTMLにjsを直接書くinline scriptを許容していないので、こちらを出力しないように設定するcreate-react-appのオプション。

あとは好きなように、開発して、buildしてできたdistフォルダをchrome-extensionとして読み込ませるだけ。