Chrome-remote-interface: how to manipulate with tabs?

[hbakhtiyor]

how to open tab, navigate url and close tab?

[cyrus-and]

Using CDP.New(), client.Page.navigate() and CDP.Close().

All together:

const CDP = require('chrome-remote-interface');

async function navigateInANewTab(url) {
    const tab = await CDP.New();
    const client = await CDP({tab});
    const {Page} = client;
    await Page.enable();
    await Page.navigate({url});
    await Page.loadEventFired();
    await CDP.Close({id: tab.id});
}

navigateInANewTab('https://github.com');

[hbakhtiyor]

@cyrus-and thanks,

Error: Could not create new page, i think not in stable chrome release?

What's the differences between CDP.Close and client.close?

[cyrus-and]

Error: Could not create new page, i think not in stable chrome release?

Maybe related to #124?

As you can see from the doc:

• CDP.Close closes the chosen tab (and implicitly detach the client from it, if that tab was inspected);

• client.close detach the client from the currently inspected tab.

[hbakhtiyor]

thanks, which better CDP.New({url}) or Page.navigate({url})?

[cyrus-and]

Not better, different. With the former you cannot keep track of the page load, e.g., registering events as I did in the above example.

[hbakhtiyor]

btw, how to handle errors for CDP.New(); and CDP({tab}); in the above example?

[cyrus-and]

As you usually do in JavaScript. Since navigateInANewTab is an async function which uses await to handle the promises you can either use a try/catch inside that function or handle the errors from outside:

navigateInANewTab('https://github.com').then(() => {
    console.log('OK');
}).catch((err) => {
    console.error('ERROR', err);
})

You can even call it within a try/catch inside another async function...

[pthieu]

@cyrus-and: getting some problems on attaching to chrome on a remote machine. Seems to hang when I do CDP.Close({id: tab.id}). I checked the the ID at http://host:port/json of my server, and the ID matches.

I then run the exact same code, but point it to a local instance of chrome (same machine as script) and it works.

var tab = await CDP.New({
  host: CHROME_FE_HOST || 'localhost',
  port: CHROME_FE_PORT || 9222,
});
...
do some stuff
...
await CDP.Close({
  id: tab.id
});

This is the only part of the code that would be different.

Any ideas?

[hbakhtiyor]

@pthieu

need also pass the option to Close method

e.g.

const options = {
  host: CHROME_FE_HOST || 'localhost',
  port: CHROME_FE_PORT || 9222,
};

var tab = await CDP.New(options);
...
do some stuff
...
await CDP.Close(Object.assign(options, {
  id: tab.id
}));

[pthieu]

@hbakhtiyor: options were applied to the tab upon instantiation of it though. It works on localhost but not on remote host.

[hbakhtiyor]

because default options are localhost and 9222, since you're connecting to remote host, need to pass host and port to another methods too

[pthieu]

@hbakhtiyor
host and port are passed in here:

const options = {
  host: CHROME_FE_HOST || 'localhost',
  port: CHROME_FE_PORT || 9222,
};

then used to instantiate the tab. I guess I'll try to pass in options again when closing. Probably the tab object doesn't keep information about remote host. Which doesn't make sense because i can just do:

CDP({tab: tab})

and it will work. But most likely this at time you're passing the entire tab and not just id. Makes sense. I'll try to pass in remote information. Thanks.

[hbakhtiyor]

hmm, it was clear, if you want to connect to remote host, you need to pass the option to another methods too, check the docs

[cyrus-and]

@pthieu, @hbakhtiyor yes DevTools methods such as List, New, etc. require the HTTP endpoint information as it's specified in the doc.

It works on localhost but not on remote host.

Chrome will always listen on localhost meaning that you cannot attach to a Chome instance running on another host without some tricks (e.g., SSH tunnel).

[bootrino]

Suggest your reply "how to open tab, navigate url and close tab?" be added to wiki thanks.

[cyrus-and]

@bootrino Inspect a new tab.