Question

In order to show the input field for a cc: adress I am trying to automatically click the “Add Cc” span in gmail from a chrome extension.

The span looks like this:

<span id=":25j" class="el" role="link" tabindex="2">Add Cc</span>

It has no event listeners/onclick defined as far as I can tell.

I tried

   $('iframe').each(function() {
    $('span:contains("Add Cc")',this.contentDocument).first().click();
   }

and

   $('iframe').each(function() {
     $('span:contains("Add Cc")').first().trigger( jQuery.Event("click"));
   }

UPDATE: in fact the spans are inside an iframe.

Can somebody give me a pointer how to trigger a click on these spans?

Is there some way I could observe/record what events get fired when I manually click on the link?

UPDATE: Thanks @veeTrain for pointing out how to set breakpoints in Chrome Dev Tools

Answer 1

If you look at the DOM you will see that the input is already there. You should be able to get it to show up with:

jQuery('textarea[name=cc]').parent().parent().show() 

However it seems as if I can’t test this from my console due to the way that the page is setup. They use iframes, etc. Maybe you CAN get to it from a plugin?

You might also try to find a better way to get at the parent element rather than using parent().parent(), I would, but I can’t test this out.