浏览器扩展无法设置特定input值，求可行解决办法

• 注入代码到页面上下文执行
  扩展的内容脚本默认和页面JS上下文隔离，而控制台操作是在页面上下文里运行的。可以通过创建script标签把操作代码注入到页面中，绕过隔离：

  // 在内容脚本中执行这段代码
  const script = document.createElement('script');
  script.textContent = `
    const input = document.querySelector('你的选择器');
    input.focus();
    input.value = '要设置的值';
    // 触发必要事件
    input.dispatchEvent(new Event('input', { bubbles: true }));
    input.dispatchEvent(new Event('change', { bubbles: true }));
  `;
  document.head.appendChild(script);
  script.remove();
  

• 模拟完整的用户输入流
  有些页面会校验输入的触发路径，只设置value和触发简单事件没用，需要模拟真实用户逐个输入字符的过程：

  function simulateInput(inputEl, text) {
    inputEl.focus();
    inputEl.value = '';
    for (const char of text) {
      const keydownEvent = new KeyboardEvent('keydown', { key: char, bubbles: true });
      const keypressEvent = new KeyboardEvent('keypress', { key: char, bubbles: true });
      const inputEvent = new Event('input', { bubbles: true });
      
      inputEl.dispatchEvent(keydownEvent);
      inputEl.value += char;
      inputEl.dispatchEvent(keypressEvent);
      inputEl.dispatchEvent(inputEvent);
    }
    inputEl.dispatchEvent(new Event('change', { bubbles: true }));
    inputEl.blur();
  }
  
  // 注入到页面上下文后调用
  simulateInput(document.querySelector('你的选择器'), '目标内容');
  

• 针对框架驱动的input做适配
  如果页面用React、Vue等框架，直接修改DOM的value会被框架的状态同步覆盖，需要找到框架的状态对象修改：

  • React：找到input对应的Fiber节点（可通过$0._internalFiber在控制台查看），修改其memoizedProps.value或直接更新组件状态。
  • Vue：找到input对应的Vue实例（$0.__vue__），直接修改绑定的data属性。

• 定位页面的防篡改逻辑
  用浏览器调试工具的断点功能，在设置value后，监听input的value变化，或添加MutationObserver监听DOM属性变化，找到清空value的代码针对性绕过：

  // 监听value属性变化
  const input = document.querySelector('你的选择器');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.attributeName === 'value') {
        console.log('value被修改了', input.value);
        // 此处可添加debugger断点定位代码
        // debugger;
      }
    });
  });
  observer.observe(input, { attributes: true });
  

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