使用小书签单击Gmail的“显示原始”按钮

Question

当我在Gmail中打开电子邮件时，我正在尝试以编程方式单击“显示原始”下拉菜单项。所有元素的ID随每个电子邮件动态变化，因此这不是找到我想要点击的菜单项的可靠方法。首先，我只是想在Chrome的控制台中创建一个点击它的JavaScript。加载jQuery后，我试过了：

jQuery('div[role=menuitem]:contains(Show original)').click();

虽然它似乎选择了正确的div并单击它，但它不是预期的行为，并且点击实际上没有做任何事情。这是一个满载的电子邮件菜单，其中包含我想用JavaScript点击的菜单项：

<div class="J-N" role="menuitem" aria-hidden="false" id="so" style="-webkit-user-select: none;"><div class="J-N-Jz"><div><div id=":173" class="cj" act="32"><img class="dS J-N-JX" src="images/cleardot.gif" alt="">Show original</div></div></div></div>

我的目的是使用书签，但由于安全警告，我无法在书签中加载jQuery，但这是另一个问题/问题。此外，我应该在点击“显示原始”按钮之前尝试打开下拉列表，还是我可以在不先打开菜单的情况下单击此按钮？

Answer 1

You must open menu at least once, so Gmail loads required menu elements.

To click on elements use dispatchEvent() straight on DOM elements (not jQuery collections)

Basic example might look like this:

// Create events
var mouseDownEvent = new MouseEvent('mousedown', { 'bubbles': true });
var mouseUpEvent = new MouseEvent('mouseup', { 'bubbles': true });

// Get DOM elements
var menu = jQuery("div[role='button'][aria-label='More']").get(0);
var button = jQuery("div[role='menuitem']:contains('Show original')").get(0);

// Open and close menu, to ensure button existence
menu.dispatchEvent(mouseDownEvent);
menu.dispatchEvent(mouseDownEvent);

// Click menu item
button.dispatchEvent(mouseDownEvent);
button.dispatchEvent(mouseUpEvent);

That will work only in Chrome, Firefox and Opera.