Search code examples
javascriptjquerygmailbookmarklet

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

When I have an email open in Gmail, I'm trying to click the "Show original" dropdown menu item programmatically. The IDs of all the elements change dynamically with each email, so that's not a reliable way to find the menu item I'm trying to click. To start, I'm just trying to make a piece of JavaScript that clicks it in Chrome's console. After loading jQuery, I've tried this:

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

While it seems to select the proper div and click it, it's not the expected behaviour and the click doesn't really do anything. Here's a piece of a fully loaded email's menu containing the menu item I'd like to click with 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>

Show original menu item

My intention is to use a bookmarklet, but I'm having trouble loading jQuery in a bookmarklet because of a security warning, but that's another question/issue. Also, should I try to open the dropdown before clicking the "Show original" button or is it likely that I am able to click this button without opening the menu first?

Solution

  • 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.