Chrome Extension MV3自动化含占位符的网站登录问题求助

针对你遇到的表单填充后值与占位符共存、提交时清空的问题，以下是具体解决思路和实现方案：

1. 模拟真实用户输入事件（核心方案） #

现代网站大多使用React/Vue等框架的受控组件，直接修改value不会触发组件内部状态更新，必须同步触发对应事件。尝试用以下函数模拟完整输入流程：

function fillInput(fieldId, value) {
  const field = document.getElementById(fieldId);
  if (!field) return;

  // 模拟聚焦
  field.focus();
  // 清空并触发初始input事件
  field.value = '';
  field.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
  // 赋值并触发输入、变更事件
  field.value = value;
  field.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
  field.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
  // 模拟失焦
  field.blur();
}

// 调用填充账号密码
fillInput('username', '你的账号');
fillInput('password', '你的密码');

2. 处理自定义占位符逻辑 #

如果网站用的是自定义模拟占位符（非原生placeholder属性），直接赋值后占位符不会自动隐藏。可以通过以下方式解决：

• 查看手动输入时元素的class变化（比如添加filled/focused类），手动给输入框添加对应类：

  const usernameField = document.getElementById('username');
  usernameField.classList.add('filled'); // 替换为实际生效的类名
  

• 调用网站绑定的聚焦处理函数：

  // 利用DevTools的getEventListeners查看元素的绑定事件
  const focusHandler = getEventListeners(usernameField).focus?.[0]?.listener;
  if (focusHandler) focusHandler.call(usernameField);
  

3. 模拟逐字符键盘输入（更贴近真实操作） #

如果上述方案无效，尝试模拟用户逐个按键的操作，彻底还原手动输入流程：

function typeText(fieldId, text) {
  const field = document.getElementById(fieldId);
  if (!field) return;

  field.focus();
  field.value = '';
  field.dispatchEvent(new InputEvent('input', { bubbles: true }));

  for (const char of text) {
    // 触发完整键盘事件链
    field.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
    field.value += char;
    field.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
    field.dispatchEvent(new InputEvent('input', { bubbles: true }));
    field.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
  }

  field.dispatchEvent(new Event('change', { bubbles: true }));
  field.blur();
}

// 调用逐字符输入
typeText('username', '你的账号');
typeText('password', '你的密码');

4. 绕过按钮点击，直接触发表单提交 #

部分网站的登录按钮会做额外校验，尝试直接触发表单的submit事件：

const loginForm = document.getElementById('UsernameAndPassword');
if (loginForm) {
  loginForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
}

如果需要模拟按钮点击的完整流程，可补充触发鼠标事件：

const loginBtn = document.getElementById('loginFormUsernameAndPasswordButton');
loginBtn.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
loginBtn.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
loginBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));

5. 分析RoboForm的操作流程（终极参考） #

打开Chrome DevTools，开启「Preserve log」，用RoboForm完成登录，通过以下方式分析它的操作：

• 查看Elements面板中输入框的属性、class变化
• 在「Event Listener Breakpoints」中勾选input/click等事件，跟踪RoboForm触发的事件序列
• 查看Console面板的调用栈，找到RoboForm调用的网站内部方法

照着RoboForm的操作步骤模拟，基本能解决问题。

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