Let's Cookie! is a Chrome extension for inspecting and managing the cookies of the active website. Edit, copy, or delete cookie values from a compact popup, or apply a cookie to another open tab and reload that tab immediately.
It is designed as a practical developer tool for testing sessions, reproducing application state, and moving cookies between local or remote environments.
- About
- Features
- Tech stack
- Installation
- Permissions
- Usage
- Development
- Verification
- Limitations
- Privacy
- Contributing
- License
Let's Cookie! reads the cookies associated with the active tab and displays them in a React-based extension popup. Cookie operations use Chrome's extension APIs and remain inside the browser; the extension does not use an application server or an external service.
The signature Apply to Tab workflow copies a selected cookie to another open tab. Hovering over a destination temporarily adds it to Chrome's native tab selection while keeping the current tab active. After selection, the extension writes the cookie for the target hostname, reloads the tab, and activates it.
- Lists cookies available to the active tab's hostname.
- Edits cookie values directly from the popup.
- Copies cookie values to the clipboard with one click.
- Deletes individual cookies and refreshes the displayed list.
- Applies a cookie to any open tab with a valid URL.
- Highlights the hovered destination without switching away from the current tab.
- Preserves the selected cookie's security, same-site, HTTP-only, and expiration attributes when applying it to another tab.
- Follows the operating system's light or dark color preference.
- Uses a Manifest V3 background service worker for cookie writes and tab reloads.
- TypeScript
- React 18
- Primer React
- Sass with CSS Modules
- Chrome Extensions Manifest V3
- Webpack 5
- Jest
- Prettier
The recommended installation method is the Let's Cookie! Chrome Web Store listing.
- Select Add to Chrome.
- Confirm by selecting Add extension.
- Pin Let's Cookie! from Chrome's extension menu for convenient access.
Building from source requires a current Node.js release with npm and Google Chrome or another Chromium-based browser that supports Manifest V3.
git clone https://github.com/lukegskw/lets-cookie.git
cd lets-cookie
npm install
npm run buildThe production extension is generated in dist/.
- Open
chrome://extensionsin Chrome. - Enable Developer mode.
- Select Load unpacked.
- Choose the repository's
dist/directory.
After rebuilding, return to chrome://extensions and reload the extension to use
the new bundle.
The extension declares the following permissions in
public/manifest.json:
| Permission | Purpose |
|---|---|
cookies |
Read, create, update, and remove browser cookies. |
tabs |
List, highlight, activate, and reload destination tabs. |
<all_urls> |
Manage cookies across websites. |
These permissions are broad because cookie management and the cross-tab workflow must work for whichever sites the user opens. See Privacy for the project's data-handling policy.
- Open the website whose cookies you want to manage.
- Select the Let's Cookie! extension icon.
- Use the value field to edit a cookie, the copy button to copy its value, or the delete button to remove it.
- To copy a cookie to another site, select Apply to Tab, hover over the open tabs to identify the destination, and select the target tab.
Applying a cookie uses the target tab's hostname and the root path (/). The target
tab is then reloaded and brought to the foreground.
Install dependencies and start Webpack in watch mode:
npm install
npm run watchLoad dist/ as an unpacked extension once it has been generated. Webpack rebuilds
the bundle when source files change, but Chrome does not automatically reload the
extension; reload it from chrome://extensions after each rebuild.
The main extension entry points are:
src/popup.tsx, which mounts the popup interface.src/components/CookieManager/CookieManager.tsx, which reads and mutates cookies.src/components/CookieItem/CookieItem.tsx, which renders cookie actions and the destination-tab menu.src/background.ts, which applies cookies and reloads tabs.
Useful npm scripts:
| Command | Description |
|---|---|
npm run watch |
Build a development bundle and watch for source changes. |
npm run build |
Create an optimized production bundle in dist/. |
npm run clean |
Remove generated extension files. |
npm test |
Run Jest (currently exits with “No tests found” because no test files are committed). |
npm run style |
Format TypeScript and TSX files with Prettier. |
npm run release |
Build the extension and package dist/ as dist.zip. |
Create a production build:
npm install
npm run buildJest is configured, but the repository does not currently contain test files, so
npm test exits with a “No tests found” status. Add automated tests alongside future
behavior changes and include them in this verification flow.
Because extension behavior depends on Chrome APIs, also load the unpacked build and manually verify the following on a test site:
- The popup lists the active hostname's cookies.
- Editing, copying, and deleting a cookie behaves as expected.
- Apply to Tab highlights the hovered destination without changing the active tab, restores the previous tab selection on pointer leave, writes the cookie to the selected destination, reloads that tab, and activates it.
- The popup is readable in both light and dark system themes.
- The extension targets Chrome and Chromium-based browsers; Firefox and Safari are not currently documented or tested.
- It requests access to cookies on all URLs so that management can work across sites.
- Chrome controls the native tab highlight appearance; extensions cannot assign an arbitrary color to an individual tab.
- Cookie edits are applied as the value field changes; there is no separate save or undo action.
- Applying a cookie changes its domain to the destination hostname and its path to
/; it does not reproduce every source cookie attribute exactly. - Browser-protected pages such as
chrome://URLs cannot be scripted or used like ordinary websites. - The project does not currently provide cookie search, bulk operations, import, export, or synchronization.
Let's Cookie! does not collect, store, sell, or transmit personal information. Cookie
operations take place locally through Chrome's extension APIs. See the complete
PRIVACY-POLICY.md for details.
Contributions are welcome. Before opening a pull request, install dependencies and create a production build:
npm install
npm run buildFor behavior changes, add and run relevant tests, verify the unpacked extension in Chrome, and document any new permissions or user-visible behavior.
This project was originally built from the Chrome Extension TypeScript Starter and uses GitHub's Primer design system.
MIT. See LICENSE.