Initiate a click event in a twitter chrome extension

问题

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://*/"
    ]
}

回答1:

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]);
}

来源：https://stackoverflow.com/questions/9859925/initiate-a-click-event-in-a-twitter-chrome-extension

标签

jquery

javascript-events

google-chrome-extension