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.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'];
});

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

1 个答案: