从选项弹出选择一个值并将其保存到Chrome.storage作为后台脚本中的值使用

Question

...我有一个来自wiki源的Google域列表，我将它作为值添加到HTML选择标记中如下：

options.html/popup.html

<select required='true' size='1'> 
<option value=".com">Default: USA</option> 
<option value=".co.za">South Africa</option> 
<option value=".de">Germany</option> 
<option value=".fr">France</option> 
<option value=".com.tw">Taiwan</option> 
<option value=".com.br">Brazil</option> 
</select> 

<div id="status"></div> 
<button id="save">Select Region</button> 

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

用户点击浏览器扩展程序图标，并看到该列表。他们选择一个并保存到chrome.storage，然后页面自动在DOMContentLoaded上恢复它。

更新：我已经修改为例做存储的基础知识和检索：

Option.js

// Saves options to chrome.storage 
function saveRegion() { 
    var userRegion = document.getElementById('regions').value; 
    chrome.storage.sync.set({ 
    userRegion: userRegion, 
    }, function() { 
    // Update status to let user know options were saved. 
    var status = document.getElementById('status'); 
    status.textContent = 'Options saved.'; 
console.log() 
    setTimeout(function() { 
     status.textContent = ''; 
    }, 750); 
    }); 
} 

// Restores select box state using the preferences 
// stored in chrome.storage. 

function restoreRegion() { 
    // Use default value = '.com' 
    chrome.storage.sync.get({ 
    userRegion: '.com', 
    }, function(items) { 
    document.getElementById('regions').value = items.userRegion; 
    }); 
} 

document.addEventListener('DOMContentLoaded', restoreRegion); 
document.getElementById('save').addEventListener('click', saveRegion); 

后台网页必须然后使用“myRegion”的储值建设网址如下：

background.js

function readRegion() { 
    // Use default value = '.com' 
    chrome.storage.sync.get({ 
    userRegion: '.com', 
    }, function(items) { 
    var myRegion = items.userRegion; 
    console.log(myRegion); 
    // Console prints out my saved value e.g .com.tw 
    }); 
} 

document.addEventListener('DOMContentLoaded', readRegion); 

    chrome.contextMenus.create({ 
     "title": "Web", // 
     "contexts":["selection"], 
     "onclick": IncognitoSearch 
    }); 

function IncognitoSearch(ocd) { 

    console.log(myRegion); 
    // Console prints out undefined 

    var contextSearch = 'http://www.google'+ myRegion +'/search?q=' + ocd.selectionText; 
    chrome.windows.create({"url": contextSearch, "incognito": true}); 

    console.log(contextSearch); 
    // Console prints out http://www.googleundefined/search?q=etcetera 

} 

控制台打印出未定义的MyRegion的第二个日志。

如何使用我检索的存储变量？

Answer 1

该API是异步的。因此，您应该使用回调（和回调链）来使用这些值。那还是Promises。回拨例如：

function readRegion(callback) { 
    // Use default value = '.com' 
    chrome.storage.sync.get({ 
    userRegion: '.com', 
    }, function(items) { 
    // The value is usable here.. 
    callback(items.userRegion); 
    }); 
    // But not here 
} 

function IncognitoSearch(ocd) { 
    readRegion(function(myRegion) { 
    var contextSearch = 'http://www.google'+ myRegion +'/search?q=' + ocd.selectionText; 
    chrome.windows.create({"url": contextSearch, "incognito": true}); 
    }); 
}