コンテンツにスキップ

Vite で Chrome 拡張機能

Create a project | CRXJS Vite Plugin

TypeScript + Vite で Chrome 拡張機能を作る

【TypeScript】React と CRXJS Vite Plugin で作る Chrome 拡張機能

1
2
3
4
5
6
$ npm init vite@latest
$ cd project-name
$ npm i
$ npm i -D @crxjs/vite-plugin@beta
$ npm i -D @types/chrome
# npm i @extend-chrome/storage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { crx } from "@crxjs/vite-plugin";
// import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import manifest from "./manifest.json";

export default defineConfig({
    plugins: [
        // react() // Reactを使う場合
        crx({ manifest })
    ],
});

1
2
3
4
5
6
7
8
{
    "manifest_version": 3,
    "name": "CRXJS Vanilla JS Example",
    "version": "1.0.0",
    "action": {
        "default_popup": "index.html"
    }
}

以下をマージする。

1
2
3
4
5
{
    "compilerOptions": {
        "types": ["chrome"]
    }
}

動作確認

npm run devしてできたdistを拡張機能として読み込ませる。

content_scripts が読み込まれない

jsのパスは./始まりにすること。src/などだと上手くいかない。

ストレージを使う

1
npm i @extend-chrome/storage

1
2
3
4
5
6
7
8
import { Bucket, getBucket } from "@extend-chrome/storage";

// get
const preferences = await getBucket<Preferences>("preferencesBucket").get();
console.log(preferences.ngWords);

// set
await preferencesBucket.set({ ngWords: ngWords.split(",") });

background からの返事が undefined になる

リスナーを async で実装してはいけないらしい。

chrome.runtime.onMessage.addListener からの response が undefined | Mitsuru Takahashi Personal Site