Firefox WebExtensions：背景ページを一意のタブとして開くにはどうすればよいですか？

Question

質問：Firefox WebExtensionsでは、任意の背景の由来から、どのようにしてタブ内の任意のページを一意に開くことができますか？

要件：

1）任意の背景の起源。最初の使用例は、browser_action contextMenusです。しかし、技術はポップアップ、オプション、または任意のカスタムバックグラウンドスクリプトから作業する必要があります。コンテンツページには関係ありません。しかし、その技術が彼らのためにも働くのであれば、素晴らしい。

2）タブで任意のページを開きます。私の最初の使用はオプションページですが、テクニックは任意のバックグラウンドページ（オプション、ポップアップ、またはカスタムページ）で機能するはずです。

3）一意に開きます。初めての場合は、新しいタブで開きます。タブが以前に開かれている場合は、既存のタブにフォーカスし、重複するタブを作成しないでください。

4）タブを閉じると、以前に開いたタブIDへの参照が削除されていることを確認する必要があります。

私は自分の質問に1つの解決策で答えました。

ソリューションを改善できる場合は、教えてください。ありがとうございました。

質問が重複している場合は、必要に応じてソリューションを削除して投稿します。

Answer 1

これは自分の質問に答えるためのもので、インラインでコメントしています。

この単純な例では、すべてのページャが最上位ディレクトリにあると想定していますが、これは任意で簡単に変更できます。

1） 'の.html'）なし（ページ名を保持するグローバルオブジェクトtabIDs：

は、本質的に、それは、4つの部分からなります。これを拡張子を含むフルパスに変更するか、ページ名を短い名前にして、パス名などの別のオプションを使用するようにテクニックを変更してください。

2）非同期機能新しい待ち受け機能の名前）をtabCreateとし、既に開いているかどうかを判断して、そのタブに切り替えるか、新しいタブを作成します。

3）onRemovedイベントハンドラは、タブが閉じられた後にtabIDsのクリーンアップを処理します（該当する場合）。

4）使用例、コンテキストメニュー項目から、デモの目的のためだけに、ここで、この質問には使用していませんが、別の質問の一部であり、そしていくつかのpageとpanelオプションを渡します。

background.js:

// tabID contexts 
//  global var to keep track of different tabs, 
//  i.e. options.html, popup.html and so on. 

var tabIDs = { 
    'options': null, 
    'popup': null, 
} 

// Requires Firefox 52.0+ to use async/await 
//  opts correspond to contexts above in tabIDs 
//  of the form { 'page': 'options' } or { 'page': 'popup' } 
//  note if using Node.js, this may require v7+ and --harmony_async_await 
async function tabCreate (opts) { 
    var tab; 

    if (tabIDs[ opts.page ] !== null) { 
     // should probably bring window to front first... oops 
     // .. 
     // switch to tab 
     tab = await browser.tabs.update(tabIDs[ opts.page ], { active: true }); 
    } else { 
     tab = await browser.tabs.create({ 
      'url': opts.page + '.html' 
     }); 

     tabIDs[ opts.page ] = tab.id; 
    } 

    console.log('**** opts.page = ' + opts.page + ', opts.tab = ' + opts.tab + ', tab.id = ' + tab.id); 
} 

// When tabs are closed, see if the tabID is in tabIDs, 
//  and if so, set it to null 
function tabRemove (tabID, removeInfo) { 
console.log('Closed TAB ' + tabID); 

    Object.keys(tabIDs).forEach(function(key, index) { 
     if (tabIDs[ key ] === tabID) { 
      tabIDs[ key ] = null; 
      return; 
     } 
    }); 
} 
browser.tabs.onRemoved.addListener(tabRemove); 

/* 
* Context Menus 
*/ 

browser.contextMenus.removeAll(); 

browser.contextMenus.create({ 
    title: 'My Web Extension', 
    contexts: [ 'browser_action' ], 
}); 

browser.contextMenus.create({ 
    title: 'Options', 
    contexts: [ 'browser_action' ], 
    onclick: myWebExt_Options 
}); 

function myWebExt_Options () { 
    tabCreate({ 
     'page': 'options', 
     'panel': 1, 
    }); 
} 

別のアプローチは、各ページにイベントリスナーを追加し、閉じたときに、バックbackground.jsにメッセージを送信するかもしれないが、それはほとんど、あるいはまったくとはるかに複雑なようです利益。