🍪 Cookie Manager 浏览器扩展 / Cookie Manager Browser Extension

English | 中文

Cookie Manager is a lightweight Chrome extension designed to help users easily view, edit, import, and export cookies for the current webpage.

✨ Features

• View Cookies: Clearly displays all cookies for the current website.
• Manage Cookies: Supports adding, editing, and deleting individual cookies.
• Clear Cookies: One-click clearing of all cookies for the current website.
• Import/Export: Supports exporting cookies to a JSON file or importing cookies from a JSON file.
• Dark Mode: Offers a dark theme to suit different user visual preferences.
• Bilingual Interface: Supports both Chinese and English interfaces.
• Detailed View: Option to display more detailed cookie information (Path, Secure flag, HttpOnly, SameSite).
• Settings: Customize preferences like confirmation before deletion, dark mode, and detail view.

🔒 Privacy and Permissions

Cookie Manager respects your privacy and follows the principle of least privilege. It only requires the following permissions to provide its core functionality:

• activeTab: Allows the extension to access the currently active tab when the user clicks its icon. This is key for core functionality and limiting access scope.
• cookies: Necessary permission to access and modify cookies.
• storage: Used to save user setting preferences, such as dark mode, confirm deletion options, etc.
• host_permissions (http://*/*, https://*/*): Required by the chrome.cookies API to read and write cookies. Although broad permissions are requested, the extension only operates on the cookies of the currently active tab when the user interacts with it.

Important Notes:

• The extension does not run automatically in the background or access websites you are not interacting with.
• All cookie operations and settings are saved locally and no data is transmitted to external servers.
• The code is fully open-source, allowing you to inspect the extension's behavior and ensure it aligns with its stated functions.

🚀 Development

Prerequisites

• Node.js and npm (or yarn)

Install Dependencies

npm install
# or
# yarn install

Build Extension

For production build:

npm run build
# or
# yarn build

The built files will be located in the dist directory.

Development Mode

Start development mode with automatic rebuilding on file changes:

npm run dev
# or
# yarn dev

Load into Chrome

1. Open Chrome browser.
2. Enter chrome://extensions/ in the address bar to go to the extensions page.
3. Enable "Developer mode" in the top right corner.
4. Click "Load unpacked".
5. Select the dist folder in the project root directory.

📁 Project Structure

cookie-manage/
├── dist/             # Build output directory
├── public/           # Static assets (like icons)
├── src/
│   ├── _locales/     # Internationalization (i18n) files
│   │   ├── en/       # English resources
│   │   └── zh_CN/    # Chinese resources
│   ├── css/          # CSS style files
│   │   └── styles.css
│   ├── js/           # JavaScript modules
│   │   ├── cookieService.js # Core cookie operations
│   │   ├── i18n.js        # Internationalization handling
│   │   ├── popup.js       # Popup window main logic
│   │   ├── settings.js    # Settings management
│   │   ├── ui.js          # UI rendering and interaction
│   │   └── utils.js       # Utility functions
│   ├── background.js # Background service worker
│   ├── manifest.json # Extension manifest file
│   └── popup.html    # Popup window HTML structure
├── .gitignore        # Git ignore configuration
├── package.json      # Project dependencies and script config
├── package-lock.json # Dependency version lock
└── README.md         # Project description (this file)

📄 License

This project is licensed under the MIT License.