Pass multiple variables to content script chrome

Question

I'm writing my first chrome extension, and I just started this a few hours ago. Everything worked well when it was hard-coded. Essentially, I'm filling an 8-page form. Each page of the form corresponds to a separate content script. The content scripts used to look something like this: (finding the fields is a bit more difficult, since they're not standard, but I'm not worried about that..that part works)

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

This worked fine (for me), but I want to distribute it to a few people, none of whom would/could use the extension from source code, editing the variables directly. So I made an 'Options' page, using this as an example: https://developer.chrome.com/trunk/extensions/options.html

The options page is a mockup of the form to be filled, and each user can enter their defaults here. My save_options() function basically does (pseudocode):

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

This works fine. It saves properly, displays the stored values, etc.

The problem comes when I try to access the variables from the content script. From what I've read, this can't be done (directly), and there are various methods online that show how to do this. I want to do something like this (content script):

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;

My questions are:

1) For those of you who have dealt with Chrome extensions/localstorage/chrome.storage/etc, is there a 'best' way to do this?

2) What is the most efficient way to set all the variable names/values? I'd prefer a loop (like above) over setting each field with a separate request. I'm averaging 10 fields per page.

(I could probably use a long, messy form of http://developer.chrome.com/extensions/messaging.html, but I'm hoping for a more efficient/extensible/elegant solution)

Any input is appreciated!

Answer 1

One solution is to use Messaging Passing, which you've mentioned.

Another (better, I think) solution is chrome.storage API (See http://developer.chrome.com/extensions/storage.html for more information). The Storage API can be directly used in both background pages and content scripts and Chrome will automatically synced if you store values under chrome.storage.sync. The only substantial difference from localStorage is that this API is asynchronous, so you have to write you code like

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