手羽先

 目的
Chrome拡張機能を自作できるようにする
最近案件が入ってきたり、便利ツールを作りたい



 手段
React, Viteなど
数年前にJavaScriptでDOM操作をして苦労したのでReactなどでやりたい

手羽先

基礎の勉強

手羽先

4つの基本要素

Manifest（必須）
- 定義
Service workers
- ブラウザのイベント（右クリックメニュー、タブを閉じるなどの監視）
Content scripts
- DOM操作
Toolbar action
- アイコンクリックでポップアップ表示
- オプションページアクセス

手羽先

3つのJavaScript

Content scripts
popup scripts
background scripts

手羽先

.
├── dist/
├── public/
│   └── images/
│       └── icon_16.png
├── src/
│   ├── background/ ...service worker
│   │   └── background.ts
│   ├── content/ ...content scripts
│   │   ├── Example.tsx
│   │   └── index.tsx
│   ├── popup/ ... popup
│   │   ├── Example.tsx
│   │   ├── index.tsx
│   │   └── index.html
│   └── shared/ ... 共通ファイルなど
│       ├── types.tsx
│       └── utilities.ts など
├── manifest.json
├── package.json
├── vite.config.ts

手羽先

環境構築

yarn create vite
yarn
yarn add --dev @crxjs/vite-plugin@beta
yarn add --dev @types/chrome