Safe way to interact with page's DOM from Overlay JS

I have a Firefox extension that detects whenever a page loads in the browser and returns its window and document. I want to attach some events (that launch functions in my addon's overlay) to elements in the page, but I don't kn开发者_开发百科ow how to do this in a way that's safe.

Here's a code sample:

var myExt = {
    onInit: function(){
        var appcontent = document.getElementById("appcontent");
        if(appcontent){
            appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
        }
    },

    onPageLoad: function(e){
        var doc = e.originalTarget;
        var win = doc.defaultView;

        doc.getElementById("search").focus = function(){
            /* ... 'Some privelliged code here' - unsafe? ... */
        };
    }
};

So can anyone tell me what's the safe way to add these events/interact with the page's DOM?

Thanks in advance!

I think that you want to listen to the focus event, not replace the focus() function:

doc.getElementById("search").addEventListener("focus", function(event)
{
  if (!event.isTrusted)
    return;

  ...
}, false);

Usually, there is fairly little that can go wrong here because you are not accessing the page directly - there is already a security layer (which is also why replacing the focus() method will have no effect). You can also make sure that you only act on "real" events and not events that have been generated by the webpage, you check event.isTrusted for that like in the example code. But as long as you don't unwrap objects or run code that you got from the website, you should be safe.