Puppeteer操作Chrome扩展：参数无法传入page.evaluate致输入异常

问题重现 #

我编写Puppeteer脚本操作Chrome扩展弹窗，尝试向输入框填充twitch参数值，但输入框始终显示undefined，无法正确传递参数。核心代码如下：

const puppeteer = require('puppeteer')

const EXTENSION = '/Users/usr/Library/Application Support/Google/Chrome/Profile 1/Extensions/gidnphnamcemailggkemcgclnjeeokaa/1.14.4_0'

class Agent {
  constructor(extension) {
    this._extension = extension
  }
  
  async runBrowser() {
    const browser = await puppeteer.launch({
      headless:false,
      devtools:true,
      args:[`--disable-extensions-except=${this._extension}`,
            `--load-extension=${this._extension}`,
            '--enable-automation']
    })
    return browser
  }
  
  async getPage(twitch) {
    const page = await (await this.runBrowser()).newPage()
    
    await page.goto('chrome-extension://gidnphnamcemailggkemcgclnjeeokaa/popup.html')

    const nextEvent = await  page.evaluate(async () => {
      document.getElementById('launch-trace').click()
    })
    const waitSelector = await page.waitForSelector('.popup-body')
    const finalEvent = (twitch) => new Promise(async (twitch) => page.evaluate(async (twitch) => {
      const input = document.getElementById('user-trace-id')
      input.focus()
      input.value = twitch

    }))
    await finalEvent(twitch)
  }
}
const test = new Agent(EXTENSION)


test.getPage('test')

尝试封装Promise传递参数的方式也无效：

const finalEvent = (val) => new Promise(async () => await page.evaluate(async () => {
  const nextTime = () => new Promise(async () => setInterval(async () => {
    const input = document.getElementById('user-trace-id')
    
    input.focus()
    input.value = val
  }, 3000))
  //await nextTime(k)
}))
await finalEvent(twitch)

错误分析 #

1. page.evaluate参数传递错误：page.evaluate的参数需要放在执行函数的后面，而非在函数内部声明后直接使用，你的写法导致页面上下文无法获取外部的twitch值。
2. 不必要的Promise嵌套：page.evaluate本身就是异步函数，不需要额外包裹Promise，错误的封装会导致参数作用域丢失。
3. 定时器使用错误：setInterval不返回Promise，无法用await等待，且没有将val传入页面上下文。

解决方案 #

修正参数传递方式，简化异步逻辑，确保参数正确传入页面上下文：

const puppeteer = require('puppeteer')

const EXTENSION = '/Users/usr/Library/Application Support/Google/Chrome/Profile 1/Extensions/gidnphnamcemailggkemcgclnjeeokaa/1.14.4_0'

class Agent {
  constructor(extension) {
    this._extension = extension
  }
  
  async runBrowser() {
    const browser = await puppeteer.launch({
      headless: false,
      devtools: true,
      args: [
        `--disable-extensions-except=${this._extension}`,
        `--load-extension=${this._extension}`,
        '--enable-automation'
      ]
    })
    return browser
  }
  
  async getPage(twitch) {
    const browser = await this.runBrowser();
    const page = await browser.newPage();
    
    await page.goto('chrome-extension://gidnphnamcemailggkemcgclnjeeokaa/popup.html');

    // 点击触发弹窗变化
    await page.evaluate(() => {
      document.getElementById('launch-trace').click();
    });
    
    // 等待目标元素加载完成
    await page.waitForSelector('.popup-body');
    
    // 正确传递参数到page.evaluate
    await page.evaluate((inputValue) => {
      const input = document.getElementById('user-trace-id');
      if (input) {
        input.focus();
        input.value = inputValue;
        // 触发input事件，确保页面感知到值变化（部分页面需要）
        input.dispatchEvent(new Event('input'));
      }
    }, twitch); // 此处twitch会作为inputValue传入页面上下文的函数
    
    // 如果需要延迟操作，用原生setTimeout封装Promise
    // await new Promise(resolve => setTimeout(resolve, 3000));
  }
}
const test = new Agent(EXTENSION);
test.getPage('test');

关键要点 #

• page.evaluate传参规则：第一个参数是页面上下文执行的函数，后续参数会依次传入该函数，必须显式在函数中接收。
• 避免冗余Promise：利用page.evaluate本身的异步特性，直接await即可，无需额外封装。
• 元素存在性检查：操作DOM前判断元素是否存在，避免抛出未找到元素的错误。
• 触发输入事件：设置输入框值后，手动触发input事件，确保页面的表单验证或状态更新能正常触发。

内容的提问来源于stack exchange，提问作者me.limes