爲擴展打開多個選項卡編輯界面

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