はじめに

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

その1の続きです。
https://qiita.com/spc_knakano/private/8f518af2770cca13520a

今回のゴール

オプションで設定を追加する
その1で作成した通知のON/OFFを拡張機能のオプションから選択できるようにします。

目次

オプションの設定とは？
option.html
option.js
background.js
manifest.json
参考文献

作成環境

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

1. オプションの設定とは？

Chrome拡張機能の設定をユーザーが変更できるオプションページを使って行うことです。
このページを使うことで、ユーザーが拡張機能の動作を変更することができるようになります。

拡張機能ボタンを押して「・・・」を選択すると、次のような画面が開きます。そこでオプションを選択すると、オプションページが表示されます。

chrome://extensions/ 開いて、作成した拡張機能の詳細を選択すると詳細ページが開きます。ページの下の方に「拡張機能のオプション」という項目があるので選択すると、こちらからもオプションページを表示することができます。

2. option.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>sample Extension Options</title>
  </head>
  <body>
    <p class="text">通知のON/OFFを切り替えることができます</p>

    <div class="button">
        <input type="button" id="btn_off" value="OFF">
        <input type="button" id="btn_on" value="ON">
      </div>

    <script src="options.js"></script>
  </body>
</html>

まずオプションページを作成します。
charsetをutf-8にすることで以下のテキストを日本語で表示することができます。

3. option.js

var offBtns = document.querySelectorAll("[id^='btn_off']");
offBtns.forEach((item) => {item.addEventListener("click", async ()=>{
    await chrome.storage.local.set({ "option": false });
})});

var onBtns = document.querySelectorAll("[id^='btn_on']");
onBtns.forEach((item) => {item.addEventListener("click", async ()=>{
    await chrome.storage.local.set({ "option": true });
})});

オプションのスクリプトです。
ON/OFFそれぞれのボタンがクリックされたとき、Storageにtrue/falseをセットしています。

4. background.js

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

function changeNotification(){
    chrome.storage.local.get((items) => {
        var option = !!items["option"];
        if (option) {
            bool = true;
        } else {
            bool = false;
        }
    });
}

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

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

タブがアクティブになったときと更新されたときにストレージの情報を取得し、trueだったら通知を表示、falseだったら何もしないという処理を追加しています。

5. manifest.json

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

今回ストレージを使用して設定を保存・取得するため、permissionsに"storage"を追加します。

"options_page"にすると作成したOptions.htmlが新しいタブとして追加され、以下のようにページ全体に表示されます。

"options_ui": {
    "page": "options.html",
    "open_in_tab": false
}

"options_ui"にすると埋め込みオプションページとなり、画面の真ん中に表示されます。

6. 参考文献

https://developer.chrome.com/docs/extensions/develop/ui/options-page?hl=ja
https://developer.chrome.com/docs/extensions/mv2/reference/storage?hl=ja