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

Question

我正在编写我的第一个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 /等的人,是否有"最佳"方法？

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

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

任何输入都表示赞赏!

Answer 1

一种解决方案是使用Messaging Passing,您已经提到过.

另一个(更好的,我认为)解决方案是chrome.storageAPI(有关更多信息,请参阅http://developer.chrome.com/extensions/storage.html).Storage API可以直接在后台页面和内容脚本中使用,如果存储值,Chrome将自动同步chrome.storage.sync.与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'];
});