Edit interface for extension for opening multiple tabs - google-chrome-extension

Question

I have an extension that I'm provisionally calling "multi-tab" for opening a given set of URLs in multiple tabs. For my personal use, which is to open several stock charts for stocks I'm tracking, I've just hard-coded the URLs. But it seems to me like this is something that others might find useful, and I can't find it among existing extensions. But in order to make it useful to others, I need to have some kind of interface for editing the URLs that you want to open. Here's the Github of what I have so far: https://github.com/aisthesis/multi-tab
So far the behavior is: You click on the icon for the extension, and it just opens the tabs. I'd like to keep that as simple as possible. I also tried using the "commands" API with a hot-key like "Ctrl+Shift+E" for opening some kind of editor interface (for which I think the Stack Exchange question monitor extension is a good model), but I couldn't get that to work, probably because I don't have a background popup for the key combo to bind to. I also tried using an omnibox where the editing menu would come up after you type "multi-tab-edit " or something like that. While I could get the omnibox version to work, but it doesn't seem very user-friendly. What I think would be ideal would be to have Ctrl-click on the icon in the extensions section open a dialog for editing your URLs, but I'm not seeing how the APIs would support that. Please respond if you can give me any pointers on how to make that happen!
Another option would be to open a popup when you click on the icon that would then allow you to choose whether you want to open the URLs you have currently set or to edit those URLs. I don't like that because it creates an additional step in the base use-case of just opening the tabs.
Does anyone have an idea for how one might implement an "editing" interface in a user-friendly way and leaving it so that just clicking on the icon just makes the various tabs open? Or is it possible to open an editor simply when you control-click on the icon?

Answer 1

You can simply set up an option page, with a bunch of HTML input elements, where your users can input the URLs they want to open:
<input type="text" name="url1" value="" />
<input type="text" name="url2" value="" />
<input id="save" type="button" value="Save" />
Then you save all those URLs to the local storage:
$('#save').click(function()
{
var urls = [];
$( "input[type=text]" ).each(function( index )
{
urls.push($(this).val());
});
var items = { "urls": urls };
chrome.storage.local.set(items, function() {});
});
Finally, you get all those URLs on a click on your browser action:
chrome.browserAction.onClicked.addListener(function(tab)
{
chrome.storage.local.get("urls", function(items)
{
var urls = items.urls;
for (var i = 0; i < urls.length; i++)
{
chrome.tabs.create({ url: urls[i]});
}
});
});