Question

I’m developing a firefox extension and i want to simulate :hover state of an element like firebug.

in my-script-file.js i will emit mousehover using self.port with an element object eg $('#myDiv')[0] note that [0] is to get DOM element not a jquery object.

My problem is this code wont work and will raise an error on domUtil.setContentState(step.element, 0x04); line.
The error is :

I went in firefox documentation site for setContentState() definition and i notited my element must be an instance of nsIDOMElement my question here is how to convert my selected element to nsIDOMElement object.

Or actually my question here is how to force :hover on an element which is selected by document.getElementById or jquery $() function?

I read firebug source code and come up with this snippet:

var {Cc, Ci, Cr} = require("chrome");
var domUtil = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);

exports.main = function() {
    var attachToTab = function(tab)
    {
        if(currentWorker)
            currentWorker.destroy();

        currentWorker = tab.attach({
            contentScriptFile: [data.url("jquery.js"), data.url("my-script-file.js")]
        });

        currentWorker.port.on('mousehover', function(element){
                console.log('doing setContentState :hover');
                domUtil.setContentState(element, 0x04);
        });
    }

    require("widget").Widget({
        id: "MyAddonBtn",
        label: "Sample",
        contentURL: data.url("images/addon.ico"),
        onClick: function(){
            attachToTab(tabs.activeTab);
        }
    });

}

Answer 1

It’s a problem with the way the Add-on SDK works. Content scripts can access page elements but they don’t have advanced privileges (which are required to use inIDOMUtils). Extension scripts have advanced privileges but they normally cannot access page elements. And – no, sending a page element in a message will not work, messages only accept objects that can be JSONified.

The only solution is to break out of the SDK framework and access the page directly from the extension script. Something like this:

var attachToTab = function()
{
  var browserWindow = require("window-utils").activeBrowserWindow;
  if (browserWindow && "gBrowser" in browserWindow)
  {
    var doc = browserWindow.gBrowser.contentDocument;
    var element = doc.getElementById("foo");
    if (element)
      domUtil.setContentState(element, 0x04);
  }
};

window-utils package is low-level API and pretty badly documented (e.g. activeBrowserWindow property isn’t in the documentation) – use at your own risk. But it gives to direct access to the current browser window. Once you are there, gBrowser variable gives you the <xul:tabbrowser> element.