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

npm init vite@latest

cd crx_example
npm install

npm i -D @crxjs/vite-plugin@beta

npm i @types/chrome
npm i @extend-chrome/storage

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  action: {
    default_popup: "index.html",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

npm run dev

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  // ツールバーのアクションをクリックした時の動作
  action: {
    default_popup: "index.html",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  content_scripts: [
    {
      matches: ["https://www.google.com/*"],
      js: ["src/contentScript/script.ts"],
    },
  ],
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

const body = document.querySelector("body");
if (body) {
  const button = document.createElement("button");
  button.innerText = "アラートを表示";
  button.addEventListener("click", () => {
    alert("おめでとうございます！");
  });
  body.append(button);
}

export {};

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  background: {
    service_worker: "src/background/index.ts",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

/// タブのページ遷移を監視するイベント
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // ページの読み込みが未完了の場合はスルー
  if (changeInfo.status !== "complete") {
    return;
  }

  // URLがChromeの管理ページの場合はスルー
  if (tab?.url?.startsWith("chrome://")) {
    return;
  }

  console.log(`Change URL: ${tab.url}`);
});

export {};

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  // 権限を追加
  permissions: ["alarms"],
  background: {
    service_worker: "src/background/index.ts",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

const handleClick = async () => {
  const res = await chrome.runtime.sendMessage({ action: 'getItems' });
  console.log(res);
};

const getDocument = async (tabId: number) => {
  const res = await chrome.tabs.sendMessage(tabId, { action: 'getDocument' });
  console.log(res);
};

chrome.runtime.onMessage.addListener((request, sender, respond) => {
  // 送信データの内容に応じて処理を分岐できる
  switch (request.action) {
    case "getItems": {
      const items = ["Apple", "Orange", "Melon"];
      // 送信元へデータを返す
      respond(items);
      break;
    }
    default: {
      throw new Error(`no action: ${request.action}`);
    }
  }
  return true;
});

/// 送信メッセージ
export type SendMessage = {
  action: string;
};

/// 送信メッセージ（値付き）
export type SendMessageWithValue<T> = {
  action: string;
  value: T;
};

// 送信データの型を指定
const handleClick1 = async () => {
  await chrome.runtime.sendMessage<SendMessage>({ action: 'getItems' });
};

// さらに受信データの型も指定
const handleClick2 = async () => {
  const res = await chrome.runtime.sendMessage<SendMessage, string[]>({
    action: 'getItems',
  });
  console.log(res);
};

// 送信データに値を追加
const handleClick3 = async () => {
  const res = await chrome.runtime.sendMessage<SendMessageWithValue<string>, boolean[]>({
    action: 'addItem',
    value: 'Banana',
  });
  console.log(res);
};

import { crx, defineManifest } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

const manifest = defineManifest({
  manifest_version: 3,
  name: "CRX Example",
  version: "1.0.0",
  // 権限を追加
  permissions: ["storage"],
  action: {
    default_popup: "index.html",
  },
  background: {
    service_worker: "src/background/index.ts",
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

// ストレージを管理するキー文字列
const storageKey = 'items';

// ストレージからデータを取得
chrome.storage.local.get([storageKey]).then((res) => {
  const items = res[storageKey];
  console.log(items);
});

// ストレージにデータをセット
const value = ['Apple', 'Orange', 'Melon'];
chrome.storage.local.set({ [storageKey]: value });

chrome.runtime.onInstalled.addListener((details) => {
  // ここでストレージに初期値をセットする
});

npm i @extend-chrome/storage

import { getBucket } from '@extend-chrome/storage';

// Bucketの構造を定義
type ItemBucket = {
  items: string[];
};

// Bucketを取得する
const bucket = getBucket<ItemBucket>('itemsBucket');

// Bucketからデータを取得する
const getItems = async () => {
  const res = await bucket.get('items');
  console.log(res.items);
};

// ストレージにデータをセットする
const setItems = async (value: string[]) => {
  await bucket.set({ items: value });
};

// 既存のデータを使用して新しいデータをセットする
const addItem = async (value: string) => {
  await bucket.set(({ items }) => ({ items: [...items, value] }));
};