chrome.storage.local.get итерация одновременно с помощью ключей и элементов

Question

Прежде всего, извините, если исходный вопрос недостаточно ясен, Я изо всех сил пытался определить, какая именно проблема у меня возникла. Я делаю расширение Chrome, которое показывает список пустых полей ввода. Я хотел бы сохранить значение, назначенное в этих полях ввода, используя метод chrome.storage.set, и извлечь указанные значения в их исходные поля ввода при повторном открытии всплывающего окна.

До сих пор мне удавалось локально хранить значения полей, используя цикл, назначая каждому значению ключ в зависимости от порядка его итерации.

HTML

<input type="text" class="random" value="">
<input type="text" class="random" value="">
<input type="text" class="random" value="">
<button id="4">save</button>

JS

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("4").addEventListener("click", save);
});
function save() {
  var id = document.querySelectorAll("input[type='text']");
  for (i = 0; i < id.length; i++) {
  var inputValue= id[i].value;
    if (id.length > 0) {
    var key = "key"+i;
    chrome.storage.local.set({[key]: inputValue});
    alert(key)}
  }
}

Проблема возникает, когда я пытаюсь получить каждое значение и вернуть его в исходное поле ввода. Мое решение состояло в том, чтобы создать еще один цикл, который повторяет поля ввода при извлечении соответствующих ключей, но не может заставить его работать.

window.onload = () => {
const id = document.querySelectorAll("input[type='text']");
    for (i = 0; i < id.length; i++) {
        if (id.length > 0) {
         var key = "key"+i;
        chrome.storage.local.get([key], (data) => {
            if (data.key) { 
            id[i].value = data.key; 
    }
        });
    }
}}

Как правильно определить переменные? Есть ли какие-либо другие способы достижения того же результата?