Chrome Extension - get all cookies for a specific tab - is it correct?

Question

I'm trying to get all cookies for a particular tab.

The trouble I'm having, and bear with me because I'm no cookie expert, the cookies I get from all the different methods are different / incomplete.

Method 1:

document.cookie - the way I understand it, those are the cookies that are associated with the document. In other words, I load a URL in chrome, in the Network tab I see there was a document requested for the URL I'm loading. In the request headers I can see cookies.

For some reason, though, the cookies I see in the request headers are different to what document.cookie will print. Also, when I check DevTools - Application - Cookies, there are a lot more cookies compared to document.cookie.

Method 2:

I came across a reply from mr. wOxxOm - HERE:

chrome.tabs.executeScript({
  code: 'performance.getEntriesByType("resource").map(e => e.name)',
}, data => {
  if (chrome.runtime.lastError || !data || !data[0]) return;
  const urls = data[0].map(url => url.split(/[#?]/)[0]);
  const uniqueUrls = [...new Set(urls).values()].filter(Boolean);
  Promise.all(
    uniqueUrls.map(url =>
      new Promise(resolve => {
        chrome.cookies.getAll({url}, resolve);
      })
    )
  ).then(results => {
    // convert the array of arrays into a deduplicated flat array of cookies
    const cookies = [
      ...new Map(
        [].concat(...results)
          .map(c => [JSON.stringify(c), c])
      ).values()
    ];

    // do something with the cookies here
    console.log(uniqueUrls, cookies);
  });
});

The way I understand mr. wOxxOm's reply is that it gets all the cookies from all the requests that were made when loading a URL in the particular tab.

Again, when I compare what I get from the code above, it differs to what I see in DevTools - Application - Cookies.

Maybe it is because some cookies are set using JS after the page is loaded and hence were not part of the requests made when loading the original URL?

Method 3:

Then there is chrome.cookies.getAll, But it gets all the cookies stored in chrome. And if I understand correctly, this is the reason for the Method 2 solution. If we get ALL the cookies, we don't know which tab they belong to, since a single tab can save cookies for multiple domains.

I found a comment from mr. wOxxOm which explains how to identify incognito cookieStore and to me it seems like this is the only solution that truly gets you all the cookies saved for a particular tab and should hopefully match what is displayed in DevTools - Application - Cookies.

By using a single tab in incognito mode, we're basically isolating that tab's cookies from the rest and hopefully covering all of them.

Something along the lines of:

Open Incognito window
Browse a URL (and do stuff, ie log in etc.)
Find out what cookieStore ID the tab belongs to
Use chrome.cookies.getAll to get all the cookies for that particular cookieStore

Something along the lines of:

// get current tab (my extension will work by clicking the extension icon, so popup.html/popup.js)
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var currTab = tabs[0];
    if (!currTab["incognito"]) { // If it's not an incognito tab, stop here
        console.log("current tab is not incognito");
    }
    else { // If it is an incognito tab, return tabId
        console.log(currTab["id"]);
    }
});

// Check cookieStoreId based on the tabId
chrome.cookies.getAllCookieStores(function (cookiestores){
    var cookieStore = cookiestores.find(obj => {
        return obj.tabIds.includes(tabId);
    });
    console.log(cookieStore["id"]);
});

get all cookies based on cookieStoreId
chrome.cookies.getAll({"storeId": "1"},function (cookie){
    console.log(cookie)
});

Are my assumptions correct? Is Method 3 really the only way to get all the cookies for a specific tab?

score 0 · Answer 1 · answered Jul 31 '23 at 07:36

For me, it turned out to be a permissions issue. I needed to request "<all_urls>" host permission to be able to see ALL cookies. Without it I only saw a portion of the cookies.

Manifest v3:

    "host_permissions": [
        "<all_urls>"
    ]

If you are interested in the script I wrote to get all cookies for a specific tab you will need the scripting and cookies permission.

    "permissions": [
        "cookies",
        "scripting"
    ]

My script, which is based on @wOxxOm's script, gets all cookies for the specified tab and deletes them:

/* eslint-disable */

const tabId = 114632975;

function getPerformanceEntries() {
    return performance
        .getEntriesByType('resource')
        .map(
            (r) => r.name
        );
}

const results = await chrome.scripting.executeScript(
    {
        target: { tabId },
        func: getPerformanceEntries
    }
);

const resourceUrls = results[0].result;

const origins = resourceUrls
    .map((url) => new URL(url).origin)
    .filter((url) => Boolean(url) && url !== 'null');

const uniqueOrigins = new Set(origins);

const getCookiesPromises = [];

for (const url of uniqueOrigins) {
    const promise = chrome.cookies
        .getAll(
            {
                url
            }
        )
        .then(
            (cookies) => (
                {
                    url,
                    cookies
                }
            )
        );

    getCookiesPromises.push(promise);
}

const urlCookies = await Promise.all(getCookiesPromises);

const filtered = urlCookies.filter((c) => c.cookies.length);

console.log('Found Cookies:', filtered);

console.log('Total Cookie Count:', filtered.reduce((acc, c) => acc + c.cookies.length, 0));

const deletePromises = [];

for (const { url, cookies } of filtered) {
    for (const cookie of cookies) {
        const promise = chrome.cookies.remove(
            {
                url,
                name: cookie.name,
                storeId: cookie.storeId
            }
        );

        deletePromises.push(promise);
    }
}

await Promise.all(deletePromises);

Chrome Extension - get all cookies for a specific tab - is it correct?

1 Answers1