Question

我有一个具有多个下拉菜单的程序，并且将其作为chrome解压缩的扩展程序运行，但是重新打开应用程序后无法保存任何下拉菜单。我该如何实现？我已经尝试过一些解决方案，但是它们没有用。下拉列表采用表格格式。（注意：这不是我的全部代码，但为了简化起见，我仅包括了两个下拉列表）。谢谢！

getSomeValue()

Answer 1

将项目存储在chrome存储中

假设您保存用逗号分隔的项目

chrome.storage.sync.set({ items: 'item1,item2,item3,item4'});

使用以下方法获取它：

chrome.storage.sync.get('items', function(data) {
     var items = data.items.split(',');
     // items[0] => item1
     // items[1] => item2
});

Answer 2

我将详细说明如何保存和加载示例选项菜单，其中包含一个文本框和一个复选框。在您的示例中，您需要在保存中使用document.getElementById('master01dropdown').value。

设置

首先，在项目的根目录中创建一个文件options.html，其中包含您的表单。

接下来，请确保此选项页已在您的manifest.json中注册：

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

在options.html的{{1}}底部，包含一个JavaScript文件：

</body>

您的表单还应在ID为<script src="js/options.js"></script>的某处包含“保存”按钮：

save

保存

在<button id="save">Save</button>文件中，注册/js/options.js函数，以在单击保存按钮时运行：

save()

您的document.getElementById('save').addEventListener('click', save);函数应使用Chrome存储空间来保存表单中的每个元素。例如，保存文本框和复选框：

save()

正在加载

再次在您的function save() { var sitesToSave = document.getElementById('sites').value; var displayPopup = document.getElementById('popup').checked; chrome.storage.sync.set({ sites: sitesToSave, popup: displayPopup }, displaySavedMessage); }文件中，在加载表单时注册/js/options.js函数：

load()

现在再次使用Chrome存储空间，使用保存的值（并提供默认值）来设置这些表单域的字段，

document.addEventListener('DOMContentLoaded', load);

完成！现在可以保存和加载设置。

此答案中的所有代码均来自我编写的一个非常简单的example Chrome Extension，其中还附带了一个detailed tutorial。

如何在重新启动应用程序时保存多个下拉菜单？

2 个答案:

设置

保存

正在加载