React/TypeScriptでEdge拡張を作ってみる(Create React App)

ChromiumベースのMicrosoft EdgeでChrome拡張が使えるとか聞いた気がするので
Create React Appで作ったものを拡張機能にできるのか試してみました。

ひな型作成

まずはCreate React Appでひな型を作成します。
Create React Appの詳細な説明は省略しますがFacebook公式のReactのboilerplateです。

npx create-react-app sample --typescript

これでsampleというディレクトリにReactのひな型が作成されました。

sampleディレクトリに移動して以下のコマンドを実行します

yarn start

ブラウザが起動しreactのひな型が起動します。

作成したひな型をEdge拡張に

ではこれをEdge拡張にしてみましょう。
publicディレクトリ内のmanifest.jsonを以下のように書き換えます。

public/manifest.json

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "CRA Sample",
  "description": "CRAで作ってみた",
  "browser_action": {
    "default_icon": "logo512.png",
    "default_popup": "index.html"
  }
}

書き換えたらビルドします。

yarn build

buildディレクトリが作成され、中にビルド結果が出力されます。

ビルド結果をEdgeの拡張機能として追加

Edgeの右上のアイコンをクリックして「拡張機能」を選択し 左上のハンバーガーアイコンをクリックし 「開発者モード」をONにします。

「展開して読み込み」を選択し

先ほど作成されたbuildディレクトリを指定します

拡張機能が追加され、アドレスバーの横にアイコンが表示されました。 アイコンを押してみると

エラーになりました。 inline scriptはダメと怒られているようです。
ひとまず「すべてクリア」でエラーを消しておきましょう。

エラー修正

buildディレクトリ内のindex.htmlを見てみましょう。
この部分がダメっぽいです。

sampleディレクトリ直下に.envファイルを以下の内容で追加します。

INLINE_RUNTIME_CHUNK=false

これはインラインスクリプト部分をいい感じに外出しにしてねというやつです。
でビルド

yarn build

インラインスクリプト部分がいい感じに外出しされました。

再びEdgeを開きアドレスバー横の拡張機能アイコンを押すと

動きました。ちっちゃ！

さすがにアレなのでサイズを指定しましょう。
あまりお行儀良くないですがスタイルに直に幅と高さを記述します。
src/App.tsx

import React from "react";
import logo from "./logo.svg";
import "./App.css";

const App: React.FC = () => {
  return (
    <div className="App" style={{ width: "500px", height: "500px" }}>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

で、またビルド

yarn build

動きました。

簡単でしたね。

作成した拡張機能を試しにChromeで動かしてみるとそのまま問題なく動くことが確認できます。