基于Chrome扩展实现Instagram动态输入框自动文本填充

问题背景 #

我正在给妻子做一个Chrome扩展，帮她减少刷Instagram的时间。我是JS和扩展开发新手，但之前用Python做过类似功能。现在需要把预设文本插入Instagram私信（DM）的输入框里，代码在测试页面正常，但DM页面是动态生成的——只有用户输入第一个字符时才会加载真正的输入框。试了好几种插入方法都没用，现在尝试逐字符模拟键盘输入还是失败。发现BrowserFlow扩展能实现，但功能太复杂，我只需要这一项。查了下BrowserFlow是用当前标签的调试模式逐字符插入的，想问怎么实现这个方案。

我的现有代码：

async function typeText(text, element, msDelay) {
  consoleLog('Typing text: ' + text);  
  if (!element) {
    consoleLog('No active element found');
    return; 
  }

  consoleLog('Element in focus obtained');

  for (let char of text) {
    let keydownEvent = new KeyboardEvent("keydown", {
      bubbles: true, 
      key: char, 
      char: char, 
      shiftKey: false 
    });
    element.dispatchEvent(keydownEvent);
    consoleLog(`Keydown event dispatched for character: ${char}`);

    let keypressEvent = new KeyboardEvent("keypress", { 
      bubbles: true, 
      key: char, 
      char: char, 
      shiftKey: false 
    });
    element.dispatchEvent(keypressEvent);
    consoleLog(`Keypress event dispatched for character: ${char}`);

    if ('value' in element) {
      element.value += char; // 针对input元素
      consoleLog(`Added character to value: ${char}`);
    } else {
      element.textContent += char; 
      consoleLog(`Added character to textContent: ${char}`);
    }

    let keyupEvent = new KeyboardEvent("keyup", { 
      bubbles: true, 
      key: char, 
      char: char, 
      shiftKey: false 
    });
    element.dispatchEvent(keyupEvent);
    consoleLog(`Keyup event dispatched for character: ${char}`);

    let inputEvent = new Event("input", {
      bubbles: true
    });
    element.dispatchEvent(inputEvent);
    consoleLog(`Input event dispatched`);

    if (msDelay) {
      consoleLog(`Delaying for ${msDelay} ms`);
      await delay(msDelay);
    }
  }
}

// 调用部分
if (element !== null) {
  const text = "Hello, World!";
  const msDelay = 200; 
  typeText(text, element, msDelay);
} else {
  consoleLog('No active element found, retrying in 2 seconds');
  setTimeout(tryTipeInElement, 2000);
}

解决方案：用Chrome调试协议（CDP）模拟真实输入 #

Instagram的前端会拦截普通DOM层面的键盘事件，而Chrome调试协议直接和浏览器内核交互，模拟的是真实用户的输入行为，完全不会被前端逻辑拦截，这也是BrowserFlow的核心实现方式。

步骤1：配置扩展权限 #

在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "name": "Instagram DM 快速输入",
  "version": "1.0",
  "permissions": ["activeTab", "debugger"],
  "action": {
    "default_popup": "popup.html"
  }
}

步骤2：实现调试协议输入逻辑 #

创建popup.js，通过调试器发送真实按键事件：

document.getElementById('insertText').addEventListener('click', async () => {
  // 获取当前激活标签
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const target = { tabId: tab.id };

  try {
    // 连接调试器
    await chrome.debugger.attach(target, '1.3');
    const presetText = "Hello, World!"; // 你的预设文本

    // 逐字符模拟真实输入
    for (const char of presetText) {
      // 发送按下事件
      await chrome.debugger.sendCommand(target, 'Input.dispatchKeyEvent', {
        type: 'keyDown',
        text: char,
        unmodifiedText: char
      });
      // 发送抬起事件
      await chrome.debugger.sendCommand(target, 'Input.dispatchKeyEvent', {
        type: 'keyUp',
        text: char,
        unmodifiedText: char
      });
      // 模拟输入间隔，更贴近真实操作
      await new Promise(resolve => setTimeout(resolve, 100));
    }

    // 操作完成后断开调试器
    await chrome.debugger.detach(target);
  } catch (err) {
    console.error('操作失败:', err);
    // 异常时确保断开调试器
    if (chrome.debugger.isAttached(target)) {
      await chrome.debugger.detach(target);
    }
  }
});

步骤3：创建扩展弹窗 #

简单的popup.html，提供触发按钮：

<!DOCTYPE html>
<html>
<head>
  <style>button { padding: 10px; }</style>
</head>
<body>
  <button id="insertText">插入预设文本</button>
  <script src="popup.js"></script>
</body>
</html>

关键说明 #

• 为什么CDP能生效？ 普通DOM事件是在页面层面模拟，而CDP直接通知浏览器内核处理输入，会自动触发Instagram的动态输入框加载逻辑，同时所有事件都和真实用户操作一致，不会被拦截。
• 权限提示：首次使用扩展时，浏览器会提示允许调试权限，用户确认后即可正常使用。
• 动态输入框兼容：即使输入框还没加载，模拟第一个字符时会触发Instagram的动态加载，自动生成真实输入框，后续字符可正常插入。

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