Chrome Extension Cookie Manager — Developer Guide

8 min read

Build a Cookie Manager Chrome Extension

This tutorial walks you through building a fully-featured cookie manager extension that allows users to view, edit, delete, search, and export cookies.

Prerequisites

Step 1: Manifest Configuration

Create your manifest.json with the required permissions:

{
  "name": "Cookie Manager",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": [
    "cookies",
    "activeTab",
    "storage",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

Key permissions:

Step 2: Display Cookies for Current Site

Create popup.js to fetch and display cookies for the current tab:

document.addEventListener('DOMContentLoaded', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const url = new URL(tab.url);
  
  // Get all cookies for current domain
  const cookies = await chrome.cookies.getAll({ domain: url.hostname });
  
  displayCookies(cookies, url.hostname);
});

function displayCookies(cookies, domain) {
  const container = document.getElementById('cookie-list');
  container.innerHTML = cookies.map(cookie => `
    <div class="cookie-item" data-name="${cookie.name}">
      <span class="cookie-name">${cookie.name}</span>
      <span class="cookie-value">${cookie.value.substring(0, 30)}...</span>
    </div>
  `).join('');
}

Create a detailed view showing all cookie properties:

function showCookieDetails(cookie) {
  const details = `
    <div class="cookie-details">
      <h3>${cookie.name}</h3>
      <p><strong>Value:</strong> ${cookie.value}</p>
      <p><strong>Domain:</strong> ${cookie.domain}</p>
      <p><strong>Path:</strong> ${cookie.path}</p>
      <p><strong>Expires:</strong> ${new Date(cookie.expirationDate * 1000)}</p>
      <p><strong>Secure:</strong> ${cookie.secure}</p>
      <p><strong>HttpOnly:</strong> ${cookie.httpOnly}</p>
      <p><strong>SameSite:</strong> ${cookie.sameSite}</p>
      <p><strong>Store ID:</strong> ${cookie.storeId}</p>
    </div>
  `;
  document.getElementById('details-panel').innerHTML = details;
}

Implement inline editing with chrome.cookies.set:

async function updateCookie(name, newValue, domain) {
  const cookie = await chrome.cookies.get({ url: domain, name });
  
  if (cookie) {
    await chrome.cookies.set({
      url: domain,
      name: name,
      value: newValue,
      domain: cookie.domain,
      path: cookie.path,
      secure: cookie.secure,
      httpOnly: cookie.httpOnly,
      sameSite: cookie.sameSite,
      expirationDate: cookie.expirationDate
    });
  }
}

Note: For HttpOnly cookies, you cannot read or modify the value from JavaScript - this requires a background script.

Step 5: Delete Individual Cookies

Use chrome.cookies.remove to delete a specific cookie:

async function deleteCookie(name, domain) {
  const cookie = await chrome.cookies.get({ url: domain, name });
  
  if (cookie) {
    await chrome.cookies.remove({
      url: domain,
      name: name,
      storeId: cookie.storeId
    });
  }
}

Step 6: Bulk Operations

Delete all cookies for a domain or clear expired ones:

async function deleteAllForDomain(domain) {
  const cookies = await chrome.cookies.getAll({ domain });
  
  for (const cookie of cookies) {
    await chrome.cookies.remove({
      url: `http${cookie.secure ? 's' : ''}://${cookie.domain}`,
      name: cookie.name,
      storeId: cookie.storeId
    });
  }
}

async function clearExpired() {
  const allCookies = await chrome.cookies.getAll({});
  const now = Date.now() / 1000;
  
  for (const cookie of allCookies) {
    if (cookie.expirationDate && cookie.expirationDate < now) {
      await chrome.cookies.remove({
        url: `http${cookie.secure ? 's' : ''}://${cookie.domain}`,
        name: cookie.name,
        storeId: cookie.storeId
      });
    }
  }
}

Step 7: Search Across All Cookies

Search functionality across all domains:

async function searchCookies(query) {
  const allCookies = await chrome.cookies.getAll({});
  const results = allCookies.filter(cookie => 
    cookie.name.toLowerCase().includes(query.toLowerCase()) ||
    cookie.value.toLowerCase().includes(query.toLowerCase())
  );
  displayCookies(results, 'All Domains');
}

Step 8: Export and Import Cookies

Export cookies as JSON and import them back:

async function exportCookies() {
  const allCookies = await chrome.cookies.getAll({});
  const blob = new Blob([JSON.stringify(allCookies, null, 2)], 
    { type: 'application/json' });
  
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'cookies-export.json';
  a.click();
}

async function importCookies(file) {
  const text = await file.text();
  const cookies = JSON.parse(text);
  
  for (const cookie of cookies) {
    await chrome.cookies.set({
      url: `http${cookie.secure ? 's' : ''}://${cookie.domain}`,
      name: cookie.name,
      value: cookie.value,
      domain: cookie.domain,
      path: cookie.path,
      secure: cookie.secure,
      httpOnly: cookie.httpOnly,
      sameSite: cookie.sameSite,
      expirationDate: cookie.expirationDate
    });
  }
}

Additional Features

Listen for cookie changes using the onChanged event:

chrome.cookies.onChanged.addListener((changeInfo) => {
  console.log('Cookie changed:', changeInfo);
  // Update UI or show notification
});

Access cookies from different stores, including incognito:

async function getAllStores() {
  const cookieStores = await chrome.cookies.getAllCookieStores();
  return cookieStores;
}

// Get cookies from specific store
const cookies = await chrome.cookies.getAll({ 
  storeId: 'firefox-default' 
});

Display cookie count as a badge on the extension icon:

async function updateBadge(tabId) {
  const [tab] = await chrome.tabs.get(tabId);
  const url = new URL(tab.url);
  const cookies = await chrome.cookies.getAll({ domain: url.hostname });
  
  chrome.action.setBadgeText({ 
    tabId, 
    text: cookies.length.toString() 
  });
}

Best Practices

  1. Always handle Secure and HttpOnly cookies appropriately
  2. Use proper URL construction with protocol
  3. Handle different cookie stores for incognito mode
  4. Validate cookie data before modification
  5. Provide user feedback for all operations

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

No previous article
No next article