为扩展打开多个选项卡编辑界面

Question

我有一个扩展名，我临时调用“多选项卡”打开多个选项卡中的给定的一组URL。对于我个人的使用，即为我正在跟踪的股票打开几个股票图表，我刚刚对网址进行了硬编码。但在我看来，这是其他人可能会觉得有用的东西，我无法在现有的扩展中找到它。但为了让其他人有用，我需要有某种界面来编辑要打开的URL。这里是我到目前为止的Github：https://github.com/aisthesis/multi-tab

到目前为止的行为是：你点击扩展的图标，它只是打开标签。我想尽可能保持简单。我也尝试使用带有“Ctrl + Shift + E”等热键的“commands”API来打开某种编辑器界面（我认为Stack Exchange问​​题监视器扩展是一个很好的模型），但是我不能'让这个工作，可能是因为我没有一个背景弹出键组合绑定到。我也尝试使用多功能框，在您键入“多选项卡编辑”或类似的东西后，编辑菜单就会出现。虽然我可以使用多功能框架版本，但它看起来不太方便用户。我认为最理想的是在按住Ctrl的同时点击扩展部分的图标打开一个对话框来编辑你的URL，但我没有看到API如何支持。请回应，如果你能给我任何指示如何做到这一点！

另一种方法是在点击图标后打开弹出窗口，然后选择是否打开当前设置的网址或编辑这些网址。我不喜欢这样做，因为它只是在打开选项卡的基本用例中创建了一个额外的步骤。

有没有人有一个想法，如何可以实现一个用户友好的方式“编辑”界面，让它只需点击图标只是使各个标签打开？或者只有当您按住图标才能打开编辑器？

Answer 1

你可以简单地设置一个option page，带着一帮HTML输入元素，在这里用户可以输入网址，他们想开：

<input type="text" name="url1" value="" /> 
<input type="text" name="url2" value="" /> 
<input id="save" type="button" value="Save" /> 

然后保存所有这些网址到本地存储：

$('#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() {}); 
}); 

最后，你会得到一个点击所有这些网址，在浏览器上操作：

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