Plasmo に Chakra UI を導入する

Plasmo に Chakra UI を導入してみました。この記事では、その導入方法について記します。

Plasmo はブラウザ拡張機能を開発するためのフレームワークです。詳細は次の記事が分かりやすく解説していたのでそちらをご覧ください:

今回使用したコードはこちらのリポジトリにあります:

動作環境

今回使用した動作環境は次の通りです:

• Node.js (v18.16.0)
• Plasmo (v0.82.0)
• Docker (v24.0.2)
• Docker Compose (v2.19.1)

docker-compose.yml は次のように記述しました:

docker-compose.yml

version: '3'

services:
  app:
    image: node:18.16.0
    volumes:
      - .:/usr/src/app
    working_dir: /usr/src/app
    tty: true

Plasmo プロジェクトの作成は次のコマンドで行いました:

$ docker compose run --rm app npm create plasmo

作成完了後、プロジェクトディレクトリ内へ docker-compose.yml を移動しました（これをしておかないと、 docker compose run のとき毎回 cd <PROJECT_DIR>/ しないといけなくて面倒なので…）。

Chakra UI のインストール

公式ドキュメント¹にあるインストールコマンドを Docker コンテナ内で実行すれば OK です。

$ docker compose run --rm app npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Popup に Chakra UI を使う

Popup に Chakra UI を使う場合、 <ChakraProvider> 内でコンポーネントを記述していけば OK です。

サンプルコード:

popup.tsx

import { ChakraProvider } from "@chakra-ui/react"
import { Button } from "@chakra-ui/react"

const IndexPopup = () => {
  return (
    <ChakraProvider>
      <Button colorScheme="teal">Button</Button>
    </ChakraProvider>
  )
};

export default IndexPopup;

動作結果:

ボタンのデザインから、ちゃんと Chakra UI の Button になっていることが確認できます。

Content Scripts UI (CSUI) に Chakra UI を使う

CSUI にカスタムスタイル（今回の場合 Chakra UI ）を適用したい場合、 <style> を 返す getStyle() 関数を export します。

Chakra UI は内部で Emotion を利用している ² ので、公式ドキュメントのサンプルコードがそのまま参考になります。

今回、公式ドキュメントをもとに作成したサンプルコード:

content.tsx

import createCache from "@emotion/cache"
import { CacheProvider } from "@emotion/react"
import { ChakraProvider } from "@chakra-ui/react"
import { Button } from "@chakra-ui/react"

const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "plasmo-mui-cache",
  prepend: true,
  container: styleElement
})

export const getStyle = () => styleElement;

const CustomButton = () => {
  return (
    <CacheProvider value={styleCache}>
      <ChakraProvider>
        <Button colorScheme="teal">Button</Button>
      </ChakraProvider>
    </CacheProvider>
  )
}

export default CustomButton

動作結果:

ボタンのデザインから、ちゃんと Chakra UI の Button になっていることが確認できます。

結び

この記事では、 Plasmo に Chakra UI を導入する手順について記しました。

Plasmo は公式ドキュメントが充実している上にサンプル実装が豊富なので、つまづいたら色々調べる前にまずこの2つを確認しに行くのが解決への近道だなと思いました（自戒）。

1. Installation - Chakra UI ↩

2. Comparison - Chakra UI ↩