Help with ThunderBird Add-On Development: Creating a drag and drop zone

I’m a newbie developer who wrote a basic python script to filter between ham and spam emails. I wanted to integrate this with an add-on for thunderbird but was really struggling to make progress.

In particular, I wanted to modify the layout of thunderbird to have a custom box, that I intended to make into a drag and drop zone for pulling emails into. Subsequently I intended to figure out how to process the emails from there.

My current .xul file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"

<!DOCTYPE overlay >
<overlay id="custombutton-overlay"

<script type="application/javascript"

<!-- Thunderbird mail -->
<hbox id="tabmail">
  <tabmail id="tabmail"/>
    <tabpanels id="tabpanelcontainer">
      <box id="mailContent">
        <box id="messengerBox">
          <vbox id="customPaneBox" minwidth="125" width="195" persist="width"></vbox>

<!-- button details -->


I’ve tried several iterations of this but have never managed to make the physical window appear. Any help would be greatly appreciated.

EDIT 1: I managed to also implement a custom-button following a tutorial I found on Mozilla’s help pages but I was unable to turn the button itself into a dropzone, hence my attempt to create this custom panel.

EDIT 2: If anyone could share on how to open a window in a browser that would be great too. Using the method opens a Thunderbird compose window, but if i can open a custom html window in a browser I can try to work with that as the drag and drop zone instead.

You might ask on this recently-established forum:

I don’t know the status of that forum compared to this one, but that one seems to be more active.