コンテンツにスキップ

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