Chrome扩展项目求助：模拟F1按键功能点击后无响应

开发了一个入门级Chrome扩展，需求是点击扩展执行按钮时，自动模拟按下F1键并显示确认提示。目前所有配置看似正常，但点击按钮后预期功能未生效，已完成以下排查：

• 扩展已正常激活
• 其他扩展均已禁用
• 点击Chrome工具栏扩展图标时，popup窗口正常显示
• Chrome开发者控制台无报错
• Chrome已更新至最新版本

代码文件 #

manifest.json #

{
  "manifest_version": 3,
  "name": "F1 AutoPress Extension",
  "version": "1.0",
  "description": "Automatically press the F1 key",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

popup.js #

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("pressF1Button").addEventListener("click", function() {
    chrome.scripting.executeScript({
      target: { tabId: -1 }, // Modify the target tab ID if needed
      function: function() {
        document.dispatchEvent(new KeyboardEvent("keydown", { key: "F1" }));
        document.dispatchEvent(new KeyboardEvent("keyup", { key: "F1" }));
         alert("Button clicked"); // Show an alert
      }
    });
  });
});

popup.html #

<!DOCTYPE html>
<html>
<head>
  <title>F1 AutoPress Extension</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="pressF1Button">Press F1</button>
</body>
</html>

background.js #

文件内容为空。

问题原因与修复方案 #

1. 目标Tab ID错误 #

chrome.scripting.executeScript中tabId: -1是无效值，无法定位到当前活跃标签页，必须获取真实的活跃标签ID才能注入脚本。

2. 键盘事件模拟参数不全 #

仅设置key参数不足以让浏览器正确识别F1键事件，需要补充bubbles、cancelable、code等关键属性，确保事件能正常冒泡并被页面监听。

3. 确认提示位置不符合预期 #

当前alert在注入的标签页脚本中执行，会显示在目标网页而非popup窗口，若要在popup显示提示，需将提示逻辑移到popup的点击回调中。

修复后的popup.js代码 #

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("pressF1Button").addEventListener("click", async function() {
    // 获取当前活跃标签页
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!activeTab) return;

    // 向活跃标签注入脚本模拟F1键
    await chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      function: simulateF1Key
    });

    // 在popup显示确认提示
    alert("已模拟按下F1键");
  });
});

function simulateF1Key() {
  // 构造完整的键盘事件
  const keydownEvent = new KeyboardEvent("keydown", {
    key: "F1",
    code: "F1",
    bubbles: true,
    cancelable: true,
    view: window
  });
  const keyupEvent = new KeyboardEvent("keyup", {
    key: "F1",
    code: "F1",
    bubbles: true,
    cancelable: true,
    view: window
  });

  // 触发事件
  document.dispatchEvent(keydownEvent);
  document.dispatchEvent(keyupEvent);
}

额外说明 #

• activeTab权限已在manifest中配置，该权限允许扩展临时访问当前活跃标签页，无需提前申请全域名权限。
• 若需固定在特定网站生效，可在manifest中添加host_permissions字段指定目标域名，减少用户授权操作。

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