Chrome扩展是否存储Cookie？如何实现扩展获取、保存特定网站Cookie并渲染用户个人页面

Hey John, let's break down how to build this Chrome extension step by step, and clear up your confusion about cookie storage along the way.

First off: Chrome extensions don't need to convert the target site's cookies into their own "extension cookies". Instead, we'll use Chrome's built-in chrome.storage API to persist the cookie key-value pairs. This is far more appropriate for extension scenarios than regular localStorage, as it's designed to work across extension contexts (like background workers and popups).

1. Configure Extension Permissions #

Start by declaring the necessary permissions in your manifest.json (we'll use Manifest V3, the current recommended standard):

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "permissions": ["cookies", "storage", "activeTab"],
  "host_permissions": ["https://your-target-site.com/*"], // Replace with your site's domain
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

• cookies: Lets you call chrome.cookies.get()/getAll() to fetch cookies from the target site
• storage: Grants access to the chrome.storage API for persisting cookie data
• host_permissions: Specifies the exact domain you need to access cookies from

2. Fetch and Save Target Site Cookies #

You can trigger cookie retrieval either when the popup loads, or set up a background listener to track cookie changes in real time. Here's both approaches:

Option A: Fetch Cookies When Popup Opens (popup.js) #

async function getAndSaveCookies() {
  const targetUrl = "https://your-target-site.com";
  try {
    // Fetch all cookies for the target domain
    const cookies = await chrome.cookies.getAll({ url: targetUrl });
    // Convert cookies into a key-value object for easy storage/use
    const cookieMap = cookies.reduce((acc, cookie) => {
      acc[cookie.name] = cookie.value;
      return acc;
    }, {});
    // Save to chrome.storage.local (persists even after browser restarts)
    await chrome.storage.local.set({ siteCookies: cookieMap });
    console.log("Cookies saved successfully!");
  } catch (err) {
    console.error("Failed to fetch/save cookies:", err);
  }
}

// Run when the popup loads
document.addEventListener('DOMContentLoaded', getAndSaveCookies);

Option B: Real-Time Cookie Change Tracking (background.js) #

If you want to keep your stored cookies in sync with the site's cookies (e.g., if the user logs out/refreshes their session):

chrome.cookies.onChanged.addListener((changeInfo) => {
  const targetDomain = "your-target-site.com";
  // Only react to changes from our target site
  if (changeInfo.cookie.domain.includes(targetDomain)) {
    chrome.storage.local.get('siteCookies', (data) => {
      const updatedCookies = { ...data.siteCookies };
      if (changeInfo.removed) {
        // Remove deleted cookie from storage
        delete updatedCookies[changeInfo.cookie.name];
      } else {
        // Add/update new cookie in storage
        updatedCookies[changeInfo.cookie.name] = changeInfo.cookie.value;
      }
      chrome.storage.local.set({ siteCookies: updatedCookies });
    });
  }
});

3. Render the User Profile Page Using Saved Cookies #

When the user clicks the extension, you have two solid options to render the profile page:

Option 1: Use an Iframe with Injected Cookies #

Inject the saved cookies into the popup's document.cookie, then load the profile page in an iframe:

async function renderProfilePage() {
  try {
    const { siteCookies } = await chrome.storage.local.get('siteCookies');
    if (!siteCookies) {
      document.body.innerHTML = '<p>No saved cookies found. Please log in to the target site first!</p>';
      return;
    }
    // Set cookies in the popup's context
    Object.entries(siteCookies).forEach(([name, value]) => {
      document.cookie = `${name}=${value}; domain=your-target-site.com; path=/`;
    });
    // Create and load the iframe
    const iframe = document.createElement('iframe');
    iframe.src = 'https://your-target-site.com/user/profile'; // Replace with actual profile URL
    iframe.style.width = '100%';
    iframe.style.height = '500px';
    iframe.style.border = 'none';
    document.body.appendChild(iframe);
  } catch (err) {
    console.error("Failed to render profile page:", err);
  }
}

document.addEventListener('DOMContentLoaded', renderProfilePage);

Option 2: Fetch HTML Directly with Cookies #

If you don't want to use an iframe, fetch the page content with the saved cookies and inject it into the popup:

async function fetchAndRenderProfile() {
  try {
    const { siteCookies } = await chrome.storage.local.get('siteCookies');
    if (!siteCookies) {
      document.body.innerHTML = '<p>No saved cookies found. Please log in to the target site first!</p>';
      return;
    }
    // Convert cookie object to a string for the request header
    const cookieString = Object.entries(siteCookies)
      .map(([name, value]) => `${name}=${value}`)
      .join('; ');
    // Fetch the profile page with cookies included
    const response = await fetch('https://your-target-site.com/user/profile', {
      headers: { 'Cookie': cookieString },
      credentials: 'include'
    });
    const html = await response.text();
    // Inject the HTML into the popup
    document.body.innerHTML = html;
  } catch (err) {
    console.error("Failed to fetch profile page:", err);
  }
}

document.addEventListener('DOMContentLoaded', fetchAndRenderProfile);

• SameSite Cookie Restrictions: Some sites set SameSite=Strict/Lax on their cookies, which might block them from working in iframes or cross-context fetch requests. If this happens, you can use Chrome's declarativeNetRequest API to modify the cookie's SameSite attribute, or route requests through your background service worker as a proxy.
• Storage Limits: chrome.storage.local has a default 5MB limit, which is more than enough for most site cookie collections.
• Domain Matching: Make sure your host_permissions exactly match the target site's domain (e.g., use https://www.example.com/* instead of https://example.com/* if the site uses the www subdomain).

内容的提问来源于stack exchange，提问作者John