【TypeScript】Plasmo で Bluesky を読み上げるブラウザ拡張を作ってみた

pnpm create plasmo --with-src

pnpm install @plasmohq/messaging
pnpm install @plasmohq/storage

pnpm dev

{
  "manifest": {
    …
    "permissions": [
      "tabs",
      "tts"
    ]
  }
}

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";

const handler: PlasmoMessaging.MessageHandler<string> = async (req) => {
  // テキストを読み上げる
  chrome.tts.speak(req.body, {
    volume: 0.5,
    rate: 10,
    pitch: 0,
  });
};

export default handler;

import { sendToBackground } from "@plasmohq/messaging";
import type { PlasmoCSConfig } from "plasmo"

export const config: PlasmoCSConfig = {
  matches: ["https://firesky.tv/*"]
}

window.addEventListener("load", () => {
  setInterval(main, 5000);
})

const main = () => {
  const elements = Array.from(document.querySelectorAll(`div[class="target"]`));
  elements
    .slice(0, 30)
    .forEach(elem => {
      if (elem instanceof HTMLDivElement) {
        // バックグラウンドのspeakハンドラを呼び出す
        sendToBackground<string>({
          name: "speak",
          body: elem.textContent,
        });
      }
    });
};

export const storageKeys = {
    // 読み上げ履歴
    history: "history",
} as const;

import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

export {};

// インストール時のイベント
chrome.runtime.onInstalled.addListener(async (_) => {
  const storage = new Storage({ area: "local" });
  await storage.set(storageKeys.history, []);
});

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

const handler: PlasmoMessaging.MessageHandler<string> = async (req) => {
    const storage = new Storage({ area: "local" });
    const ids = await storage.get<string[]>(storageKeys.history);
    await storage.set(
        storageKeys.history,
        [req.body, ...ids].slice(0, 30)
    );
};

export default handler;

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

const handler: PlasmoMessaging.MessageHandler<unknown, string[]> = async (
  _,
  res
) => {
  const storage = new Storage({ area: "local" });
  const ids = await storage.get<string[]>(storageKeys.history);

  res.send(ids);
};

export default handler;

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

const handler: PlasmoMessaging.MessageHandler = async () => {
    const storage = new Storage({ area: "local" });
    await storage.set(storageKeys.history, []);
};

export default handler;

import { sendToBackground } from "@plasmohq/messaging";
import type { PlasmoCSConfig } from "plasmo";

export const config: PlasmoCSConfig = {
  matches: ["https://firesky.tv/*"],
};

window.addEventListener("load", () => {
  // 履歴リストをクリアする
  sendToBackground({ name: "clearHistory" });

  setInterval(main, 5000);
})

const main = async () => {
  // 履歴リストを取得する
  const ids = await sendToBackground<unknown, string[]>({ name: "getHistory" });

  // 投稿を取得する
  const elements = Array.from(document.querySelectorAll(`div[class="target"]`));

  // 最新30件の投稿を処理する
  elements.slice(0, 30).forEach((elem) => {
    // div要素でない場合はスキップする
    if (!(elem instanceof HTMLDivElement)) return;

    // URLをIDとして扱う
    const id = elem.parentElement.getAttribute("href");

    // 読み上げ済みならスキップする
    if (ids.includes(id)) return;

    // テキストを読み上げる
    sendToBackground<string>({
      name: "speak",
      body: elem.textContent,
    });

    // IDを履歴リストに追加する
    sendToBackground<string>({ name: "pushHistory", body: id });
  });
};

{
  "manifest": {
    …
    "commands": {
      "_execute_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+1"
        }
      },
      "toggleMute": {
        "suggested_key": {
          "default": "Alt+Shift+2"
        },
        "description": "ミュート状態の切り替え"
      }
    }
  }
}

export const storageKeys = {
    …

    // 読み上げのミュート状態
    isMuted: "isMuted",
} as const;

// インストール時のイベント
chrome.runtime.onInstalled.addListener(async (_) => {
  const storage = new Storage({ area: "local" });
  …
  await storage.set(storageKeys.isMuted, false);
});

import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

…

// コマンド入力イベント
chrome.commands.onCommand.addListener(async (command) => {
  switch (command) {
    // ミュート状態を切り替える
    case "toggleMute": {
      const storage = new Storage({ area: "local" });
      const isMuted = await storage.get<boolean>(storageKeys.isMuted);
      storage.set(storageKeys.isMuted, !isMuted);
      break;
    }
    default: {
      throw new Error(`no command: ${command}`);
    }
  }
});

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";

