⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
ccf-playwright-browser
Stealth browser automation using Playwright with snapshot-based environment restoration. Use when browser automation needs anti-bot evasion, snapshot or cookie restoration, proxy support, or human-like navigation behavior.
// RATINGS
// README
🎭 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
- Open Chrome and navigate to
chrome://extensions - Enable "Developer mode" in the top right corner
- Click "Load unpacked" and select the
chrome-extensiondirectory - The extension icon will appear in your toolbar ✅
2️⃣ Extract Login State
- Navigate to any website you want to extract login state from
- Log in to your account (if required) 🔐
- Click the extension icon in the toolbar
- Click "Extract Login State" to collect:
- 🍪 Cookies (including HttpOnly)
- 🌍 Browser environment
- 📋 Request headers
- 💾 Storage data
- 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.webdriverflag - ✅ 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
// HOW IT'S BUILT
KEY FILES