从“选项”弹出窗口中选择一个值，然后将其保存到 Chrome.storage，以便在后台脚本中用作值

Selecting a value from Options popup and Saving it to Chrome.storage for use as value in background script

本文关键字：Chrome storage 保存 脚本 后台 然后 选项 选择 窗口 一个      更新时间：2023-09-26

...我有一个来自维基来源的谷歌域名列表，我将把它作为值添加到HTML选择标签中，如下所示：

选项.html/弹出窗口.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上恢复它。

更新：我修改了一个示例来执行存储和检索的基础知识：

选项.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，如下所示：

背景.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 的第二个日志。

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

API 是异步的。因此，您应该使用回调(和回调链(来使用这些值。那个，还是承诺。回调示例：

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});
  });
}
相关文章：