日報 - Githubissues

r7kamura commented 2 years ago

ここ数年間Chrome拡張を触っていなかったので、2022年のChrome拡張のつくり方を調べた。

Twitterで尋ねたらk0kubunが良さそうなページを教えてくれた。感謝…

https://developer.chrome.com/docs/extensions/mv3/getstarted/

TypeScriptで書き始めたいところではある。

r7kamura commented 2 years ago

TypeScriptは何らかのツールでビルド
- https://github.com/vercel/ncc はNode.jsプロジェクト用なので活用できない
- 面倒だけどWebpackが妥当そうではある
manifest.jsonやHTML等も含めた全ての成果物をdistディレクトリに詰め込む
バージョンごとにdistをZip化
手作業でChrome Web Storeに提出

という運用が良いのでは無いだろうか。

r7kamura commented 2 years ago

最近はVSCodeのターミナルを常に使うようにしたので、Windows Terminalを使う機会が無くなったというのを思い出した。Windowsを使いはじめた頃はまだVSCodeのターミナルを使う慣習が無かったので、常にそこで作業していた。

とはいえ、VSCodeで、そのプロジェクト (ワークスペース) ではない別のプロジェクトの物事を何かしたくなったときには、少し変な感じがする。関係の無い適当なプロジェクトを開いて、そこのターミナルでリポジトリを新たにつくるコマンドを叩いたりしている。

r7kamura commented 2 years ago

vite (比較的新し目のフロントエンド向けビルドツール) が良さそうだったので、Webpackではなくこちらを試してみることにした。

https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7

npm init vite@latest

上のコマンドでひな形が作れるようだったので試した。実際には、プロジェクトを既に作った後だったので、それを一時ディレクトリで叩いたあと、必要なファイルを持ってくる、という大変な作業をこなした。

npm initにそういうコマンドを利用できるのも知らなかったけど、便利だなーこれは。npm help init を叩くと説明されていて、上のコマンド例だと npm exec create-vite@latest が実行されているらしい。

https://github.com/vitejs/vite/tree/main/packages/create-vite#readme

npm exec は普段使っている npx のalias。npm init は npm create というaliasもある。

Jack Steamさんのこの記事を参考につくっていっている。

https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7

r7kamura commented 2 years ago

とりあえずリポジトリをつくった。

https://github.com/r7kamura/copy-rich-link

r7kamura commented 2 years ago

viteのChrome extension向け機能を入れた。

npm i -D @crxjs/vite-plugin

vite.config.ts でこのプラグインを利用して「manifest.jsonフを元にいい感じにしてくれ」と伝えると、ビルド時にmanifest.jsonを見て必要なものを全部ビルドしてくれるらしい。例えばmanifest.jsonに「Chrome extensionのアイコンがクリックされたときはこのHTMLを表示する」と定義されていたら、そのHTMLファイルをビルド対象に含めてくれるし、更にそのHTMLファイルで参照されているJavaScriptも含めてくれる。