在 twitter chrome 扩展中发起点击事件答案

【问题标题】：Initiate a click event in a twitter chrome extension在 twitter chrome 扩展中发起点击事件
【发布时间】：2012-03-25 11:56:48
【问题描述】：

我尝试在 Twitter 的 .com 网页上发起点击事件。但不知何故，当我在我的扩展中尝试代码时它不起作用。

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

但是，当我尝试手动插入代码时，它可以工作。我在 Google Chrome 的控制台中插入以下代码：

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

如果我尝试做其他事情而不是发起点击事件。它工作正常。例如，如果我想操作按钮的内部 html。它在扩展代码中运行良好。仅当我尝试在扩展程序中发起点击时才会出现此问题。

请求的 manifest.json 文件：

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

【问题讨论】：

我可以自己回答我的问题。我认为出于安全原因，谷歌浏览器禁止通过扩展程序启动点击事件
这段代码是如何执行的？你能显示manifest.json吗？
Rob W 检查上面的 manifest.json。我更新了。
消息是否正确记录在控制台中？您能否提供一个示例页面，并描述预期的行为，但不会发生？
Rob W：是的，它已正确记录。点击事件被忽略（甚至没有发出任何错误消息）。但是您是否知道如何在展开部分下获取照片（iframe 元素），而无需单击查看照片按钮？因为那样我可以继续做我的扩展

标签： jquery google-chrome-extension jquery-events

【解决方案1】：

我对 JQuery 一无所知，但我认为我应该指出它确实是一种更纯粹的 JS 方式....

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

【讨论】：