数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite

copy-markdown-linkという素朴なChrome拡張のコミットログを追いかけて、Chrome拡張のつくりかたを学ぼう。 つくるもの 拡張のアイコンをクリックするかショートカットキーを押すと、Markdown形式でリンクをコピーする、という拡張をつくる。 node -v 念のため、Node.jsのバージョンを確認しておこう。Node.js 18.0.0を使っているが、もう少し古くても多分大丈夫。 $ node -v v18.0.0 $ npm -v 8.6.0 npm init vite@latest npm init vite@latest で雛形をつくる。 npm init vite@latest cd copy-markdown-link 雛形生成時に幾つか質問されるので、次のように入力した。React等は不要で、TypeScriptで書く。 Project name: c