React + TypeScript + CSS ModulesでChrome拡張機能の開発環境を構築する

前回、webpack + TypeScriptの構成でChrome拡張の開発環境を構築しました。

ただ、DOMを拡張機能側で動的生成したりするよう場合、TSXで書きたいなァ…🤤という思いから構築してみました。

動作環境

OS: Windows 11 Home 21H2

$ docker --version
Docker version 20.10.14, build a224086

$ docker-compose --version
docker-compose version 1.29.2, build 5becea4c

GitHub

https://github.com/TansanMilMil/chrome-extention-react-template

最終的に構築できたソースコードです。テンプレート的に使いまわせる形にしていますのでご自由にお使いください。

React + TypeScriptの環境を構築する

React + TypeScriptの環境構築の手順は以下のサイトの内容に沿って構築するのが良いと思います。 https://code-log.hatenablog.com/entry/2019/12/10/184817

かなり分かりやすくまとめてくださっているので、ここでは省略します。

CSS Modulesを追加する

CSSのコンポーネント単位でのカプセル化もしておきたいというモチベーションがあったので、追加してみます。

webpack.config.js

rulesにCSS Modules用の記述を追記してあげます。 style-loader, css-loaderが未インストールならnpm install --save-dev style-loader css-loaderしておきます。

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader?modules']
      },
    ],
  },

declaration.d.ts

新規にdeclaration.d.tsをルートパスに作成し、下記の内容を記述します。

declare module '*.css';

tsconfig.json

先ほど作成したdeclaration.d.tsをincludeに加え、コンパイル対象にします。

{
    ...
    "include": [
      ...
      "./declaration.d.ts",
    ]
  }

これでコンポーネント側からcssファイルをimportできるようになりました。ちなみにdeclaration.d.tsを加えてあげなかった場合、コンポーネントでcssファイルをimportしようとしても、構文エラーになってしまい、ビルドできなくなってしまいます。

コンポーネントからcssファイルを読み込む

あとは通常のCSS Modulesの使い方通りにimportし、classNameの指定時などに参照できます。

Content.css

.foo {
  background-color: yellow;
  width: 200px;
  height: 200px;
}

Content.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './Content.css';

const Content = () => {
  return (
    <div>
      <div className={styles.foo}>foo</div>
    </div>
  );
};
...

あとがき

快適な開発環境を得られたのはいいものの、まだ具体的な拡張機能案がまとまっていません🤤 そのうち思いついたらやっていこうと思います。