Mirroring the state of one of your existing Chrome Profiles in Puppeteer can prove extremely useful for local projects and testing.
Unless you’re interested in simulating an entire login process, utilising pre-existing settings - in this case, cookies - can significantly reduce your time spent replicating a state that exists elsewhere on your machine.
The following process requires NodeJS, NPM and Puppeteer. You’ll need to install all of those items in that order before going any further. Follow the instructions on their respective websites to get them installed on your system
The first issue is accessing the cookies. Cookies are encrypted for good reason: they contain sensitive information. On macOS, they’re ‘signed’ with a Chrome encryption key into an SQLite database which is managed by the OS keychain. In order to decrypt the signed cookies, your Node application must have access to the Chrome key inside the keychain. This requires authorisation by the logged in macOS user.
Thankfully, there is an NPM module chrome-cookies-secure
that is setup to handle this process. Copy and run the following code in your terminal (in the root of your project directory) to add the chrome-cookies-secure
module to your project:
npm i --save chrome-cookies-secure
If you’re not prompted to authorise Node access to your keychain on the module install, don’t worry. You will be prompted when you run the basic NodeJS app described a little further down.
Next you’ll need to identify the path to the Chrome Profile you want to mirror (you may have multiple you’d like to choose from).
Open Chrome and make sure you’re browsing with the profile you want to retrieve the cookies for, and navigate to chrome://version
. You’ll find the Profile of the current browser session under Profile Path
.
You can view all of your Chrome Profile directories at
Users/yourName/Library/Application Support/Google/Chrome
.This is often written as
~/Library/Application Support/Google/Chrome
where~
refers to the user’s root directory (In FinderMacintosh HD > Users > userName
=~
).
Now you have the basic information you need to retrieve your cookies within your Node app! Below is a simple code snippet to demonstrate the functionality. Let’s take a look at our https://www.google.com
cookies.
In a file of your choosing inside your project folder (I’ve called mine server.js
) paste in the following code:
const chrome = require('chrome-cookies-secure');
const url = 'https://www.google.com';
chrome.getCookies(url, 'puppeteer', function(err, cookies) {
if (err) {
console.log(err, 'error');
return
}
// do stuff here...
console.log(cookies, 'cookies');
}, 'yourProfile') // e.g. 'Profile 2'
The module does not yet fully support Promises or async/await, but we’re looking to add support. You can help us add it in at
https://github.com/bertrandom/chrome-cookies-secure
Update! March 2020 - there is a PR for a Promise wrapper awaiting approval - https://github.com/bertrandom/chrome-cookies-secure/pull/21
Next, ensuring you’re in the project root directory in your terminal, run node yourfilename.js
. You should see the cookies for the given profile and url you have chosen appear right there in the terminal, e.g:
In this example, we are looking at Google’s cookies. In the next section you will want to change this to a website where you are currently logged in
Now you can see your cookies in NodeJS, you can load them into Puppeteer!
Update your code to the following and run node yourfilename.js
.
const chrome = require('chrome-cookies-secure');
const puppeteer = require('puppeteer');
const url = 'https://www.yoururl.com';
const getCookies = (callback) => {
chrome.getCookies(url, 'puppeteer', function(err, cookies) {
if (err) {
console.log(err, 'error');
return
}
console.log(cookies, 'cookies');
callback(cookies);
}, 'yourProfile') // e.g. 'Profile 2'
}
getCookies(async (cookies) => {
const browser = await puppeteer.launch({
headless: false
});
const page = await browser.newPage();
await page.setCookie(...cookies);
await page.goto(url);
await page.waitFor(1000);
browser.close()
});
You’ll see Puppeteer open and navigate to your chosen site, and hopefully, providing there are no further security measures such as 2FA, you’ll see that you are logged in!
It’s worth noting there can be a thirty minute delay between new cookies in your Chrome Profile being reflected on your hard-drive (thus being accessible in your Node app). This is because Chrome persists cookies to storage once every thirty minutes. So if you have new cookies, give it 30 minutes and check it again.
You’ll also need to fully qualify URLs in order to retrieve all possible cookies for a given site i.e https://www.google.com
not https://google.com
.
But that’s it!
You should now be able to do what you want to do with Puppeteer, utilising a login state, preferences, or whatever else, from one of your Chrome Profiles!
Top comments (3)
Hi Reece, This is so useful that I can't live without it now.
About the PR for the Promise wrapper awaiting approval - github.com/bertrandom/chrome-cooki...
I can seed that they are contributed by you -
"Reece Daniels added 2 commits on Mar 22, 2020"
However, do you know who owns github.com/paragbaxi/chrome-cookie...? It has all your changes but licensed as somebody else -- see github.com/paragbaxi/chrome-cookie...
If you know him, could you ask him to publish an alternative npm module please? Else would you do it yourself?
That's actually what I'm trying to do here.
chrome-cookies-secure
has been out of maintenance for a year now and the world needs that Promise wrapped version.Thanks
Hi Suntong,
Sorry about the delay but you probably noticed from your own comments on the PR, we merged it in about a year ago
github.com/bertrandom/chrome-cooki...
Not workign at all. no window opens.