How to access elements inside a browser element (for example the abContactsPanel sidebar)

Thunderbird Add-ons
#1

The contact side bar in the message compose window in Thunderbird, which can be enabled/disabled via F9 is inside a browser element. Its URL is loaded by setting its src attribute:

https://dxr.mozilla.org/comm-central/source/mail/components/compose/content/MsgComposeCommands.js#6457

That load is not seen by the windowlisteners “onOpenWindow” event, so the standard way to inject UI elements after load does not work, because I do not get notified. I also do not get its window element.

I can however use a MutationObserver on the sidebar container itself, the browser element and get notified after the src attribute has been changed to know, when the sidebar has been loaded.

But still I am not able to access any element below the browser element.

let contactpanel = window.document.getElementById("sidebar");

let test1 = contactpanel.getElementById("peopleSearchInput")
let test2 = contactpanel.document.getElementById("peopleSearchInput")

Both test1 and test2 are undefined. Any idea on how to access these elements?

John

#2

I was able to solve part of the question. The window object of the browser element can be obtained by

let browserWindow = window.document.getElementById("sidebar").contentWindow.wrappedJSObject;

and I was able to add Eventlisteners to elements inside that window

browserWindow .document.getElementById("peopleSearchInput").addEventListener("input", doSomething(), false);

However, I was not able to attach an onload listener to browserWindow (the browser element):

browserWindow.addEventListener("load", init(), false);

But init() is never called.

I assume my onload listener is removed/deleted, when a new URL is loaded in the browser element, because this creates a new window object.

How can I get notified, after a new URL has been loaded?