Trying to add websites to localstorage in chrome extension options page

Question

I want to be able to add websites to a chrome extension options page. So I have a text box with a "save" button and I want to be able to save multiple websites with the ability to edit or remove them later. Like this:

Enter URL: |_________| |_save_|

Edit Remove - www.google.com
Edit Remove - www.msn.com
Edit Remove - www.yahoo.com

Once you enter a website and click save, it will add it to the list of websites already there. I've been trying to scavenge the internet to try to figure out how to accomplish this, but I just don't know enough about it to complete it.

Answer 1

I'd recommend chrome.storage instead of localStorage: http://developer.chrome.com/extensions/storage.html

It's fantastic. You can even choose to store data online in your Google profile (100KB max). Otherwise offline (100MB max, I think).

API is super simple too:

chrome.storage.local.get('websites', function(items) {
  console.log('websites:', items.websites);
});

Unlike localStorage, it's async, so you'll be using callbacks. But it's lightning fast, so the UI won't notice.

What I'd do is not keep a virtual record of your storage, but keep it in HTML and read from/write to that as necessary:

• btnAdd adds a new LI to the list and then saves the list
• btnEdit fills the textfield and removes the LI from the list (no save) (saving via btnAdd)
• btnDelete removes the LI from the list and saves the list
• save = get items from list as array and save to storage
• init = load items from storage and fill list

http://jsfiddle.net/rudiedirkx/Zbpmx/

I'm assuming jQuery since it's popular. It's not necessary of course.

If you're having problems with this already, a Chrome extension will be insanely difficult.