[ f:id:chang_app_dev:20210119003231p:plain : h400]

はじめに

Google Chrome 拡張機能には、Background Scriptという機能があります。

これを使うことで、ポップアップを表示しなくてもいろいろな処理を行うことができます。

今回はそんなBackground Scriptを使った拡張機能の作り方をシェアします。

Background Scriptとは

Google Chromeブラウザを起動している間、裏で動作しているスクリプト（JavaScriptプログラム）です。

裏で動作することでユーザーの操作などのイベントを監視して、必要なときには処理を実行してくれます。

ポップアップ用HTMLファイルで読み込むJavaScriptとの違い

処理を実行するのにポップアップを表示させる必要があるかどうかです。

Background Scriptはポップアップを表示させる必要がありません。

なのでmanifest.jsonを記述する際に、ポップアップ用のファイルがなくてもOKです。

manifest.jsonについては以下の記事を参照してください。

www.stay-home-build-app.com

完成品について

今回作る拡張機能の仕様は、右クリックで表示されるメニューに「test-item」という項目を追加して、test-itemがクリックされると「clicked!」というアラートを表示するものです。

右クリックでメニューが表示され...

f:id:chang_app_dev:20210128082009p:plain:h300

test-itemをクリックするとアラートが出る、

f:id:chang_app_dev:20210128082154p:plain:h200

と仕様です。それではまずファイル構成を見ていきます。

ファイル構成

ファイル構成は以下です。

f:id:chang_app_dev:20210128082340p:plain:h300

backgroundというフォルダ内に、「manifest.json」と「background.js」ファイルのみです。

次にソースコードを見ていきます。

ソースコード

manifest.json

{
  "name": "my background app",
  "description": "test background script",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions":[
    "contextMenus"
  ]
}

background.js

chrome.runtime.onInstalled.addListener(()=>{
  chrome.contextMenus.create({
    "id": "test",
    "title": "test-menu"
  });
});

chrome.contextMenus.onClicked.addListener(()=>{
  window.alert("clicked!");
})

解説

今回Background Scriptを実装するにあたり、重要な部分は manifest.jsonの"background"の設定です。このキーに値を渡すことによって、拡張機能がBackground Scriptの存在を認識することができます。

"background" 内の "scripts"には、配列でBackground Script用の JavaScriptファイルを渡します。これはファイルが一つでも配列型式で渡します。今回はbackground.jsというファイル名を渡しているので、この拡張機能がインストールされたらこのbackground.jsが裏で待機している状態になります。

また"background"内の"persistent"ですが、このキーにfalseを渡すことで Background Script が必要なときにのみ実行されて、メモリを効率的に使うことができます。用途にもよりますが、基本的にはfalseにした方がお得です。

また"permission"という見慣れないキーがあります。これはGoogle Chrome APIを使用するのに必要な記述です。今回は説明は省きますが、簡単に説明するとcontextMenusを使用することで、右クリックをした際のメニューを管理することができます。

developer.chrome.com

background.jsではcontextMenusを使って「test-item」というメニューを作成しています。 "title"が右クリックした際の表示名になります。

今回は追加したメニューが一つなので、シンプルにonClickedでイベントを実行しています。複数になるとユニークなidで処理を分ける必要があります。それはまた別の記事で紹介します。

test-itemがクリックされると、 window.alert でアラート用の表示を出します。

処理の流れは以上です。