The chrome.cookies API enables extensions to create, retrieve, edit and remove cookies from a specific and/or all domains. You can see Google Chrome Documentation on it: https://developer.chrome.com/docs/extensions/reference/api/cookies

What are Internet Cookies 🍪 ?

Simply put internet cookies are small files save on your browser that usually hold data specific to your computer. They are linked to a particular domain/website. Cookies can only be accessed by the site that created they.

The data usually stored in cookies are user ids, tokens, whether you’ve visited the site before or other sensitive data.

The chrome.cookies API allows us to access these cookies independent the of website restriction.

Please use this power for good! Then again the developers reading this article are probably a bunch of villains.

How to use your cookies

We’ll show you to find see cookies manually for any websites

Right click on any page. And select inspect which should open up the inspect window.

When you open up the inspect window, Go to the Application tab and the select Cookies and when you select the domain under Cookies, the inspect window will show you the a list of cookies for that domain.

How to declare it in the Manifest.json

Notify that we also need to specify the host_permissions so that users of the extensions know that those particular domains will be accessed.

{
  ...
  "host_permissions": [
    "*://*.google.com/",
    "*://*.facebook.com/"
  ],
  "permissions": [
    "cookies"
  ],
  ...
}

{
  ...
  "host_permissions": [
    "<all_urls>"
  ],
  "permissions": [
    "cookies"
  ],
  ...
}

How to Get Cookies in Code

Get one cookie

// get a specific cookie
chrome.cookies.get({ name: "_ga", url: "https://medium.com" }, (cookie) => {
    console.log(cookie.value);
});

/* or use async/await */
const cookie = await chrome.cookies.get({ name: "_ga", url: "https://medium.com" });
console.log(cookie.value);

Get all the cookies

// get all the cookies
chrome.cookies.getAll({ }, (cookies) => {
   console.log(cookies);
});


/* or use async/await */
const cookies = await chrome.cookies.getAll({ });
console.log(cookies);

You can filter the cookies that you want. The inspect window from earlier will show you how the values that you can filter by.

// get all the cookies
    chrome.cookies.getAll({

        // (Optional) Filters the cookies by name
        name: "xsrf",

        // (Optional) Filters the cookies by name.
        domain: "medium.com",

        // (Optional) RFilters the cookies by their Secure property.
        path: "/",

        // (Optional) Filters the cookies by name.
        secure: true,

        // (Optional) Filters out session vs. persistent cookies.
        session: true,

        //(Optional) Restricts the retrieved cookies to those that would match the given URL.
        // url: ''

    }, (cookies) => {
        console.log(cookies);
    });

How to Save Cookies in Code

You be able to verify that the cookie has been save via the inspect window.

chrome.cookies.set({
   // The domain for the url must be listed in the host_permissions
   url: "https://medium.com/",

   // optional
   name: "mycookie",
   value: "its-working",
   domain: "medium.com",
}, (cookie) => {
   console.log(cookie);
});

For more options on setting cookies you can look at Chrome documentation on it here: https://developer.chrome.com/docs/extensions/reference/api/cookies#method-set

How to Remove Cookies in Code

You can only remove only cookie at a time using the chrome.cookies API.

// URL domain must be listed in the host_permissions
chrome.cookies.remove({
       url: "https://medium.com/",
       name: "mycookie"
 }, (cookie) => {
     console.log(cookie);
});

If you want to remove all the cookies at once there is another API for such a purpose the chrome.browsingData API. You can read about it here or read our article about it; Understanding Chrome Extensions Browsing Data.

How to listener for Cookies Changes

// When a cookie changes
chrome.cookies.onChanged.addListener((data) => {
    console.log(data);
});

Sample Project

The Google Chrome Team have provided source code for sample chrome extension projects that you can run. We are going to create our own implementation of it. You can find our source code here: https://github.com/BuildChromeExtensions/chromecookieclearer

How the chrome extension will work

Once the user clicks the chrome extension’s action icon on the toolbar they will be prompted to clear a specific cookie by name or all the cookies of that page. For this project will need 3 files; a background scripts background.js , a content script content.js and manifest.json

A listener for when the action icon is clicked will send a message to the content script to show a prompt.

When the prompt on the content script is interacted with it will send a message back to the background script with the instructions to click the cookie.

manifest.json

{
    "name": "Chrome Cookie Cleaner",
    "manifest_version": 3,
    "version": "1.0.0.0",
    "host_permissions": [
        "<all_urls>"
    ],
    "permissions": [
        "cookies"
    ],
    "action": {
        "default_title": "Clear Cookies"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

content.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message == 'cookies') {
        const name = window.prompt(`What cookie to delete? Enter ALL to remove all cookies.`);
        const url = window.location.href;

        if (name == "ALL") {
            // Send message to background script
            chrome.runtime.sendMessage({ action: "remove-all", url: url })
        } else if (name) {

            // Send message to background script
            chrome.runtime.sendMessage({
                action: "remove-cookie",
                name: name,
                url: url,
            })
        }

    }
})

background.js

// When the action icon on the toolbar is clicked
chrome.action.onClicked.addListener((tab) => {
    chrome.tabs.sendMessage(tab.id, 'cookies');
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action == 'remove-cookie') {

        // remove 
        chrome.cookies.remove({ url: message.url, name: message.name, }, (cookie) => {
            console.log(cookie);
        });
    } else if (message.action == 'remove-all') {

        // remove the those cookies
        chrome.cookies.getAll({ url: message.url }, (cookies) => {
            for (const cookie of cookies) {
                chrome.cookies.remove({ url: message.url, name: cookie.name, });
            }
        });
    }
})


// When a cookie changes
chrome.cookies.onChanged.addListener((data) => {
    // console.log(data)
});

Chrome Extension

Cookies