Chrome – Accidentally deleted ALL Chrome cookies while trying to view some

cookiesdata-recoverygoogle-chromestyles

I was trying to view the cookies in Chrome and perhaps delete them for a specific site. I tried to click the search box to enter some text to view just the cookies for the specific site, but accidentally ended up clicking the [Remove All] button because they are so close together:

Screenshot of Cookie management dialog of Chrome with Remove All button disturbingly close to the search box

Now I’ve lost all of my Chrome cookies which means having to re-login to every single site, as well as losing progress in online games, settings of web applications, and so on.

This is horrible! Why would the Chrome designers put the button to delete everything so close to a field that is expected to be clicked? Worse, why would they make it an instant-action button with no confirmation prompt‽

Is there anything I can do about this?

Best Answer

Unfortunately sometimes it seems like the Chrome developers don’t even have a design team (certainly nobody with actual UI/UX knowledge or experience). This is one such example, and a destructive and costly one at that.

A bug-report has already been filed about this, but it has been “untriaged” (read unimportant), and may very well end up fester, unaddressed indefinitely until it is automatically closed.

There’s no (practical?) way to recover the lost cookies short of restoring a backup, but fortunately, there is a step you can take to at mitigate the problem in the future. You can easily reduce (or if you choose, completely eliminate) the chances of accidentally deleting all of your cookies in Chrome, and make it fast and easy to search for cookies instead of moving really slowly and carefully to avoid clicking that button.

Because the cookie-management dialog is just a web page, and thankfully the button has a unique ID (though more for technical reasons than foresight or decency on the part of the devs), you can add modify the button via the user style sheet:

  1. Open your User Data directory
  2. Open the User StyleSheets folder
  3. Open the file Custom.css in a text-editor

  4. Add the following rule:

    /*Shrink and move the Remove All cookies button in the
 cookies dialog to avoid accidentally deleting all cookies*/

button.remove-all-cookies-button {
  margin     : -10px 50px 25px 0px !important;
  padding    : 0.25em  !important;
  font-size  : 0.75em  !important;
  min-width  : inherit !important;
  min-height : inherit !important;
}
    • (You can also disable or even hide it altogether—or whatever else you want—with the appropriate CSS.)
  5. Save the file
  6. Check the page chrome://settings/cookies


The [Remove All] button should now be smaller and away from other parts of the page that you will likely click:

enter image description here

Related Question