如何使用Chrome的存储API从Web扩展中检索，更改然后保存用户数据？

Question

我正在编写我的第一个Web扩展程序，该扩展程序基本上会在给定的时间内阻止给定的网站列表。用户可以一次进入一个网站被阻止。当用户添加新网站时，我想检索当前列表，将新网站添加到列表中，然后使用Chrome的存储API进行保存。问题是我似乎无法实际存储数据，也从未保存过数据。我该如何解决？

这是我的options.js文件

document.addEventListener('DOMContentLoaded', documentEvents, false);

function myAction(input) {
    console.log('Input entered: ' + input.value);
}

function saveList(input) {
    var data;
    chrome.storage.local.get('sites', function(result) {
        console.log('Stored value is ' + result.sites);
        result.sites += input;
        data += input.value;
    })
    chrome.storage.local.set({sites: data}, function() {
        console.log('New stored value is ' + data);
    })
}

function documentEvents() {
    document.getElementById('add').addEventListener('click', 
    function() {
        myAction(document.getElementById('site'));
        saveList(document.getElementById('site'));
    });
}

我的background.js文件的一部分

chrome.runtime.onInstalled.addListener(function() {
   var list = "";
   chrome.storage.local.set({sites: list}, function() {
      console.log('List of websits has been initalized');
   });