Use Puppeteer to interact with the DevTools UI while inspecting a page

gistfile1.txt

// Use Puppeteer to interact with the DevTools UI while inspecting a page
// This is a complete hack, but it allows you to interact with the DevTools UI using Puppeteer.
// In this example, I'm able to install Adblock Plus and navigate to the extension's tab

const puppeteer = require('puppeteer');

(async() => {
    // launch with devtools, which enables debugging capabilities
    // and load the Adblock extension (assumes the unpacked extension is in a folder called `adblock-unpacked`)
    const browser = await puppeteer.launch({ 
        devtools: true,
        args: [
            '--disable-extensions-except=adblock-unpacked',
            '--load-extension=adblock-unpacked/',
          ]
    });

    const wsEndpoint = browser.wsEndpoint();

    // the page I want to debug
    const myPage = await browser.newPage();
    const pageId = myPage.target()._targetId;

    // use the host:port that Chromium provided, but replace the browser endpoint with the page to inspect
    const pageTargeUrl = `${wsEndpoint.replace('ws://', '').match(/.*(?=\/browser)/)[0]}/page/${pageId}`;
                
    // generate the full debugging url for the page I want to inspect
    const pageDebuggingUrl = `chrome-devtools://devtools/bundled/devtools_app.html?ws=${pageTargeUrl}`;

    // open the debugging UI in a new tab that Puppeteer can interact with
    const devtoolsPage = await browser.newPage();
    await devtoolsPage.goto(pageDebuggingUrl);

    // navigate to the page now so that we start capturing data in the debugger UI
    await myPage.goto('http://news.bbc.co.uk');
    
    // the installed extension may open a new tab so make sure we select the debugger UI tab
    await devtoolsPage.bringToFront()

    // use Cmd + ] shortut to move across tabs until we're on the the Adblock Plus tab
    let selectedAdblockTab = null;

    while (!selectedAdblockTab) {
        await devtoolsPage.keyboard.down('MetaLeft');
        await devtoolsPage.keyboard.press(']');
        await devtoolsPage.keyboard.up('MetaLeft');

        selectedAdblockTab = await devtoolsPage.evaluate(() => {
            return document.querySelector('#-blink-dev-tools > div.widget.vbox.root-view > div > div > div').shadowRoot.querySelector('#tab-chrome-extension\\\:\\\/\\\/cfhdojbkjhnklbpkdaibdccddilifddbAdblockPlus[aria-selected="true"]');
        })
    }
})();