FF extension. how to show data extracted in a javascript function to the dropdown menu in the browser (in the same popup on which the function is implemented)

Question

I am developing a ff extension. On one menupopup, the onpopupshowing calls a javascript function. Tha JS function extracts a list of names. Now these names have to be displayed in the same popup.

How can i get this? Basically i will need to pass the data (just as we use beans in java) to the browser from the JS function. The data can change everytime the popup is called.

Answer 1

You need to modify the DOM rapresenting your menupopup. For example:

<menulist>
  <menupopup id="myMenuPopup">
    <menuitem id="firstItem" label="Mozilla" value="http://mozilla.org"/&gt;
    <menuitem id="secondItem" label="Slashdot" value="http://slashdot.org"/&gt;
    <menuitem id="thirdItem" label="Sourceforge" value="http://sf.net"/&gt;
  </menupopup>
</menulist>

Now if you want to add another item:

var myMenuPopup = document.getElementById("myMenuPopup");
var newItem = document.createElement("menuitem");
newItem.setAttribute("id", "anotherItem");
myMenuPopup.appendChild(newItem);

If you want to remove an item:

var itemToRemove = myMenuPopup.getElementById("anotherItem");
myMenuPopup.appendChild(itemToRemove);

Here you can find much more:

https://developer.mozilla.org/en/Dynamically_modifying_XUL-based_user_interface

Edit:

I assume thet your function returns an array of names:

var nameLists = yourFunction();

for (var i=0; i<nameList.length; i++){
  var newItem = document.createElement("menuitem");
  newItem.setAttribute("label", nameList[i]);
  newItem.setAttribute("id", "item" + i);
  myMenuPopup.appendChild(newItem);
}

I think is better if you call the function that make items before user click on menupopup, not on the event invocation, because if you have many items it may takes a little to construct the items list.