CRXJSでChrome拡張をお手軽開発
大井さかな概要
久々にChrome拡張機能を作ろうと思うのでキャッチアップ。Manifest V3とか時代が変わってそう。
大井さかなChrome拡張の一般的な情報
-
公式ドキュメント
-
Extensions 101
- 超入門。まずはこれ見る (101は入門コースって意味の英語のスラングらしい)
-
Development basics
- 3種のチュートリアル。ソースコード付き。
-
Chrome Extension development overview
- リファレンスやガイドの目的別リンク集
- 一般
-
Extensions 101
- サンプル集
大井さかな先にManifest V3について
ざっくりと
- MV3への移行目的は「セキュリティ、パフォーマンス、プライバシーの改善」
- 権限重視
- インストール時の永続許可から、利用時の一時許可へ
- 将来的にアクセス許可をオプションへ。
- 将来的に許可要求を実行時まで遅延へ。
- 広告ブロッカーにはツラいらしい
- 新しい技術から置いてかれないようにアップデート
- Service Worker, Promise, XHR→fetch等
- background pageがService Workerに置き換え
- 常駐系の動作のさせ方が変わってるので、MV2の文献はあまり参考にならなそう
- MV2終了時期は延期&未定
権限周りの制約がきついのと古いAPIの置き換えっぽい
参考
大井さかな環境構築
Vite
CRXJSのチュートリアルに沿って進める。
今回はVite+React+TypeScript+SWRを選択
手順はVite 2とVite 3(beta)の2通りが用意されている。
執筆時点で既にvite@latestは4.2.0だから後者でどうなるか試してみよう
$ npm init vite@latest
✔ Project name: … twitter01
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
(略)
$ cd twitter01
$ npm i @crxjs/vite-plugin@beta -D
$ git init
manifest.jsonとvite.config.tsもチュートリアル通りに作成すると、manifest.jsonのインポートエラーが出る。
manifest.jsonの対応
JSONのまま扱ってもいいが、CRXJSならTypeScript化して型定義を利用できる
manifest.jsonのまま進む場合
チュートリアルからmanifest.jsonをコピペ
ここで import './manifest.json'にエラー表示
モジュール './manifest.json' が見つかりません。'--resolveJsonModule' を使用して '.json' 拡張子を持つモジュールをインポートすることをご検討ください。ts(2732)
tsconfig.node.json を次のように編集することで解決 (tsconfig.json ではない)
-
compilerOptionsに、"resolveJsonModule": trueを追加 -
"include"に"manifest.json"を追加
JSONのバリデーションまでするなら、JSON Schemaが用意されている(たぶん非公式)
"https://json.schemastore.org/chrome-manifest"
VSCodeで適用する場合は.vscode/setting.jsonを下記のようにすればok
{
"json.schemas": [
{
"fileMatch": ["manifest.json"],
"url": "https://json.schemastore.org/chrome-manifest"
}
]
}
@crxjs/vite-pluginからdefineManifestをインポートするだけ。
import { crx, defineManifest } from '@crxjs/vite-plugin';
const manifest = defineManifest({ ... })
$ npm i @types/chrome -D
を忘れると補完が不十分に。
ドキュメントの方にはバージョンをpackage.jsonと共通化させるコードがあった。
で、出来上がり
参考
大井さかなbeta版の方で、vite@latestを使うとHMRに失敗することがある様子。
この問題が解決されるまではviteのバージョンを下げた方が良いかもしれない。