如何阻止Puppeteer执行操作时聚焦浏览器窗口？

以下是几个实用方案，既能保留非无头模式的扩展支持与调试能力，又能避免截图时浏览器干扰前台操作：

方案1：将浏览器窗口移至屏幕外 #

启动Chrome时通过--window-position参数把窗口放到屏幕可视区域外，即使截图时窗口前置也不会遮挡工作窗口，需要调试时手动拖回屏幕即可。

示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--window-position=-10000,-10000', // 将窗口移至屏幕左上角外的区域
      '--no-focus-on-launch' // 启动时不自动获取焦点
    ]
  });

  const page = await browser.newPage();
  await page.goto('https://example.com');

  // 每秒执行一次截图
  setInterval(async () => {
    await page.screenshot({ path: `screenshot-${Date.now()}.png` });
  }, 1000);
})();

方案2：阻止浏览器获取焦点 #

通过Chrome启动参数禁止窗口在启动或操作时获取焦点，从根源上避免窗口前置：

添加以下核心参数：

• --no-focus-on-launch：启动浏览器时不自动抢占焦点
• --no-focus-on-tab-change：切换标签页时不获取焦点

示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--no-focus-on-launch',
      '--no-focus-on-tab-change'
    ]
  });

  // 后续截图逻辑同上
})();

方案3：启动时最小化浏览器窗口 #

如果不需要实时查看浏览器界面，可直接启动最小化窗口，截图操作完全不会影响前台工作，调试时手动点击任务栏图标恢复即可。

示例代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--start-minimized' // 启动时自动最小化窗口
    ]
  });

  // 后续截图逻辑同上
})();

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