拡張の稼働の仕方

この辺をmanifest.jsonに書いておく

Browser Action
- 右上とかに拡張機能のアイコンとして並んでる連中
- 特定のページを対象にしない(限定しない) ⇔ Page Action
Page Action ⇔ Browser Action
Background Page
- ページの表示は見えないが裏で動くもの
- メモリを常時消費。おまえだったのか、メモリを食っていたのは
Event Page
- Background Pageみたいに見えないやつだけど、イベントが終わったら終了するのでメモリセーブになる

oratake

起動するショートカットの実装

https://hanzochang.com/articles/3

oratake

環境構築

TypeScript + crxjs (vite-plugins) でやってみる

npm i vite@^3 @types/chrome
npm i -D @crxjs/vite-plugin@beta

これで 23.09.16現在で以下バージョンが入っていそう

package.json

  "devDependencies": {
    "@crxjs/vite-plugin": "^2.0.0-beta.18",
    "typescript": "^5.0.2",
    "vite": "^3.2.7"
  },
  "dependencies": {
    "@types/chrome": "^0.0.246"
  }

oratake

24/03 現在

chrome-extというボイラープレートがあるらしいので使ってみる

oratake

インストール

$ mkdir hogepiyo-chrome-ext
$ cd hogepiyo-chrome-ext
$ npm init chrome-ext
$ git init # gitは自分でinit。.gitignoreは自動生成してもらえる
$ npm i
$ npm run dev # とりあえず初回のビルド

oratake

Chrome拡張機能ページ chrome://extensions/ から、パッケージ化されていない拡張機能を読み込む (/build ディレクトリ)