用JQuery选择Gmail中未读邮件的问题

Question

在 Gmail 中，点击下面显示的复选框会选择所有邮件，我正在制作一个用户脚本（供个人使用，我需要它在 Chrome 中工作），该脚本将仅选择未读邮件（只有下面屏幕中的前 2 条消息未读），而不是该复选框的默认行为。

我的第一个想法是模拟点击事件，尽管我可以使用代码访问“未读”菜单项...

var unread_menuitem = document.getElementById('canvas_frame').contentWindow.document.getElementById(':s2');
$(unread_menuitem).css({'border':'thin red solid'});

并使用代码向其分派点击事件...

var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent( 'click', true, true );
unread_menuitem.dispatchEvent(clickEvent); // Chrome's console returned 'true'

未读消息不会被选中。

---

我的第二个想法是通过检查复选框 $('#canvas_frame').contents().find('tr.zE input').prop('checked', true) 来强制选择并应用 Gmail 在手动点击事件上应用的 css 样式，但是虽然我能够在视觉上以及 DOM 方面匹配手动点击事件（据我所知）...

Gmail 在执行某些操作时显示“未选择任何对话”，在本例中我执行了“标记为已读”。我还想指出，使用我的强力方法手动单击处于此状态的复选框并没有像您期望的那样“取消选中”它们。他们需要额外手动点击一次才能取消选中。

我的两个想法都失败了，我想知道是否还有其他方法可以解决这个问题，或者是否有是改进我的上述想法以解决问题的方法。

Answer 1

这里有一个脚本，看起来它可以完成您想要做的事情。这是您需要创建的整个脚本还是只是功能的一部分？

根据讨论，他们确实为 Firefox 创建了它，它可以在其中运行，有些人评论说它在 Chrome 中不起作用，所以你可能正在寻找一个需要针对不同浏览器的解决方案（你的问题没有指定是否它必须在 Chrome 中工作，只是你正在使用它）。

这就是他们用来选择未读消息的方法，看起来他们正在模拟每个项目上的 mousedown 和 mouseup 事件：

var handler = function(type,e) {
    e.preventDefault();
    e.stopPropagation();

    var e2 = document.createEvent('MouseEvents');
    e2.initEvent('mousedown',true,false); 
    var el = anchor.wrappedJSObject;
    el.dispatchEvent(e2);

    setTimeout(function() {
        var el = document.querySelectorAll('div[selector='+type+'] > div')[0].wrappedJSObject;
        var e2 = document.createEvent('MouseEvents');
        e2.initEvent('mouseup',true,false); 
        el.dispatchEvent(e2);
    },100);
}

他们通过进一步设置一个单击事件来调用此事件，该事件调用 handler('unread', e);

Answer 2

解决了这个问题，简单易行，现在我想起来，这是用户 PirateKitten 的答案中列出的解决方案 - 而不是像我的第二个想法一样“选中”未读消息旁边的复选框，模拟点击 这些复选框。工作起来就像一个魅力，这里是代码，您可以在使用 Gmail 时在 Chrome 控制台中运行该代码（不需要 jQuery 顺便说一句）：

var unreadMessages = document.getElementById('canvas_frame').contentWindow.document.querySelectorAll('tr.zE input');
var numMessages = unreadMessages.length;
while ( numMessages-- ) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent( 'click', true, true );
    unreadMessages[numMessages].dispatchEvent(clickEvent); 
}

---

这是我的完整脚本，您可以在 Chrome 控制台中运行（或打开将其转换为扩展/用户脚本）以将复选框的默认行为从选择所有消息更改为仅选择未读消息：

var hasUILoaded = setInterval( function() {
    if( document.getElementById('canvas_frame').contentDocument.getElementsByClassName('J-Zh-I J-J5-Ji J-Pm-I L3') ) {
        clearInterval( hasUILoaded );
        setTimeout( function() {
            var content_frame = document.getElementById('canvas_frame').contentDocument;
            var chkbox = content_frame.getElementsByClassName( 'J-Zh-I J-J5-Ji J-Pm-I L3' );
            var chkbox = chkbox[0].childNodes[0];
            var unreadMessages = content_frame.getElementsByClassName('zE'); // DOM structure: <tr class=zE> <td> <img><input> </td> </tr> so we add ".childNodes[0].childNodes[1]" whenever we want to access the check boxes of each message.
            var allMessages = content_frame.getElementsByClassName('zA');            

            chkbox.onclick = function() {
                if( chkbox.checked ) {
                    var numUnread = unreadMessages.length;;
                    var numAll  = allMessages.length;
                    setTimeout(function () { 
                        if( allMessages[0].childNodes[0].childNodes[1].checked ) { 
                            while ( numAll-- ) {
                                var clickEvent = document.createEvent('MouseEvents');
                                clickEvent.initEvent( 'click', true, true ); 
                            allMessages[numAll].childNodes[0].childNodes[1].dispatchEvent(clickEvent);       
                            }
                        }
                    }, 10);

                    setTimeout(function (){
                        if(!unreadMessages[0].childNodes[0].childNodes[1].checked) {
                            while ( numUnread-- ) {
                                var clickEvent = document.createEvent('MouseEvents');
                                clickEvent.initEvent( 'click', true, true ); 
                unreadMessages[numUnread].childNodes[0].childNodes[1].dispatchEvent(clickEvent);  
                            }
                        }
                    }, 30);
                }
            }
        }, 100);
    }
}, 300);