Read DOMStorage / LocalStorage via Chrome DevTools Protocol

Question

I know the following code snippet allows me to read all current cookies:

let Main = await import('./main/main.js');
await Main.MainImpl.sendOverProtocol('Network.getCookies');

Now, for testing purposes, I need to get all available LocalStorage entries. I tried a few things but unfortunately I did not get it. Chrome DevTools itself does only query it with the already available securityOrigin variable, and I do not know where it is taken from:

I also found Page.getFrameTree but there are missing some entries - so I think this does not relate to the entries of LocalStorage:

Is there any other method in the docs I am missing?

Edit #1

As mentioned in the comments I got it to work with Page.getResourceTree. Unfortunately the next issue I get is the following:

Protocol error (DOMStorage.getDOMStorageItems): Frame not found for the given security origin.

Answer 1

Does this suffice?

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('http://example.org/');

    await page.evaluate(() => { window.localStorage.setItem('foo', 42); });

    const cdp = await page.target().createCDPSession();

    const data = await cdp.send('DOMStorage.getDOMStorageItems', {
      storageId: {
        securityOrigin: await page.evaluate(() => window.origin),
        isLocalStorage: true,
      },
    });
    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

Output:

{ entries: [ [ 'foo', '42' ] ] }