WXT 初期設定
ひげWXTをインストール
この例ではpnpmを使う
pnpm dlx wxt@latest init
chrome 拡張機能開発に使う型情報をインストール
公式から出ている。一時期は開発が止まっていたので使い物にならなかったので別の人のが作ったのを使っていたが今は公式で十分。
pnpm install chrome-types
ブラウザの起動設定
ブラウザ起動時に開くサイトを指定する。
export default defineConfig({
extensionApi: 'chrome',
modules: ['@wxt-dev/module-react'],
+ webExt: {
+ startUrls: ["https://chatgpt.com"],
+ },
(option) ログイン情報を保存する
WXTは起動するたびにログイン状態は削除される。ログイン状態を保っておきたい場合は、runnerに次の１行を付け足す。ログイン情報はローカルに保存され、gitの対象外なので開発時のみ利用される。
export default defineConfig({
webExt: {
+ chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
startUrls: ["https://www.fanbox.cc/"]
},
アイコンの設定
経験上、拡張機能のアイコンは後から変えるのはめんどくさいので初期設定の段階で設定しておくといい。ダウンロードするなり、作成するなりして、アイコン画像を作成しておく一応png形式で。背景透過するのを忘れずに。その後、16x16、32x32、48x48、96x96、128x128のサイズのpng画像を作る。複数種類のサイズを作るのはChatGPTに任せるといい。
この画像を
16, 32, 48, 96, 128 のサイズの正方形にしてpngの画像にして
拡張機能の名前、説明をつけておく
これもアイコン同様に、後から変えるのがめんどくさくなるタイプの設定。wxt.config.tsのdefineConfig()内に追記する。WXTにはmanifest.jsonがないのでdefineConfig()内に書く必要がある。
export default defineConfig({
modules: ['@wxt-dev/module-react'],
+ manifest: {
+ name: "拡張機能の名前",
+ version: "1.0.0",
+ description: "説明欄",
+ }
});
リセットCSSを設定する
初期設定ではentrypoints/popup/style.cssはポップアップに共通のCSSが記述されている。自分はこのファイルにリセットCSSを書いている。個人的にはmodern css reset が好みなのでこれを使っている。
/* https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
ESLint, Prettierの設定
WXTのドキュメントにESLintの説明があったのでESLintを使っていく。
エラー出ては修正してを繰り返して何のコマンドを入力したかわからなくなった
ただ記憶していることは、ChatGPTだとエラーの堂々巡りだったがGeminiだと30分以内で解決した。
eslint.config.cjs という拡張子がcjsで動いた。でも動いてるだけで正しい作法だとは思えない。tsでやる方法もあるらしいが手は出さない
tslintの依存うんぬんのエラーが出たからバージョンを指定してインストールした。eslintわからんから
pnpm add eslint@9.24.0 @typescript-eslint/eslint-plugin@5.7.0 @typescript-eslint/parser@5.7.0 -D
pnpm add -D @types/eslint
あとでやる
WXTとESLintを使ってるリポジトリ