CSS Selectors for Gmail Things

gmail-css-selectors-etc.md

CSS Selectors for Gmail Things

Table of Contents

• Notes
• See Also
  • My Other Related Deepdive Gist's and Projects

Notes

Select the 'Snooze' button that appears on hover on the right side of an email in the list view, and set it's background to be red:

$$('div.UI table > tbody > tr > td ul[role="toolbar"] > li[data-tooltip="Snooze"]')[0].style.backgroundColor = '#f00'

When the Snooze 'Select date and time' dialog is open, we can set the time in the textbox as follows:

$('div[role="dialog"] input[aria-label="Time"]').value = '01:23'

We could set the time to 5min from the current time with something like:

var fiveMinutesLater = new Date(Date.now() + 5 * 60000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })

$('div[role="dialog"] input[aria-label="Time"]').value = fiveMinutesLater

See Also

My Other Related Deepdive Gist's and Projects

• https://github.com/0xdevalias
• https://gist.github.com/0xdevalias
• https://github.com/0xdevalias/chatgpt-source-watch : Analyzing the evolution of ChatGPT's codebase through time with curated archives and scripts.
  • Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias' gist)
• Gmail Usability Hacks via JavaScript Web App Reverse Engineering (0xdevalias' gist)
  • Gmail Shortcut Suggestions / Reminders (0xdevalias' gist subsection)
• Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias' gist)
• Reverse Engineering Webpack Apps (0xdevalias' gist)
  • React Internals (subsection)
  • Vue Internals (subsection)
  • Angular Internals (subsection)
• React Server Components, Next.js v13+, and Webpack: Notes on Streaming Wire Format (__next_f, etc) (0xdevalias' gist))
• Fingerprinting Minified JavaScript Libraries / AST Fingerprinting / Source Code Similarity / Etc (0xdevalias' gist)
  • JavaScript Web App Reverse Engineering - Module Identification (0xdevalias' gist)
  • Reverse Engineered Webpack Tailwind-Styled-Component (0xdevalias' gist)
• Bypassing Cloudflare, Akamai, etc (0xdevalias' gist)
• Debugging Electron Apps (and related memory issues) (0xdevalias' gist)
• devalias' Beeper CSS Hacks (0xdevalias' gist)
• Reverse Engineering Golang (0xdevalias' gist)
• Reverse Engineering on macOS (0xdevalias' gist)

https://chat.openai.com/chat

Write a tampermonkey script that will efficiently notice when a div[role="dialog"] becomes visible, checks if it has a span[role='heading'] with the text "Select date and time", and if so, updates the value of the input[aria-label='Time'] 

This should run on gmail

• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

// ==UserScript==
// @name         Update Time in Date and Time Selector
// @namespace    http://gmail.com/
// @version      0.1
// @description  Update the time input in the date and time selector on Gmail
// @author       You
// @match        https://mail.google.com/*
// @grant        none
// ==/UserScript==

// create a new MutationObserver to watch for changes to the DOM
const observer = new MutationObserver(() => {
  // check if the dialog with the date and time selector is visible
  const dialog = document.querySelector('div[role="dialog"][aria-label="Select date and time"]');
  if (!dialog || !dialog.isVisible()) {
    return;
  }

  // check if the dialog has a heading with the text "Select date and time"
  const heading = dialog.querySelector('span[role="heading"]');
  if (!heading || heading.textContent !== "Select date and time") {
    return;
  }

  // update the value of the time input
  const input = dialog.querySelector('input[aria-label="Time"]');
  if (input) {
    input.value = "12:00 PM";
  }
});

// start observing the DOM
observer.observe(document.body, {
  childList: true,
  subtree: true
});

// ==UserScript==
// @name         Update Time Input in Gmail Dialog
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Updates the value of the time input in a Gmail dialog
// @author       You
// @match        https://mail.google.com/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // Observe changes to the DOM
  const observer = new MutationObserver(checkForDialog);
  observer.observe(document.body, { childList: true, subtree: true });

  // Check for dialog with heading "Select date and time"
  function checkForDialog() {
    const dialog = document.querySelector('div[role="dialog"][aria-hidden="false"]');
    if (!dialog) return;

    const heading = dialog.querySelector('span[role="heading"]');
    if (!heading || heading.textContent !== "Select date and time") return;

    // Update value of time input
    const timeInput = dialog.querySelector('input[aria-label="Time"]');
    if (timeInput) timeInput.value = "12:00 PM";
  }
})();