Question

我有一个扩展程序，我暂时调用“multi-tab”来在多个标签页中打开一组给定的URL。对于我个人使用，即打开我正在跟踪的股票的几个股票图表，我刚刚对URL进行了硬编码。但在我看来，这是其他人可能觉得有用的东西，而我在现有的扩展中找不到它。但是为了使它对其他人有用，我需要有一些界面来编辑你想要打开的URL。这是我到目前为止的Github：https://github.com/aisthesis/multi-tab

到目前为止，行为是：您点击扩展程序的图标，然后只打开标签页。我想尽量保持这一点。我也尝试使用带有“Ctrl + Shift + E”等热键的“命令”API来打开某种编辑器界面（我认为Stack Exchange问题监视器扩展是一个很好的模型），但我无法让它工作，可能是因为我没有后台弹出键来绑定键组合。我也尝试使用多功能框，在你输入“multi-tab-edit”之后会出现编辑菜单。虽然我可以让多功能框版本工作，但它似乎不是非常用户友好。我认为理想的是按住Ctrl键并单击扩展部分中的图标，打开一个用于编辑URL的对话框，但我没有看到API如何支持它。如果您能就如何实现这一目标给我任何指示，请回复！

另一种选择是在您单击图标时打开弹出窗口，然后您可以选择是否要打开当前设置的URL或编辑这些URL。我不喜欢这样，因为它在打开标签的基本用例中创建了一个额外的步骤。

有没有人知道如何以用户友好的方式实现“编辑”界面并留下它以便只需点击图标就可以打开各种标签？或者只需在控制点击图标时打开编辑器就可以了吗？

Answer 1

您只需设置一个option page，其中包含一堆HTML输入元素，您的用户可以在其中输入要打开的网址：

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

然后将所有这些URL保存到本地存储：

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

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

1 个答案: