Chrome拡張機能を「Manifest V3」に対応する手順

2023年2月24日

［PR］記事内のアフィリエイトリンクから収入を得る場合があります

URLをコピーしました！

Googleは現在、Chromeの拡張機能の仕様を「Manifest V3」へ移行するための計画を進めています。

2023年1月にManifest V3が「Featured」バッジを取得するための必須条件となり(のちに延期)、2023年6月よりChrome ウェブストアでManifest V2を使用した拡張機能の可視性を「公開」に設定することができなくなるなど、移行に向けたスケジュールが立てられています。

そろそろManifest V3への移行を考えている方のため、今回は自作のChromeの拡張機能、「Feedly Star Opener」をManifest V3に移行するために行った作業をまとめてみたいと思います。

Manifest V3対応作業

作業にあたり以下のサイトを参考にさせて頂きました。

結果的にmanifest.json、background.js、optins.jsを修正する必要がありました。それぞれの変更内容は以下の通りです(変更後のソースコード全体はGitHubで確認可能です)。

manifest.jsonの変更

manifest_versionを3に変更します。

"manifest_version": 3,

js/background.jsからbackground.jsに変更します。background.jsファイル自体の場所も移動しておきます。

"background": {
        "service_worker": "background.js"
},

permissionsを変更します。ホスト毎の許可はhost_permissionsに移動し、chrome.storage.localを使う必要がでてきたので、permissionsにstorageを指定しています。

    "permissions": [
	    "storage"
    ],
    "host_permissions": [
        "http://feedly.com/*",
        "https://feedly.com/*"
    ],

optins.jsの変更

options.jsではこれまでbackground.jsの関数を直接呼び出してデータの読保存を行っていました。

Manifest V3ではchrome.extension.getBackgroundPage()が使えなくなり、options.jsからbackground.jsの関数を呼び出したり変数を参照したりすることはできなくなりました。

contentscripts.jsのようにsendMessageを使ってデータのやりとりを行う必要があるようです。

データ保存用に"setOptions"を呼び出します(新設)。

    $("#save").on('click', function() {
		//フォームに入力された値を正規化して反映
		var tabcount = $("#fso_tabcount").val();
		// //正規化後の値をローカルストレージに保存
		// chrome.storage.local.set({bg.FSO_TABCOUNT_KEY : tabcount}, function () {});
		chrome.runtime.sendMessage({method: "setOptions", tabcount: tabcount}, function() {
			// console.log("ok");
		});
    });

データ取得用の処理はもともとsendMessageを使っていたのであまり変更はありません。これはcontentscripts.jsとの処理の共通化のためです。

	chrome.runtime.sendMessage({method: "getOptions"}, function(response) {
		var tabcount = response.fso_tabcount;
		update_form_tabcount(tabcount);
	});

background.jsの変更

options.jsから呼び出されるsetOptionsの処理を新設します。これまで設定値の保存に使っていたlocalStorageが使えなくなったのでchrome.storage.localに書き換えます。

chrome.storage.localは処理が非同期なのではまりやすいです。またchrome.runtime.onMessage.addListener内の処理で最後に「return true」を追加しないとうまくいきませんでした。

var FSO_TABCOUNT_DEF = 8;

function normalized_fso_tabcount(raw_value) {
    var tabcount = parseInt(raw_value);
    if (isNaN(tabcount) || tabcount <= 0 || tabcount > 20) {
        //エラーの場合は規定値
        tabcount = FSO_TABCOUNT_DEF;
    }
    //数値型
    return tabcount;
}


chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getOptions") {
	    var raw_tabcount = null;
	    chrome.storage.local.get("fso_tabcount", function (value) {
	        raw_tabcount = value.fso_tabcount;
            var tabcount = normalized_fso_tabcount(raw_tabcount);
            sendResponse({fso_tabcount: tabcount});    
	    });
        return true;
    } else if (request.method == "setOptions") {
        var tabcount = normalized_fso_tabcount(request.tabcount);
        chrome.storage.local.set({"fso_tabcount": tabcount} , function () {
            sendResponse({farewell: "goodbye"});
//            chrome.storage.local.get("fso_tabcount", function (value) {
//                console.log("get=" + value.fso_tabcount);
//            }); 
        });
        return true;
    } else {
        sendResponse({});
        return true;
    }
});