如何用Tampermonkey脚本在Google Docs中模拟键盘事件调整缩放

Alright, let's get this sorted—you've already got the zoom selector open using mouse events, now let's add keyboard simulations to adjust the zoom level in Google Docs. Here's how to make it work smoothly:

First, since you've triggered the mouse events to open the zoom dropdown, the next step is to mimic keyboard interactions to navigate and confirm your desired zoom level. Let's break this down step by step:

1. Create a Reusable Keyboard Event Trigger Function #

Just like your triggerMouseEvent for mouse actions, we'll build a function to dispatch keyboard events. I'll include a modern version that works with most browsers, plus a legacy fallback just in case:

// Modern keyboard event function (works in most current browsers)
function triggerKeyboardEvent(node, eventType, key) {
  const event = new KeyboardEvent(eventType, {
    bubbles: true,
    cancelable: true,
    key: key
  });
  node.dispatchEvent(event);
}

// Legacy version (for older browsers that don't support the KeyboardEvent constructor)
function triggerLegacyKeyboardEvent(node, eventType, keyCode) {
  const eventObj = document.createEvent('KeyboardEvent');
  eventObj.initKeyboardEvent(
    eventType,
    true, true, window,
    false, false, false, false,
    keyCode, 0
  );
  node.dispatchEvent(eventObj);
}

2. Navigate the Zoom Dropdown with Arrow Keys #

Once the zoom selector is open, you need to target the dropdown menu itself and focus it first—otherwise, the keyboard events won't register. Then use arrow keys to move up/down through zoom options:

// Wait a tiny moment for the dropdown to fully render (important, since Google Docs loads it dynamically)
setTimeout(() => {
  // Find the zoom dropdown menu (adjust the selector if Google updates their UI)
  const zoomDropdown = document.querySelector('#zoomSelect .goog-menu');
  
  if (zoomDropdown) {
    zoomDropdown.focus();
    
    // Simulate pressing DOWN arrow to select the next lower zoom level
    triggerKeyboardEvent(zoomDropdown, 'keydown', 'ArrowDown');
    triggerKeyboardEvent(zoomDropdown, 'keyup', 'ArrowDown');
    
    // Use this instead if you want a higher zoom level
    // triggerKeyboardEvent(zoomDropdown, 'keydown', 'ArrowUp');
    // triggerKeyboardEvent(zoomDropdown, 'keyup', 'ArrowUp');
  }
}, 100);

3. Confirm the Zoom Selection #

After navigating to your preferred zoom level, simulate pressing Enter to apply the change:

// Add this inside the setTimeout block after navigating
triggerKeyboardEvent(zoomDropdown, 'keydown', 'Enter');
triggerKeyboardEvent(zoomDropdown, 'keyup', 'Enter');

Full Working Example (Combined with Your Mouse Code) #

Here's everything put together, so you can run it in one go:

// Your original mouse event code to open the zoom selector
var button = document.getElementById("zoomSelect");
triggerMouseEvent(button, "mouseover");
triggerMouseEvent(button, "mousedown");
triggerMouseEvent(button, "mouseup");

// Wait for dropdown to render, then adjust zoom via keyboard
setTimeout(() => {
  const zoomDropdown = document.querySelector('#zoomSelect .goog-menu');
  if (zoomDropdown) {
    zoomDropdown.focus();
    
    // Move down one zoom level (change to ArrowUp for higher)
    triggerKeyboardEvent(zoomDropdown, 'keydown', 'ArrowDown');
    triggerKeyboardEvent(zoomDropdown, 'keyup', 'ArrowDown');
    
    // Confirm the selection
    triggerKeyboardEvent(zoomDropdown, 'keydown', 'Enter');
    triggerKeyboardEvent(zoomDropdown, 'keyup', 'Enter');
  }
}, 100);

// Your original mouse event helper
function triggerMouseEvent(node, eventType) {
  var eventObj = document.createEvent('MouseEvents');
  eventObj.initEvent(eventType, true, true);
  node.dispatchEvent(eventObj);
}

// Modern keyboard event helper
function triggerKeyboardEvent(node, eventType, key) {
  const event = new KeyboardEvent(eventType, {
    bubbles: true,
    cancelable: true,
    key: key
  });
  node.dispatchEvent(event);
}

Quick Notes to Avoid Headaches #

• UI Changes: Google Docs occasionally updates its class names/selectors. If .goog-menu doesn't work, right-click the zoom dropdown and inspect it to find the correct container element.
• Focus Matters: Always make sure the dropdown is focused before sending keyboard events—otherwise, the events might go to the wrong part of the page.
• Timing: The setTimeout with 100ms gives the dropdown time to fully load. If it doesn't work, try increasing the delay slightly.

内容的提问来源于stack exchange，提问作者MagTun