https://github.com/taichi-t/chrome-extension-tutorial-react-typescript
Chrom拡張機能のチュートリアルです。言語フレームワークはreactとtypescriptです。
https://github.com/taichi-t/chrome-extension-tutorial-react-typescript
Last synced: 4 months ago
JSON representation
Chrom拡張機能のチュートリアルです。言語フレームワークはreactとtypescriptです。
- Host: GitHub
- URL: https://github.com/taichi-t/chrome-extension-tutorial-react-typescript
- Owner: taichi-t
- Created: 2022-04-14T06:22:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-15T09:05:54.000Z (about 3 years ago)
- Last Synced: 2024-12-31T19:47:05.501Z (5 months ago)
- Language: TypeScript
- Size: 109 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ディレクトリ構造
```
.
├── dist // npm run buildで生成されるファイル群
├── icon.png
├── manifest.json //chrome extensionの設定ファイル
├── optional.html // chrome extensionのユーザー設定を行うoptionページ
├── popup.html // chromeのアイコンアイコンをクリックすると表示されるpopupのhtmlファイル
├── src //build元となるsrcファイル群 (それぞれディレクトリ内のindexファイルがbuildされて出力される)
│ ├── background //backgroundでapi通信や、ユーザーが開いているtabのurlなどを取得できる
│ │ └── index.ts
│ ├── content //特定のページに埋め込んで、DOMを操作できたりCSSを書き換えたりできる
│ │ └── index.ts
│ └── popup //chrome extensionのiconを開いた時に表示されるpopup。reactで作られている
│ ├── App.tsx
│ └── index.tsx
├── tsconfig.json // typescriptの設定ファイル
└── webpack.config.ts //バンドラー&コンパイラーの設定ファイル
```