const handler: PlasmoMessaging.MessageHandler<string> = async (req) => {
  const storage = new Storage({ area: "local" });
  const isMuted = await storage.get<boolean>(storageKeys.isMuted);

  // ミュート状態なら読み上げをスキップする
  if (isMuted) {
    return;
  }

  // テキストを読み上げる
  chrome.tts.speak(req.body, {
    volume: 0.5,
    rate: 10,
    pitch: 0,
  });
};

export default handler;

export type Settings = {
  volume: number;
  pitch: number;
  rate: number;
};

export const storageKeys = {
    …
    // 読み上げ設定
    settings: "settings",
} as const;

chrome.runtime.onInstalled.addListener(async (_) => {
    const storage = new Storage({ area: "local" });
    …
    const settings: Settings = {
      volume: 0.5,
      pitch: 1.0,
      rate: 5,
    };
    await storage.set(storageKeys.settings, settings);
});

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";
import type { Settings } from "~types/settings";

const handler: PlasmoMessaging.MessageHandler<unknown, Settings> = async (
    _,
    res
) => {
    const storage = new Storage({ area: "local" });
    const settings = await storage.get<Settings>(storageKeys.settings);

    res.send(settings);
};

export default handler;

import type { PlasmoMessaging } from "@plasmohq/messaging";
import { Storage } from "@plasmohq/storage";
import { storageKeys } from "~storage_keys";
import type { Settings } from "~types/settings";

const handler: PlasmoMessaging.MessageHandler<Settings> = async (req) => {
    const storage = new Storage({ area: "local" });
    const settings = await storage.get<Settings>(storageKeys.settings);
    await storage.set(
        storageKeys.settings,
        req.body,
    );
};

export default handler;

import { sendToBackground } from "@plasmohq/messaging";
import { useCallback, useEffect, useState, type ChangeEvent } from "react";
import type { Settings } from "~types/settings";

export const useSliders = () => {
  const [volume, setVolume] = useState<number>(1.0);
  const [pitch, setPitch] = useState<number>(1.0);
  const [rate, setRate] = useState<number>(1.0);

  const handleChangeVolume = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setVolume(parseFloat(event.target.value));
    },
    []
  );

  const handleChangePitch = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setPitch(parseFloat(event.target.value));
    },
    []
  );

  const handleChangeRate = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      setRate(parseInt(event.target.value));
    },
    []
  );

  // 設定値をロードする
  useEffect(() => {
    const loadSettings = async () => {
      const settings = await sendToBackground<unknown, Settings>({
        name: "getSettings",
      });
      setVolume(settings.volume);
      setPitch(settings.pitch);
      setRate(settings.rate);
    };
    loadSettings();
  }, []);

  // 変更時に設定値を保存する
  useEffect(() => {
    sendToBackground<Settings>({
      name: "putSettings",
      body: { volume, pitch, rate },
    });
  }, [volume, pitch, rate]);

  return {
    data: {
      volume,
      pitch,
      rate,
      handleChangeVolume,
      handleChangePitch,
      handleChangeRate,
    },
  };
};

import { useSliders } from "~hooks/use_sliders";

function Popup() {
  const { data } = useSliders();

  return (
    <div>
      <h1>Settings</h1>
      <div style={{ padding: "20 10" }}>
        <label htmlFor="volume">Volume</label>
        <input
          type="range"
          id="volume"
          min="0"
          max="1"
          step="0.1"
          value={data.volume}
          onChange={data.handleChangeVolume}
        />
      </div>
      <div style={{ padding: "20 10" }}>
        <label htmlFor="pitch">Pitch</label>
        <input
          type="range"
          id="pitch"
          min="0"
          max="2"
          step="0.1"
          value={data.pitch}
          onChange={data.handleChangePitch}
        />
      </div>
      <div style={{ padding: "20 10" }}>
        <label htmlFor="rate">Rate</label>
        <input
          type="range"
          id="rate"
          min="1"
          max="10"
          step="1"
          value={data.rate}
          onChange={data.handleChangeRate}
        />
      </div>
    </div>
  );
}

export default Popup;

…

// タイマーのハンドルID
let timerId = null;

const startInterval = () => {
  timerId = setInterval(main, 3000);
};

const stopInterval = () => {
  if (timerId != null) {
    clearInterval(timerId);
  }
};

// アクティブタブの更新イベント
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    // アクティブになった時
    startInterval();
  } else {
    // 非アクティブになった時
    stopInterval();
  }
});

window.addEventListener("load", () => {
  // 履歴リストをクリアする
  sendToBackground({ name: "clearHistory" });

  startInterval();
});

…