Chrome の拡張機能って毎回つくるたびにどうだったっけと調べるのですが 英語なので読むのつらいです
前回のコードをコピペしてるときもありますが どの拡張機能でどの機能を使ってたかを探すのも疲れるので ブログに簡単にまとめておこうかと思います

基本作ったあとのメモ程度ですので ココ読んで完璧に作れるようになる とかないです

このページでは 全体的なこと書いておきます

拡張機能の種類

Chrome の拡張機能は
  • ブラウザアクション
  • ページアクション
  • ページ埋め込み
  • アプリ

などがあります
ブックマークや新しいタブなどの改造などもありますが マイナーですし作ったことないのでなかったことにします

ブラウザアクション

ウィンドウの右上にあるボタンです
押した時に何かを起こせます
ポップアップでページを出すことが一般的です

ページアクション

URL入力するところの内側の右端にあるボタンです
できることはブラウザアクションとだいたい一緒です
ボタンを表示するかしないかをバックグラウンドの処理で制御できます

ページに埋め込み

特定のルールに一致したサイトへ JavaScript やCSS のコードを埋め込むことが出来ます
パーミッションを設定すればどんなサイトでもできますが Chrome の設定ページのように例外も存在します

アプリ

1つのページを使ったアプリケーションを作れます
拡張機能の権限があるので ただのウェブサービスより高機能なことができます

最近では ちょっと特別なウィンドウで起動できて Windows のローカルソフトっぽくみせれるのもあります
Nodejs機能がいらないならElectronなんかつかわずこっちでいいかもしれません

拡張機能一覧(chrome://extensions/)には入らずに アプリ(chrome://apps/)という特別なところで管理されます(昔は 拡張機能の一覧の中にもいたはず)

アプリかそれ以外かを選ぶ

色々ありましたが とりあえずアプリか(ブラウザorページ)アクションのどっちかを選びます
両方することはできないです(調べたのは少し前ですがたぶん今もそのはず)
ブラウザ機能を拡張したいか ウェブサービスをアプリとして提供したいかで考えればいいと思います

ページにコードを埋め込むのは ブラウザアクションなどでもできるので ボタンをつけなかっただけという立ち位置と考えてもいいかもです

アプリ以外で選ぶ

ブラウザアクションとページアクションですが ブラウザアクションはずっとボタンがでているので どのページを見ていても使うような機能向けです
それに対して ページアクションは 特定のサイトでだけ動かす機能という分け方が一般的です
ですが 特定のページだけのをブラウザアクションにしたり 全ページでページアクションでボタンを表示してもエラーが出たり動かないことはないです

バックグラウンドで処理をさせることも可能です
常時動かしておいて 開いたURLを収集したり ボタンを押した時にデータをやり取りしたり使いみちがあります
ページアクションのボタン表示・非表示の切り替えもバックグラウンド処理で行います
また ブラウザアクションなどのボタンを押した時にポップアップを設定せずに バックグラウンドのプロセスでボタンを押した時に実行する処理を設定することもできます

ページヘの埋め込みは ルールにマッチするURLを開いた時に自動でさせることも ボタンが押された時にコードを生成して実行することも出来ます
埋め込むスクリプトは content script と言われてます
content script が実行される環境は埋め込んだページ内ですが window オブジェクトがページ内のものとは別という特徴があります(DOMは共通です)
そのため DOM を書き換えるだけなら簡単ですが グローバル変数を使ってどうこうしたいというのは一手間必要です

アプリ

単純に1つのウェブページを作ればいいです
HTML と CSS と JS を使って普通に作るだけです
あまり作らないので深いことはわかってません