将多个变量传递给内容脚本 chrome答案

【问题标题】：Pass multiple variables to content script chrome将多个变量传递给内容脚本 chrome
【发布时间】：2012-12-10 13:44:20
【问题描述】：

我正在编写我的第一个 chrome 扩展程序，我是几个小时前才开始的。当它被硬编码时，一切都运行良好。本质上，我正在填写一份 8 页的表格。表单的每一页对应一个单独的内容脚本。内容脚本过去看起来像这样：（查找字段有点困难，因为它们不是标准的，但我并不担心......那部分有效）

var first_name = 'John';
var last_name = 'Doe';
...
...
document.getElementById('first_name').value = first_name;
document.getElementById('last_name').value = last_name;

这很好用（对我来说），但我想将它分发给几个人，他们都不会/可以使用源代码中的扩展，直接编辑变量。所以我制作了一个“选项”页面，以此为例： https://developer.chrome.com/trunk/extensions/options.html

选项页面是要填写的表格的模型，每个用户都可以在此处输入他们的默认值。我的 save_options() 函数基本上可以（伪代码）：

foreach(fields as field) {
    localStorage[field] = document.getElement....(field);
}

这很好用。它可以正确保存，显示存储的值等。

当我尝试从内容脚本访问变量时，问题就出现了。根据我的阅读，这不能（直接）完成，网上有各种方法可以展示如何做到这一点。我想做这样的事情（内容脚本）：

var first_name = localStorage["first_name"];
var last_name = localStorage["last_name"];
...
...
document.getElementById('first_name').value = first_name;
document.getElementById('last_name').value = last_name;

我的问题是：

1) 对于那些处理过 Chrome 扩展程序/localstorage/chrome.storage/etc 的人，有没有“最好”的方法来做到这一点？

2) 设置所有变量名称/值的最有效方法是什么？我更喜欢循环（如上）而不是使用单独的请求设置每个字段。我平均每页有 10 个字段。

（我可能会使用一个冗长而凌乱的http://developer.chrome.com/extensions/messaging.html，但我希望有一个更高效/可扩展/优雅的解决方案）

感谢任何输入！

【问题讨论】：

据我所知，内容脚本无法访问 localStorage（沙盒）。我错过了什么吗？
哦好吧，如果是这样的话，你可以通过message passing获取东西到后台脚本。
chrome.extension.sendMessage({ greeting: "hello" }, function(response) { console.log(response.farewell); });
edit.. 实际上，我想我已经掌握了窍门......谢谢！

标签： javascript jquery google-chrome-extension local-storage

【解决方案1】：

一种解决方案是使用您提到的消息传递。

另一个（我认为更好）解决方案是chrome.storage API（有关更多信息，请参阅http://developer.chrome.com/extensions/storage.html）。 Storage API 可以直接在后台页面和内容脚本中使用，如果您将值存储在chrome.storage.sync 下，Chrome 将自动同步。与 localStorage 唯一的本质区别是这个 API 是异步的，所以你必须编写类似的代码

chrome.storage.sync.get(['first_name', 'last_name'], function(items){
    document.getElementById('first_name').value = items['first_name'];
    document.getElementById('last_name').value = items['last_name'];
});

【讨论】：