はじめに

業務の中で拡張機能を触ることが多いのですが、一から作ったことが無かったことと、V2とV3の違いがしっかり分かっていなかったため、復習がてら記事にまとめようと思います。

今回のゴール

特定のページを開いたら通知が出る拡張機能の作成
バックグラウンドでタブを検知してタブのURLが "https://sciencepark.co.jp" だったら通知を出す拡張機能を作成します。

目次

1. 必須ファイル
2. manifest.json
3. background.js
4. 結果
5. 参考文献

作成環境

OS: Windows 11 Pro 23H2
chrome: 133.0.6943.142
VSCode: 1.97.2

1. 必要なファイル

　必要なファイルは以下の2つです。今回はバックグラウンドで処理を行いたいので、background.jsを使用します。

・manifest.json
・background.js

2. manifest.Json

manifest.Jsonは拡張機能に必須のファイルで、拡張機能の構造と動作に関する重要な情報が記載されています。

{
    "name": "sampleExtension",
    "version": "1.0",
    "manifest_version": 3,
    "description": "拡張機能のテスト",
    "background": {
        "service_worker" : "background.js"
    },
    "permissions": [
        "tabs",
        "notifications"
    ]
}

nameは拡張機能の名前で、75文字以内で好きな名前を付けることができます。
varsionは拡張機能のバージョン番号です。
manifest_versionは使用するマニフェスト ファイル形式のバージョンで現在の標準はManifest Version 3 のため、3を指定します。
descriptionは拡張機能の説明で、最大132文字まで入力できます。
backgroundは拡張機能がバックグラウンドで動作するために必要な権限です。これにより、Chromeが起動していない時でも拡張機能を事項し続けることができます。
permissionsでは特定の拡張機能のAPIを有効にします。今回はブラウザのタブを検知して特定のURLの場合通知を表示させたいので、tabsとnotificationsの権限を追加します。

2. background.js

var path = "https://sciencepark.co.jp";
var opt = {
    type: "basic",
    title: "notification",
    iconUrl: "icon.png",
    message: "サイエンスパークのHPです",
};

chrome.tabs.onActivated.addListener(function (activeInfo) {
    chrome.tabs.get(activeInfo.tabId, tab => {
        var url = tab.url;
        if(url.indexOf(path) === 0){
            chrome.notifications.create(opt);
        }
    });
});


chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    var url = tab.url;
    if(url.indexOf(path) === 0){
        chrome.notifications.create(opt);
    }
});

chrome.tabs.onActivated

タブがアクティブになったとき発生するイベントです。
引数はactiveInfoでtabIdとwindowIdの情報しか取得できないため、tabIdからタブのURL情報を取得しています。

chrome.tabs.onUpdated

タブが更新されたときに発生するイベントです。
引数はtabId, changeInfo, tabの３つあります。

chrome.notifications.create

テンプレートを使って通知を作成し、画面の右下に表示させることができるAPIです。
テンプレートのtype, title, iconUrl, messageは必須で、無いとコンソールログ上に以下のようなエラーが出力されます。

Unchecked runtime.lastError: Some of the required properties are missing: type, iconUrl, title and message.

結果

サイエンスパークのHPを開いたら右下に以下のような通知が来ます。

参考文献

https://developer.chrome.com/docs/extensions/reference/manifest?hl=ja
https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=ja
https://developer.chrome.com/docs/extensions/how-to/ui/notifications?hl=ja