Выбор значения из всплывающего окна «Параметры» и сохранение его в Chrome.storage для использования в качестве значения в фоновом скрипте

Question

... У меня есть список доменов Google из источника wiki, который я буду добавлять в качестве значений в тег HTML select следующим образом:

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 и видит этот список. Они выбирают один и сохраняются в 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», чтобы построить URL-адрес следующим образом:

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 

} 

Консоль распечатывает undefined для второго журнала 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}); 
    }); 
}