使用小书签点击 Gmail 的 "Show original" 按钮

Question

当我在 Gmail 中打开电子邮件时，我试图以编程方式单击 "Show original" 下拉菜单项。所有元素的 ID 随每封电子邮件动态变化，因此这不是找到我试图单击的菜单项的可靠方法。首先，我只是想制作一个 JavaScript 的片段，在 Chrome 的控制台中点击它。加载 jQuery 后，我试过这个：

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

虽然看起来 select 正确 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，但这是另一个 question/issue。另外，我应该尝试在单击 "Show original" 按钮之前打开下拉菜单，还是我可以在不先打开菜单的情况下单击此按钮？

Answer 1

您必须至少打开一次菜单，以便 Gmail 加载所需的菜单元素。

要单击元素，请直接在 DOM 个元素（而不是 jQuery 集合）上使用 dispatchEvent()

基本示例可能如下所示：

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

这仅适用于 Chrome、Firefox 和 Opera。

使用小书签点击 Gmail 的 "Show original" 按钮

Using a bookmarklet to click Gmail's "Show original" button

javascript

jquery

gmail

bookmarklet