Chrome Extensions with Angular

• 公式ドキュメント
  • Extensions - Chrome for Developers
• 参考
  • Chrome Extension with Angular — from zero to a little hero
• pnpmをインストール
  • https://pnpm.io/ja/installation#homebrew-を使用する

pnpm start

http://localhost:4200 にアクセス

pnpm build

• 拡張機能のページを開く
  • chrome://extensions/
• パッケージ化されていない拡張機能を読み込む
  • dist/app/browser/ ディレクトリを指定して読み込む

• 拡張機能として、dist/app/browser/index.html が表示される
  

変更検知しながら開発する場合

pnpm watch

watch していれば、拡張機能を開き直すだけで反映される、すごい！

manifest.json を更新した時は、下記をクリックするして反映する必要がある
（ディレクトリの再読み込みは不要）

拡張機能でやりたいこと

• ローカルの画像を選択させ、画像を LocalStrage に保存する
• 「削除」ボタンを押したら、LocalStrageに保存した画像が削除される
• 特定ページが開かれたら、特定の画像を、LocalStrageに保存した画像に変更する
  • LocalStrageに画像がなければ、何もしない

ファイルを選択できるようにした
ファイルを変更したときの処理を書いていく

参考
Angular File Upload - Complete Guide

Angular Testing Libraryを入れた
https://testing-library.com/docs/angular-testing-library/intro