Firefox WebExtensions JavaScript API の tabsからそのタブが表示しているDOMツリーを取得したい

Question

コンテキストメニューにあるメニューをクリックしたあと、隣に新しいタブを開き（現在は同じURLを指定）そのタブが表示しているページのwindow(ここではWebExtensionsAPIのwindowsとは違うものだと思います。)を取得したいのですが、どうすれば実現できるかがわかりません。ご存知の方いらっしゃいましたら教えていただけないでしょうか。詳細はソースにて示しました。

main.js

// メニューの作成
browser.menus.create({
  id: "myId",
  title: "myAddon",
  contexts: ["all"]
});

// メニューが押されたときのハンドラを登録
browser.menus.onClicked.addListener(function(info, tab){
  switch(info.menuItemId){
    case "myId":
      browser.tabs.create({
        active: true,
        url: tab.url,
        index: tab.index + 1,
      }).then(function(tab){
        // ----- 質問に対応する処理はココ ------------
        // ここでtabオブジェクトからそのタブに対応するwindowを取得したい
        // -------------------------------------------
        window.document.addEventListener("DOMContentLoaded", function(event){
          //ここでDOMツリーの操作
        });
      });
    break;
  }
});

再現しやすいようにpackage.jsonも載せておきます。

{
  "manifest_version": 2,
  "name": "myAddon",
  "version": "1.0",

  "description": "this is my addon.",
  "background": {
    "scripts": ["main.js"]
  },
  "permissions": [
    "menus",
    "tabs"
  ]
}

Answer 1

よくよく調べると、コンテンツスクリプト上でしかDOMを操作することができないようで、コンテンツスクリプトとバックグラウンドでの通信が必要になるようです。DOMツリーが生成されたあとにコンテンツスクリプトがロードされていそう（確証はありません）なので、コンテンツスクリプトからバックグラウンドスクリプトにリクエストを送るような仕組みにしてバックグラウンドからのDOMの操作を間接的に行わせました。詳細はスクリプトのコメントにて書いてあります。

まず、送信先のページに対応するコンテンツスクリプトを生成します。
その内容もmanifest.jsonにも追加します。（送信先のページがロードされたときにコンテンツスクリプトが実行されるように設定することが必要。）

"content_scripts": [
  {
    "matches": ["http://target.example.com/*"],
    "js": ["target.js"]
  }
]

// target.js

// DOMの操作
function injectUrl(url){
  var input = document.getElementById('hoge');
  input.value = url;
}

// バックグラウンドスクリプトからレスポンスが来たときの処理
function handleResponse(res){
  injectUrl(res.url);
}

// 生成時にDOMが構築完了しているようなので、
// タイミングを気にせずバックグラウンドにリクエストを送信する。
// その後Promiseでつないでレスポンスを待機
var sending = browser.runtime.sendMessage({});
sending.then(handleResponse);

//main.js

browser.menus.create({
  id: "myId",
  title: "myAddon",
  contexts: ["all"]
});

var urlData;  // イベントリスナが使えるようにグローバル変数を設定

// リクエストが来たらコンテキストメニューが押されたタブのURLを返すサーバーのような役目をここで担う。
browser.runtime.onMessage.addListener(function(req, sender, sendResponse){
  sendResponse(urlData);
});


// ここは質問時点で想定していることとほぼ同じ
var onClicked = function(info, clickedTab){
  if(info.menuItemId !== "myId"){
    return;
  }
  urlData = { //ここでグローバル変数に必要な変数を設定
    "url": clickedTab.url,
  };
  browser.tabs.create({
    active: true,
    url: "http://target.example.com/",
    index: clickedTab.index + 1,
  });
};

browser.menus.onClicked.addListener(onClicked);