如何在Chrome扩展中调用内置JS函数自动触发Next.js开关显示买家信息？

方法1：模拟真实用户点击操作（最稳定） #

直接触发开关元素的完整点击事件链，完全复刻手动操作逻辑，能自动触发Next.js绑定的内置状态更新函数：

// 替换为你实际定位到的开关元素选择器
const switchSelector = '.buyer-info-toggle-switch';
const switchElement = document.querySelector(switchSelector);

if (switchElement) {
  // 先检查当前状态，避免重复触发
  const isActive = switchElement.getAttribute('aria-checked') === 'true' || switchElement.classList.contains('SWITCH-ON');
  if (!isActive) {
    // 触发完整鼠标事件序列，和手动点击行为一致
    switchElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
    switchElement.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
    switchElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
  }
}

这种方法不依赖框架内部实现，兼容性最强，只要开关元素可被点击，就能同步触发对应的状态更新与买家信息展示逻辑。

方法2：定位并调用内置状态更新函数 #

若能找到开关对应的核心状态切换函数，可直接调用：

1. 打开Chrome DevTools的Sources面板，启用Event Listener Breakpoints→Mouse→click，手动点击开关后查看调用栈，定位到处理状态切换的核心函数（通常包含setState、toggle等关键词）。
2. 根据函数挂载位置执行调用：
   • 若函数挂载在全局作用域（如window）：

     if (window.toggleBuyerInfoVisibility) {
       window.toggleBuyerInfoVisibility(true); // 传入true表示开启状态
     }
     

   • 若为React组件实例方法，可通过React内部实例获取（注意：依赖React版本，稳定性较弱）：

     const nextRoot = document.getElementById('__next');
     const reactComponent = nextRoot._reactRootContainer._internalRoot.current.child;
     if (reactComponent?.props?.onToggle) {
       reactComponent.props.onToggle(true);
     }
     

方法3：确保在元素加载完成后执行操作 #

Next.js为异步渲染框架，开关元素可能延迟加载，用MutationObserver监听DOM变化，等待元素出现后再执行操作：

const observer = new MutationObserver((mutations) => {
  const switchElement = document.querySelector('.buyer-info-toggle-switch');
  if (switchElement) {
    const isActive = switchElement.getAttribute('aria-checked') === 'true';
    if (!isActive) {
      switchElement.click();
    }
    observer.disconnect(); // 完成操作后停止监听，避免资源浪费
  }
});

// 监听页面主体的DOM变化，可缩小监听范围提升性能
observer.observe(document.body, { childList: true, subtree: true });

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