Chrome extension: show hidden element and click it

Question

I am writing a chrome extension to grab some data from a web site I'm subscribed to (I am reasonably sure I can, I just want to recover the data I inserted myself). So far, a content script seems enough for the architecture of my extension. Now, if I have simple element like the following

<button class="button btn btn-default paginateItems">
   ...
</button>

I can easily find it (using jquery) and click it and it does what it does when I click it as a user. But I have problems with an hidden element like this:

<button id="dropdown01" class="btn btn-default text-center icon-punti font18" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ...
</button>
...
<ul class="dropdown-menu pull-right yellow-bg" aria-labelledby="dropdown01">
<li class="opensans_bold font12 align-center">
    <a href="#" class="edit-element" data-id="123123" data-toggle="modal" >
    ...
    </a>
</li>

If I select and click the link, nothing happens. Well, I thought, that must be because it is hidden behind that hidden <li>, so let's pop the menu up by clicking on the dropdown button. But if I do, I can see that the click was done because the button look changes, but the popup does not show up. So I thought, well, let's change the aria-expanded attribute of the button to true: but that simply had no effect whatsoever, I could even check with the developer tools that the value of the attribute was not changed.

I really don't know what else I can try, any idea what I am doing wrong, or what I can try?

Check the event listeners for that element in devtools inspector: maybe the site uses mousedown event, which you can `trigger()` explicitly. — wOxxOm, Aug 01 '17 at 08:02
Yes, I had had a look at event listeners: there is no mouseup or mousedown event. On the other hand, there are a lot of onclick attached to document, maybe that is the problem... maybe I have to emulate a click on the document in the right area?... — Francesco Marchetti-Stasi, Aug 01 '17 at 08:44
...but that should simply propagate, unless propagation is stopped, in which case it shouldn't. — Francesco Marchetti-Stasi, Aug 01 '17 at 08:50
IIRC I've encountered a site that ignored standard DOM dispatchEvent so I had to `trigger()` [using jQuery of the page itself](https://stackoverflow.com/a/9517879). — wOxxOm, Aug 01 '17 at 08:56
@wOxxOm, yessss! That solved it! Thank you very very much, this was driving me crazy :) — Francesco Marchetti-Stasi, Aug 01 '17 at 09:33
I would tell you to write so I could choose it as solution, but I am not sure I have enough reputation for doing so :/ — Francesco Marchetti-Stasi, Aug 01 '17 at 09:34
You can add your own answer with the actual code you've used. And a link to that topic. — wOxxOm, Aug 01 '17 at 17:56

score 2 · Answer 1 · answered Aug 02 '17 at 13:54

Thanks to @wOxxOm for giving the solution. What I had to do was inject the javascript in the page i am crawling, of course together with the libraries my javascript references; so I wrote a content-script.js containing the following code:

var scripts = ['FileSaver.min.js', 'jszip.min.js', 'myscript.js'] ;

for (var i = 0 ; i < scripts.length ; i++) {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(scripts[i]);
    s.onload = function() {
        this.remove();
    };
    (document.head || document.documentElement).appendChild(s);
}

i.e., a simple loop adaptation of what I found in the link suggested by wOxxOm, using jQuery of the page itself. The libraries I had to inject had also to be declared as "web accessible resources", so I had to put the following in manifest.json:

"content_scripts": [
  {
      "matches": ["http://*.anobii.com/*/profile"],
      "js": ["content-script.js"]
  }
],

"web_accessible_resources": [ "FileSaver.min.js", "jszip.min.js", "myscript.js" ],

There was no need to change the techinique I had used to launch my script, I will mention it for completeness: I chose a reasonable spot to insert a new link in the original page, then I appended a new link that would run a function. In myscript.js:

$(document).ready(function(){
    var newdiv = 
        '<div id="myscrit-link-div">\n' +
         '    <a href="#" id="myscript-activate">Run script</a>\n' +
         '</div>\n' ;
}) ;
$('#original-doc-div').append(newdiv) ;
$('#myscript-activate').click(myscriptMainFunction) ;

As you can see I use jQuery in my script, but there was no need to inject it since it was also used in the original page.

Chrome extension: show hidden element and click it

1 Answers1