如何在页面加载完成后用JavaScript自动触发ESC键

我明白你想要通过Chrome扩展实现页面加载完成后自动触发ESC键（键码27）来阻止网页跳转的需求，之前尝试多种方法没找到可行方案对吧？下面我给你详细梳理可行的实现步骤和代码：

核心原理 #

Chrome扩展中我们可以通过**内容脚本（Content Scripts）**注入到目标页面，在页面完全加载后合成并派发ESC键的键盘事件，模拟用户按下ESC的行为。需要注意的是，必须正确配置事件参数（比如bubbles、cancelable）才能让页面的事件监听器正确捕获到这个模拟事件。

具体实现步骤 #

1. 配置扩展的Manifest文件（Manifest V3） #

首先在你的扩展根目录创建manifest.json，配置必要的权限和内容脚本注入规则：

{
  "manifest_version": 3,
  "name": "Auto ESC Redirect Blocker",
  "version": "1.0",
  "description": "Automatically triggers ESC key after page loads to prevent unwanted redirects",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你需要生效的网站，比如"https://example.com/*"
      "js": ["content.js"],
      "run_at": "document_idle" // 确保页面完全加载后再执行脚本
    }
  ]
}

• run_at: "document_idle"是关键，这个时机代表页面已经加载完成，DOM和资源都准备就绪，完全符合你的需求。
• matches如果指定特定网站，会比<all_urls>更安全，也能减少不必要的脚本执行。

2. 编写内容脚本（content.js） #

创建content.js文件，实现页面加载完成后触发ESC键的逻辑：

// 监听页面完全加载事件（load会等待所有资源加载完成，比DOMContentLoaded更彻底）
window.addEventListener('load', () => {
  // 合成ESC键的keydown事件
  const escKeyDown = new KeyboardEvent('keydown', {
    key: 'Escape',
    keyCode: 27,
    code: 'Escape',
    which: 27,
    bubbles: true, // 允许事件冒泡，让页面的监听器能捕获到
    cancelable: true,
    view: window
  });

  // 合成ESC键的keyup事件（有些页面可能需要完整的按键周期才会响应）
  const escKeyUp = new KeyboardEvent('keyup', {
    key: 'Escape',
    keyCode: 27,
    code: 'Escape',
    which: 27,
    bubbles: true,
    cancelable: true,
    view: window
  });

  // 向document派发事件（如果页面的ESC监听绑定在特定元素上，可替换为对应元素）
  document.dispatchEvent(escKeyDown);
  document.dispatchEvent(escKeyUp);

  console.log("ESC key has been automatically triggered");
});

可能遇到的问题及解决办法 #

• 页面无法捕获模拟事件：有些网站会对事件的isTrusted属性做校验（合成事件的isTrusted为false），这种情况下模拟按键可能无效。这时候你可以尝试直接找到页面中处理ESC的函数并调用，但这种方法依赖页面的具体实现，兼容性较差。
• 权限不足：如果脚本没生效，检查manifest.json中的matches是否匹配目标网站，或者是否需要添加activeTab权限。

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