Chrome拡張でのstorageの挙動

登録可能な仕組みがよくわからないところがありましたので、まとめてみました。
Manifest V3で確認しています。
2024/12/15での動作です。

設定

次のような内容が設定できます。

    (async () => {
        const dataTable = { textValue: 'abcd', intValue: 1234 };
        const optionTable = { userName: 'name', age: 30 };
        const keyList = ['one' , 'two', 'three'];
        const numList = [1 , 2, 3];

        await chrome.storage.local.set({dataTable, optionTable, keyList, numList});
        console.log("set!");
    })();

取得

以下のコードで取得できます。

    (async () => {
        const dataTable = await chrome.storage.local.get('dataTable');
        const optionTable = await chrome.storage.local.get('optionTable');
        const keyList = await chrome.storage.local.get('keyList');
        const numList = await chrome.storage.local.get('numList');
        console.log("get!", dataTable, optionTable, keyList, numList);
    })();

取得結果

上書き

一部の値を上書きすることができます。

        await chrome.storage.local.set({dataTable:null});
        console.log("clear!");

取得結果(dataTableのみが上書きされている)

辞書の登録と取得

次のような辞書も値として登録できます。

    (async () => {
        const keyToDict = {
            '2001' : {
                title: 'タイトル1',
                count: 5,
                star: 10
            },
            '2025' : {
                title: 'タイトル2',
                count: 40,
                star: 50
            },
            '203' : {
                title: 'タイトル3',
                count: 80,
                star: 23
            },
        };
        await chrome.storage.local.set({keyToDict});
        console.log("set keyToDict!");
    })();

取得コード

    (async () => {
        const keyToDict = await chrome.storage.local.get('keyToDict');
        console.log("get keyToDict!", keyToDict);
    })();

結果