🎭 ccf-playwright-browser

🚀 Playwright AI skills combined with a Chrome extension for seamless browser automation with real user sessions

English | 🌐 中文

---

✨ Features

Feature	Description
🔐 Session Injection	Easily inject your own login sessions for OpenClaw automation
🛡️ Anti-Detection	Bypass browser detection with advanced stealth techniques
🍪 Cookie Extraction	Capture all cookies including HttpOnly cookies
🌐 Environment Mimicry	Replicate real browser environment (UA, locale, timezone, screen size)
📦 One-Click Export	Chrome extension for instant session extraction

---

📁 Project Structure

ccf-playwright-browser/
├── 📂 chrome-extension/     # Chrome extension for session extraction
│   ├── manifest.json        # Extension manifest
│   ├── popup.html           # Extension popup UI
│   ├── popup.js             # Popup logic
│   ├── background.js        # Service worker for data collection
│   └── README.md            # Extension documentation
├── 📂 scripts/              # Playwright automation scripts
│   ├── init_browser.js      # Browser initialization with stealth
│   └── snapshot.json        # Sample snapshot file
├── LICENSE                  # MIT License
└── README.md                # This file

---

🚀 Quick Start

1️⃣ Install Chrome Extension

1. Open Chrome and navigate to chrome://extensions
2. Enable "Developer mode" in the top right corner
3. Click "Load unpacked" and select the chrome-extension directory
4. The extension icon will appear in your toolbar ✅

2️⃣ Extract Login State

1. Navigate to any website you want to extract login state from
2. Log in to your account (if required) 🔐
3. Click the extension icon in the toolbar
4. Click "Extract Login State" to collect:
   • 🍪 Cookies (including HttpOnly)
   • 🌍 Browser environment
   • 📋 Request headers
   • 💾 Storage data
5. Click "Copy to Clipboard" 📋

3️⃣ Use with Playwright

// Save the copied JSON to snapshot.json
// Then run the initialization script
node scripts/init_browser.js scripts/snapshot.json

---

💡 Usage Example

After copying the JSON data from the extension, use it like this:

请使用下面的 browser snapshot 启用 ccf-playwright-browser，
并加载 cookies、headers、storage 和浏览器环境。
然后打开网页 `https://<your-website-url>/`，3秒后截图：

<copied json data>

---

🔧 Technical Details

🛡️ Stealth Features

The init_browser.js script includes advanced anti-detection measures:

• ✅ Removes navigator.webdriver flag
• ✅ Masks automation indicators
• ✅ Spoofs WebGL renderer info
• ✅ Randomizes canvas fingerprint
• ✅ Modifies audio context
• ✅ Custom permission queries
• ✅ Font checking bypass

🍪 Cookie Handling

• Automatically normalizes cookie expiration timestamps
• Supports all cookie attributes (Secure, HttpOnly, SameSite)
• Handles oversized values gracefully

🌐 Environment Capture

Data Type	Captured Info
Navigator	User-Agent, Platform, Language, Hardware specs
Screen	Width, Height, Color depth, Available space
Intl	Locale, Timezone, Number format
Storage	localStorage, sessionStorage
Headers	Observed request headers

---

📋 Requirements

• 🟢 Node.js 16+
• 🟢 Playwright
• 🟢 Chrome Browser (for extension)

---

📦 Installation

# Clone the repository
git clone https://github.com/yourusername/ccf-playwright-browser.git

# Install Playwright
npm install playwright

# Install Playwright browsers
npx playwright install chromium

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Playwright - Web testing and automation framework
• Chrome Extensions API - For browser data access

---

⭐ Star this repo if you find it helpful! ⭐

Made with ❤️ for the automation community