Chrome Extension Cookie Editor: A Developer's Guide

Chrome extensions provide powerful capabilities for managing browser cookies, enabling developers to build sophisticated tools for session management, testing, and debugging. Understanding how to read, write, and delete cookies through the Chrome Extension API opens up numerous possibilities for automation and developer productivity.

This guide covers practical implementations for developers building cookie management features into Chrome extensions.

Understanding the Chrome Cookies API

Chrome extensions interact with cookies through the chrome.cookies API, which provides methods for querying, setting, and removing cookies across all URLs. Unlike standard JavaScript cookie access, the cookies API works with HTTP-only cookies and can access cookies set on any domain.

Required Permissions

Before using the cookies API, you must declare the appropriate permissions in your extension’s manifest:

{
  "name": "Cookie Editor Extension",
  "version": "1.0",
  "permissions": [
    "cookies",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

The cookies permission allows API access, while host_permissions determines which domains your extension can access. Using <all_urls> grants access to all websites, but you can restrict this to specific domains for better security.

Reading Cookies

Retrieving cookies for a specific URL requires the chrome.cookies.get() method:

// Get a specific cookie by name
async function getCookie(url, name) {
  return new Promise((resolve) => {
    chrome.cookies.get({ url, name }, (cookie) => {
      resolve(cookie);
    });
  });
}

// Example usage
const sessionCookie = await getCookie('https://example.com', 'session_id');
console.log(sessionCookie.value);

For retrieving all cookies associated with a domain, use chrome.cookies.getAll():

async function getAllCookiesForDomain(domain) {
  return new Promise((resolve) => {
    chrome.cookies.getAll({ domain }, (cookies) => {
      resolve(cookies);
    });
  });
}

// Get all cookies for example.com
const cookies = await getAllCookiesForDomain('.example.com');
cookies.forEach(cookie => {
  console.log(`${cookie.name}: ${cookie.value}`);
});

The getAll() method accepts various filters including domain, name, path, secure, and session status.

Setting Cookies

Creating or updating cookies uses chrome.cookies.set():

async function setCookie(url, name, value, options = {}) {
  const defaultOptions = {
    url: url,
    name: name,
    value: value,
    path: '/',
    secure: false,
    httpOnly: false,
    expirationDate: Math.floor(Date.now() / 1000) + (7 * 24 * 60 * 60) // 7 days
  };

  const cookieOptions = { ...defaultOptions, ...options };

  return new Promise((resolve) => {
    chrome.cookies.set(cookieOptions, (cookie) => {
      if (chrome.runtime.lastError) {
        console.error('Cookie set failed:', chrome.runtime.lastError);
        resolve(null);
      } else {
        resolve(cookie);
      }
    });
  });
}

// Set a session cookie
await setCookie('https://api.example.com', 'auth_token', 'abc123', {
  secure: true,
  httpOnly: true
});

When setting cookies, remember that Chrome automatically handles the domain property. If you omit it, Chrome derives the domain from the URL. For subdomain cookies, prefix the domain with a dot.

Deleting Cookies

Removing cookies requires chrome.cookies.remove():

async function deleteCookie(url, name) {
  return new Promise((resolve) => {
    chrome.cookies.remove({ url, name }, (details) => {
      resolve(details);
    });
  });
}

// Delete a specific cookie
await deleteCookie('https://example.com', 'old_session');

To clear all cookies for a domain, iterate through all cookies and remove each one:

async function clearAllCookiesForDomain(domain) {
  const cookies = await getAllCookiesForDomain(domain);
  
  for (const cookie of cookies) {
    const protocol = cookie.secure ? 'https:' : 'http:';
    const cookieUrl = `${protocol}//${cookie.domain}${cookie.path}`;
    await deleteCookie(cookieUrl, cookie.name);
  }
}

Understanding cookie attributes helps you manage cookies correctly:

Attribute	Description
`name`	Cookie identifier
`value`	Cookie data
`domain`	Allowed domains
`path`	URL path scope
`secure`	HTTPS-only transmission
`httpOnly`	JavaScript access blocked
`sameSite`	Cross-site request policy
`expirationDate`	Unix timestamp for expiry

The sameSite attribute accepts 'strict', 'lax', or 'no_restriction'. Modern browsers default to 'lax', so explicitly setting this attribute ensures consistent behavior.

A practical cookie editor extension includes a popup interface for viewing and editing cookies:

// popup.js - Load and display cookies
document.addEventListener('DOMContentLoaded', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const url = new URL(tab.url);
  
  const cookies = await new Promise((resolve) => {
    chrome.cookies.getAll({ domain: url.hostname }, resolve);
  });
  
  const cookieList = document.getElementById('cookie-list');
  cookies.forEach(cookie => {
    const row = document.createElement('div');
    row.className = 'cookie-row';
    row.innerHTML = `
      <span class="cookie-name">${cookie.name}</span>
      <span class="cookie-value">${cookie.value.substring(0, 20)}...</span>
      <button data-name="${cookie.name}" class="delete-btn">Delete</button>
    `;
    cookieList.appendChild(row);
  });
  
  // Handle deletion
  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      const name = e.target.dataset.name;
      await deleteCookie(url.href, name);
      location.reload();
    });
  });
});

Security Considerations

When building cookie management features, follow these security practices:

Minimum Permissions: Request only the host permissions your extension actually needs. Instead of <all_urls>, specify exact domains when possible.

Secure Cookie Handling: When setting cookies for authentication, always use secure: true and httpOnly: true to prevent XSS attacks:

await setCookie('https://example.com', 'session', token, {
  secure: true,
  httpOnly: true,
  sameSite: 'strict'
});

Validate Inputs: Always validate cookie names and values before setting them:

function isValidCookieName(name) {
  return /^[a-zA-Z0-9_]+$/.test(name) && name.length < 4096;
}

Common Use Cases for Developers

Chrome extension cookie manipulation serves various development scenarios:

Session Testing: Quickly modify session cookies to test authentication flows
API Development: Set and refresh API tokens without manual browser login
Cross-Domain Testing: Test cookie-based features across subdomains
Debugging: Inspect and modify cookies to understand application behavior
Automation: Create workflows that involve cookie-based state management

Building a cookie editor extension requires understanding the Chrome cookies API, proper permission configuration, and security best practices. The methods covered here provide the foundation for creating powerful cookie management tools tailored to your development workflow.

Built by theluckystrike — More at zovo.one

Chrome Extension Cookie Editor: A Developer’s Guide