Why my extension sends duplicates on request in geometric progression?

Question

I've created extension that makes some JSON request & send it to some receiver. My problem is: Open popup window After it closing, extensions sends 1 request

Open it on the same page again, and extension will send 2 requests

Open again, 4 requests

Open again, 8 requests

In each uses of popup, extension will be duplicate outgoing data in geometric progression.

Why that happens?

From the panel I'm send addnewurl to the port:

    AddDialog.port.on("addnewurl", function (data) {
{
AddDialog  is my popup
here It handle port messages aftre popup is closed(hidded)
}
        var http = require("sdk/request").Request;
        var req = CreateRequest("add_url", {});

        req.params = {...};

        var sreq = encodeURIComponent(JSON.stringify(req));
        count += 1; //Global counter, u will see it in video
        console.log('count = '+count);

        var cfg = {
            url : getRequestURL(),
            contentType : "text/html",
            content : sreq,
            onComplete : function (response) {
                var data = {
                    code : response.status,
                    body : response.json
                };
                AddDialog.port.emit("addnewurldone", data);
            }
        };

        http(cfg).post();
    });

For more sense I've created a AVI video record of that. See it here: https://dl.dropboxusercontent.com/u/86175609/Project002.avi

1.6 MB

How to resolve that?

ADDED by request more info

That function emit addnewurl:

function AddNewURL() {
    var node = $("#Tree").dynatree("getActiveNode");
    if (node == null) {
        $("#ServerStatus").text(LocalizedStr.Status_NoGroupSelected);
        $("#ServerStatus").css("color", "red");
        return;
    };

    var nkey = node.data.key;
    var aImg = null;
    var data = {
        ownerId : nkey,
        name : $("#LinkTitle").val(),
        description : $("#LinkDesc").val(),
        url : $("#CurrentURL").val(),
        scrcapt:$("#ScrCaptureCB :selected").val()
    };

    $("#load").css("display", "inline");
    $("#ServerStatus").text(LocalizedStr.Status_AddURL);
    self.port.emit("addnewurl", data);
};

and it calls by button:

self.port.on("showme", function onShow(data) {
....

  document.querySelector('#BtnOk').addEventListener('click', function () {
      AddNewURL();
  });

...
});

"swomme" goes from here(main.js):

AddDialog.on("show", function () {
  count = 0;
  AddDialog.port.emit("showme", locTbl);
});

function addToolbarButton() {
  var enumerator = mediator.getEnumerator("navigator:browser");
  while (enumerator.hasMoreElements()) {
      var document = enumerator.getNext().document;
      var navBar = document.getElementById('nav-bar');
      if (!navBar) {
          return;
      }
      var btn = document.createElement('toolbarbutton');
      btn.setAttribute('id', cBtnId);
      btn.setAttribute('type', 'button');
      btn.setAttribute('class', 'FLAToolButton');
      btn.setAttribute('image', data.url('icons/Add.png'));
      btn.setAttribute('orient', 'horizontal');
      btn.setAttribute('label', loc("Main_ContextMenu"));
      btn.addEventListener('click', function () {
          AddDialog.show();
      }, false)
      navBar.appendChild(btn);
  }
}

Answer 1

I think the problem is here

document.querySelector('#BtnOk').addEventListener('click', function () {
  AddNewURL();
});

If you are running AddDialog.port.emit("showme", locTbl); when you click your toolbar button then you're adding a click listener to #BtnOk every time as well.

On the first toolbar click it will have one click listener, on the second click two, and so on. You should remove the above code from that function and only run it once.