Initiate a click event in a twitter chrome extension

Question

I try to initiate a click event on Twitter's .com web page. But somehow it doesn't work when I try the code in my extension.

if(typeof TIP == 'undefined'){
    var TIP = {};
}


TIP.Tweets = {
    getNumberOfTweets: function(){
        var tweets = $('#stream-items-id .js-stream-item').length;
        return tweets;
    },
    setNumberOfTweets: function(number){
        TIP.Tweets.currentNumberOfTweets = number;
    }

}
TIP.initiate = function(){
    TIP.Tweets.currentNumberOfTweet = TIP.Tweets.getNumberOfTweets();
    setInterval(function(){
        var tweets = TIP.Tweets.getNumberOfTweets();

        if(TIP.Tweets.currentNumberOfTweets != tweets){
            TIP.Tweets.setNumberOfTweets(tweets);
            TIP.renderImages();
        }
    }, 100);

    //Render images
    TIP.renderImages();
}
TIP.renderImages = function(){
    $('#stream-items-id .js-view-details').each(function(){
        var btn = this
        if($.trim($(this).text()) == 'View photo'){
            $(btn).click();//This is the button I want to click, which is the view photo button
            console.log('rendered');
        }
    });

}

$(function(){
    TIP.initiate();
});

But, when I try to insert the code manually it works. I insert the following code below in Google Chrome's console:

$('#stream-items-id .js-view-details').each(function(){
    var btn = this
    if($.trim($(this).text()) == 'View photo'){
            $(btn).click();
            console.log('rendered');
    }
});

If I try to do something else instead of initiating a click event. It works fine. For instance, if I want to manipulate the inner html of the button. It works fine in extension code. The problem only occurs when I try to initiate a click in the extension.

Requested manifest.json file:

{
    "name": "Twitter Image Previewer",
    "version": "1.0",
    "description": "Enables image previews in tweets",
    "browser_action": {
        "default_icon": "icon.png"
    },
    "content_scripts": [
        {
            "matches": ["http://twitter.com/*", "https://twitter.com/*"],
            "css": ["style.css"],
            "js": ["jquery.min.js", "JeasyCreate.js", "extension.js"],
            "all_frames": true
        }
    ],
    "permissions": [
        "http://*/",
        "https://*/"
    ]
}

I could answer my question myself. I think initiating click event through an extension is banned in Google Chrome, because of security reasons — einstein, Mar 25 '12 at 12:31
is the message correctly logged in the console? Can you provide an example page, and describe the expected behaviour, which does not happen? — Rob W, Mar 25 '12 at 13:32
Rob W: Yes it is correctly logged. The click event is ignored(Not even issuing any error messages too). But do you happen to know how I can get the photo(the iframe element) under the expanded section, without clicking the view-photo-button? Because then I can continue doing my extension — einstein, Mar 25 '12 at 13:45
I don't know how I can show you that? With ordinary JS code it is working(which is why I can't show you an example page). It is only extension code that it is failing. Then you have to install my extension. All the above code and jquery is necessary to set it up in Google Chrome. And you only need to visit Twitter after that — einstein, Mar 25 '12 at 14:51
Yes, but which Twitter page? If you want me to reproduce your observations, I have to see the same page as you. Or an equivalent one. — Rob W, Mar 25 '12 at 14:53
it is the home page. it searches the time line for tweets that have embedded photos and clicks. You can remove JeasyCreate.js in manifest.js I haven't used it. — einstein, Mar 25 '12 at 15:11

score 1 · Accepted Answer · answered Mar 25 '12 at 17:37

I know nothing of JQuery but thought I should point out that it does work as a more pure JS way....

// https://developer.mozilla.org/en/DOM/element.dispatchEvent
function simulateClick(obj) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var canceled = !obj.dispatchEvent(evt);
/*
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
  */
}

var photos = document.querySelectorAll('#stream-items-id .js-view-details');
for (var i = 0; i < photos.length; i++) {
 if (photos[i].firstChild.data.trim()=='View photo') simulateClick(photos[i]);
}

Initiate a click event in a twitter chrome extension

1 Answers1

Linked