ReactでChrome拡張機能を実装できるPlasmoを使用してスクレイピングを自動化

背景

毎回ブックマークをクリックしてスクレイピングを実行のが手間だった。
Plasmoで自動で実行したいと思った🙄

Plasmoとは

簡単にいうとChrome拡張機能の開発プラットフォーム
Chrome拡張機能を簡単に作成・テスト・公開できる
React、Preact、Svelte、Vue、Typescriptに対応しているらしい
document

※スクレイピングを実行するだけのChrome拡張機能を作成するだけ！
※Chrome Web Storeに公開はしないです。あくまで個人で使用する用途
※今回はContent Scriptsのみ使用します

実装

setup

今回はpnpmを使用します（pnpmが推奨されていた為）
※フォルダ名はappとします

pnpm create plasmo
// or
yarn create plasmo
// or
npm create plasmo

開発サーバーを起動

pnpm dev

Chrome拡張機能のデベロッパーモードを有効にする
上記画面にあるパッケージ化されていない拡張機能を読み込むをクリックし、app/build/chrome-mv3-devを選択
するとDEV | appという拡張機能が追加される

コードを書く

ルートディレクトリにcontent.tsを作成

touch content.ts

※ contents/scraping.tsでも可能

content.tsはwebページのデータ取得や、逆にUIを表示したりできる
Content Scripts

content.ts

export {}
// ロジックを書く

※ export {}はtypescriptのコンパイルチェックを無視する為に追加。他ファイルからロジックをimportすれば不要

content.ts

import scraping from "scraping"
scraping()

注意点

srcフォルダを作成するとうまく機能しなかったので、その場合はtsconfig.jsonのcompilerOptionsを変更する

tsconfig.json

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
    // srcを指定する
      "~*": ["./src/*"]
    },
    "baseUrl": "."
  }
}

この場合、src/content.ts or contents/scraping.tsのようにできます

ローカルで拡張機能を使用する

最後は、作成したChrome拡張機能のDev | appを有効にしておくだけで終わり！

終わり

これでタブを開くと自動で実行されるようになったので生産性UP！🎉