如何使用Puppeteer自动固定Chrome浏览器扩展

要实现扩展的自动固定，核心是操作Chrome的chrome://extensions内部页面，结合Puppeteer的页面控制能力完成固定操作。以下是完整的实现方案：

实现步骤 #

1. 获取已加载扩展的ID：通过Puppeteer的目标检测，定位扩展的后台页面并提取ID
2. 打开chrome://extensions页面：访问Chrome扩展管理界面
3. 启用开发者模式：固定按钮仅在开发者模式下可见，需自动检测并开启
4. 定位并点击固定按钮：找到对应扩展的固定控件，执行点击操作

完整代码示例 #

基于你的现有代码补充固定逻辑，同时完善缺失的ask函数实现：

const puppeteer = require('puppeteer-extra');
const { click, delay } = require('puppeteer-utilz');
const path = require('path');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
const stealth = StealthPlugin();
puppeteer.use(StealthPlugin());
stealth.enabledEvasions.delete('iframe.contentWindow');

require('dotenv').config();
const readline = require('readline');

// 实现readline交互函数
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

function ask(question) {
  return new Promise(resolve => rl.question(question, resolve));
}

(async () => {
  try {
    for (;;) {
      const email = await ask('Email: ');

      const extension1 = path.join(process.cwd(), 'extensions/adblocker');
      const options = {
        headless: false,
        args: [
          `--disable-extensions-except=${extension1}`,
          `--load-extension=${extension1}`,
          "--start-maximized",
          "--disable-features=ChromeWhatsNewUI" // 关闭新功能提示避免干扰
        ]
      };
          
      const browser = await puppeteer.launch(options);
      const pages = await browser.pages();
      const mainPage = pages[0];

      // 1. 获取扩展ID
      const extensionTargets = await browser.targets();
      const extensionTarget = extensionTargets.find(target => 
        target.type() === 'background_page' && target.url().includes('extensions/adblocker')
      );
      if (!extensionTarget) {
        console.error('无法定位扩展后台页面');
        continue;
      }
      const extensionUrl = extensionTarget.url();
      const extensionId = extensionUrl.split('/')[2]; // 从chrome-extension://{id}/...中提取ID

      // 2. 打开扩展管理页面
      const extensionsPage = await browser.newPage();
      await extensionsPage.goto('chrome://extensions/', { waitUntil: 'domcontentloaded' });

      // 3. 启用开发者模式（未开启则自动点击）
      const devModeToggle = await extensionsPage.$('#devMode');
      const isDevModeEnabled = await extensionsPage.evaluate(toggle => toggle.checked, devModeToggle);
      if (!isDevModeEnabled) {
        await devModeToggle.click();
        await delay(1000); // 等待页面刷新
      }

      // 4. 点击固定按钮
      const pinButtonSelector = `#extension-id-${extensionId} .pin-button`;
      await extensionsPage.waitForSelector(pinButtonSelector, { timeout: 5000 });
      await extensionsPage.click(pinButtonSelector);

      console.log(`扩展 ${extensionId} 已成功固定`);

      // 后续可添加你的业务逻辑，比如访问目标页面
      // await mainPage.goto('https://example.com');
    }
  } catch (err) {
    console.error(err);
  }
})();

关键注意事项 #

• 开发者模式依赖：固定按钮仅在开发者模式下显示，代码中已包含自动检测并开启的逻辑
• 扩展ID可靠性：通过后台页面URL提取ID是稳定的方式，每个加载的扩展都会生成对应的后台目标
• 延迟控制：操作内部页面时需添加适当延迟，确保元素加载完成后再执行操作
• 无头模式限制：建议保持headless: false，无头模式下访问chrome://extensions可能存在权限或界面渲染问题

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