Chrome 拡張

• https://developer.chrome.com/docs/extensions/ （公式）
• Chrome拡張の開発方法まとめ　その1：概念編
• Chrome 拡張機能のマニフェストファイルの書き方
  • 最新バージョンはv3だがv2がまだ一般的なようで本記事もv2

構成

• manifest.json
  • 拡張機能のルートディレクトリにmanifest.jsonを作成
  • https://developer.chrome.com/docs/extensions/mv3/manifest/
• HTML + CSS + JavaScript

使用API

• [Chrome API](https://developer.chrome.com/docs/extensions/reference
• Sample

スクリプトコンテキスト

• Content Script
• Background/Event Page
• Action
  • ポップアップ用HTMLのなかにJavaScriptを記載

ここまで、Webページで動くContent Scripts、Browser(Page) Actionのポップアップ、Background(Event) Pageと、3つのJavascriptの実行コンテキストが出てきました。これらはそれぞれ独立して動いており、異なるコンテキストを跨いで互いに変数や関数を参照することは出来ません。 そこで、それぞれの環境から互いにメッセージを送り、スクリプト間の連携を実現するMessage Passingという概念が登場します。 Message Passingはchrome.*APIによって実現します。これは実際に例を見てみたほうが理解できると思うので、まずは例を見てみましょう。

https://qiita.com/k7a/items/26d7a22233ecdf48fed8#chromestorageapi%E3%81%A8option-page

Content Script

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.

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

Content scripts can access Chrome APIs used by their parent extension by exchanging messages with the extension. They can also access the URL of an extension's file with chrome.runtime.getURL() and use the result the same as other URLs.

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

• manifest.jsonのcontent_scriptsプロパティでメタ情報定義
• DOMを操作可能
• ページ内のJavaScriptにアクセス不可

Background Page/Event Page

Background Page

• Background Pageはメモリを常に専有

Event Page

• バックグラウンドで動作するが発火したときのみ実行

Action

ポップアップ画面を設定できる。拡張のアイコンがクリックされたときに実行。

• Browser Action
• Page Action

ローカルファイル読み込み

Content Scriptでローカルファイルを読み込む例

1. 拡張の中に対象ファイルを配置（例：data.csv）
2. Content Script内でfetch APIを使用してファイル読み込み

const dataPath = chrome.runtime.getURL( dataSource );
const response = await fetch( dataPath );
const csvText = await response.text();

ref. https://developer.chrome.com/docs/extensions/mv3/content_scripts/