Chrome扩展：如何用Ctrl+M快捷键向网页文本框粘贴内容

问题根源 #

你当前的代码运行在扩展的Popup环境中：

• 点击网页时Popup会失去焦点甚至关闭，导致快捷键无法触发
• Popup内的document指向扩展自身的DOM，无法访问网页的文本框元素

解决方案 #

通过Chrome扩展的全局快捷键API和**内容脚本（Content Script）**实现跨环境的内容粘贴：

1. 修改Manifest配置 #

在manifest.json中注册全局快捷键并配置内容脚本：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "commands": {
    "paste-next-item": {
      "suggested_key": {
        "default": "Ctrl+M"
      },
      "description": "粘贴下一项内容到网页文本框"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

2. 后台脚本（background.js）处理快捷键 #

负责监听全局快捷键，管理数据队列，并向网页发送粘贴指令：

// 假设temp是你存储剪贴板数据的队列
let temp = [];

// 监听快捷键触发
chrome.commands.onCommand.addListener((command) => {
  if (command === "paste-next-item") {
    const shiftedVal = temp.shift();
    if (shiftedVal != null) {
      // 向当前激活标签页的内容脚本发送消息
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, {action: "paste", value: shiftedVal});
      });
    } else {
      alert("没有更多内容了，队列已空");
    }
  }
});

3. 内容脚本（content.js）处理网页粘贴 #

注入到网页环境中，接收后台消息并将内容粘贴到当前激活的文本框：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "paste" && request.value) {
    const activeElement = document.activeElement;
    // 验证当前激活元素是否为可编辑文本框
    if (activeElement && (
      activeElement.tagName === "INPUT" || 
      activeElement.tagName === "TEXTAREA" || 
      activeElement.isContentEditable
    )) {
      // 根据元素类型赋值
      if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") {
        activeElement.value = request.value;
      } else if (activeElement.isContentEditable) {
        activeElement.textContent = request.value;
      }
      // 触发输入事件，确保网页能检测到内容变化
      activeElement.dispatchEvent(new Event('input', { bubbles: true }));
    } else {
      alert("请先选中一个可编辑的文本框");
    }
  }
});

关键说明 #

• 全局快捷键通过commands API注册，不受扩展焦点状态影响
• 内容脚本直接运行在网页环境中，可以访问网页的DOM元素
• 通过Chrome的消息传递机制实现后台脚本和内容脚本的数据交互

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