Open2023/10/17にコメント追加5

Chrome Extentionsについて

Document

開発の流れ

プロジェクトディレクトリを作成
ディレクトリルートにマニフェストファイル manifest.jsonを作成。これは必須。

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles"
}

アイコンを設定する。これは任意だが、ほぼ必須といっていい。推奨ファイル形式はpng

拡張機能を更新した時

拡張機能に何らかの変更を加えた時は、拡張機能のページでその拡張機能を更新する

コンソールログでデバッグ

JavaScriptのconsole.log() を使ってデバッグができる。拡張機能のアイコンをクリックしてポップアップを表示させ、それをChrome DevToolsで検証すればいい

拡張機能のページでデバッグ

例えばJavaScriptコードにエラーがあった場合、拡張機能を実行してそのエラーが検知されたら拡張機能のページでエラーログを見ることができる。

拡張機能のディレクトリ構造の例

TypeScriptを使う

chrome-typesというnpmパッケージを使う

最新のChromiumで動作するようにこのパッケージは頻繁に更新するのがよい

manifest.json

manifest.json

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

`default_popup`

ツールバーの拡張機能アイコンをクリックすると表示されるポップアップ（HTMLファイル）を指定する

`default_icon`

Focus Mode

Servie worker

Service worker

バックグラウンドでブラウザのイベントを監視する。イベントが発生したら実行され、処理が終わったら破棄される

Reading time

マニフェストファイルの基本的な使い方
拡張機能のアイコンの設定方法
Contents Scriptを使ってwebページを操作する方法
マッチパターンの使い方