【Mac】ReactでChrome拡張機能を作ってみた話

成果物

• https://github.com/nanami69/chrome-extension-by-react

主な機能

• chrome 上で選択した単語/文章について翻訳する
• 翻訳する言語は以下の４カ国から選択できる
  • 日本語
  • 英語
  • 韓国語
  • 中国語

基本的な手順

• ReactではじめるChrome拡張開発入門

手順以外でやったこと＆詰まったところ

• Homebrewのインストール
  • 仕事ではwindowsを使っているのでHomebrewを使うのは初めてだった
• nodejsのインストール
  • Homebrewを使ってインストール
• npx creat-react-app
  • reactで開発するといえばこのコマンドと思って勝手に実行してたけど…
  • 既に公開されている拡張機能のテンプレートをクローンして使うからいらなかった
• yarnのインストール
• 起動してchrome://extensions -> 「パッケージ化されていない拡張機能を読み込む」
  • デベロッパーモードのトグルをオンにしないと「パッケージ化されていない拡張機能を読み込む」が表示されないので注意
• GAS Translation APIを利用
  • 参考サイトにて「DeepL API」を使うか「GAS Translation API」を使うかで手順が分かれるが、前者はクレカの登録が必要なので後者を選んだ
• Mantine UI の適用
• Storage API
  • Storage API はストレージから取得した値をコールバックを利用して処理しなければならない
• useEffectのおさらい
  • 関数の実行タイミングをReactのレンダリング後まで遅らせるhook
• API キーをコードに直接埋め込んでいますが、API キーが書かれたファイルを GitHub に間違ってアップロードしないように注意
  • 「GAS Translation API」を選択している場合、気にしなくてOK
• 翻訳結果を出力するポップアップにて、color: 'black'を指定しないと翻訳結果が白文字で見えなかった

<div
　　　　style={{
  　　　　position: 'absolute',
  　　　　left: '10px', // 自由に変えて良い
  　　　　top: '10px', // 自由に変えて良い
  　　　　zIndex: 2147483550,
  　　　　color: 'black',
　　　　}}
>