{"id":50295206,"url":"https://github.com/lyonsv/chrome-builder","last_synced_at":"2026-05-28T08:32:12.804Z","repository":{"id":346605917,"uuid":"1159231735","full_name":"lyonsv/chrome-builder","owner":"lyonsv","description":"Chrome Plugin that builds a JSON object to understand how a Next.js / GraphQL website is constructed. WIP.","archived":false,"fork":false,"pushed_at":"2026-03-24T15:34:28.000Z","size":1295,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-25T20:15:28.360Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lyonsv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-16T13:34:18.000Z","updated_at":"2026-03-24T15:34:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lyonsv/chrome-builder","commit_stats":null,"previous_names":["lyonsv/chrome-builder"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/lyonsv/chrome-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Fchrome-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Fchrome-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Fchrome-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Fchrome-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lyonsv","download_url":"https://codeload.github.com/lyonsv/chrome-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lyonsv%2Fchrome-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33601380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-28T08:32:11.847Z","updated_at":"2026-05-28T08:32:12.797Z","avatar_url":"https://github.com/lyonsv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Website Migration Analyzer\n\nA comprehensive Chrome extension for analyzing websites to support framework migrations. Captures assets, network traffic, SSR data structures, and third-party services to provide developers with complete migration context.\n\n## 🎯 Features\n\n### Core Analysis\n- **📁 Asset Discovery**: Complete extraction of HTML, CSS, JavaScript, images, fonts, and other resources\n- **🌐 Network Monitoring**: Captures API calls, GraphQL queries, and request patterns\n- **📊 Next.js SSR Data**: Extracts `__NEXT_DATA__` with pageProps, API endpoints, and data structures\n- **🔍 Framework Detection**: Identifies React, Vue, Angular, Next.js, Nuxt.js, and other frameworks\n- **📈 Third-Party Analysis**: Detects and catalogs external services, CDNs, and integrations\n- **📱 Screenshots**: Full-page visual documentation\n- **🏗️ API Architecture**: Maps microservices, GraphQL endpoints, and REST APIs\n\n### Advanced Capabilities\n- **SSR Data Extraction**: Analyzes server-side rendered data for Next.js applications\n- **GraphQL Discovery**: Finds GraphQL endpoints, queries, and Apollo cache structures\n- **Entity Mapping**: Identifies data entities and relationships from SSR props\n- **Real-time Monitoring**: Live network request capture with detailed logging\n- **Page Reload Triggers**: Captures initial requests for SSR applications\n\n## 🚀 Installation\n\n### From Source\n1. Clone this repository:\n   ```bash\n   git clone https://github.com/yourusername/website-migration-analyzer.git\n   cd website-migration-analyzer\n   ```\n\n2. Load the extension in Chrome:\n   - Open Chrome and navigate to `chrome://extensions/`\n   - Enable \"Developer mode\" in the top right\n   - Click \"Load unpacked\" and select the project directory\n   - The extension icon will appear in your toolbar\n\n### From Chrome Web Store\n*Coming soon - extension will be published after review*\n\n## 📖 Usage\n\n### Basic Analysis\n1. **Navigate** to the website you want to analyze\n2. **Click** the extension icon in your toolbar\n3. **Configure** analysis options:\n   - ✅ Download Assets (HTML, CSS, JS, Images)\n   - ✅ Capture Network Requests\n   - ✅ Reload Page to Capture Initial Requests (Recommended for SSR sites)\n   - ✅ Take Screenshot\n   - ✅ Audit Third-Party Services\n   - ✅ Detect Frameworks\n4. **Click** \"Start Analysis\"\n5. **Wait** for analysis completion\n6. **Download** the comprehensive analysis package\n\n### Next.js / SSR Applications\nFor server-side rendered applications, enable these options:\n- ✅ **Reload Page to Capture Initial Requests** - Captures network traffic during fresh page load\n- ✅ **Trigger Navigation** - Captures client-side requests during route changes\n\n### Advanced Features\n- **Debug Status**: Check service worker status and request capture statistics\n- **Show All Requests**: View detailed list of captured network requests\n- **DevTools Panel**: Advanced network monitoring with real-time request display\n\n## 📊 Output Structure\n\nThe extension generates a comprehensive JSON analysis file:\n\n```json\n{\n  \"url\": \"https://example.com\",\n  \"title\": \"Example Site\",\n  \"assets\": {\n    \"html\": [/* HTML content */],\n    \"css\": [/* Stylesheets */],\n    \"js\": [/* JavaScript files */],\n    \"images\": [/* Image assets */],\n    \"fonts\": [/* Font files */],\n    \"other\": [/* Other resources */]\n  },\n  \"frameworks\": [\n    {\n      \"name\": \"Next.js\",\n      \"confidence\": 0.9\n    }\n  ],\n  \"thirdPartyServices\": [\n    {\n      \"name\": \"Google Analytics\",\n      \"category\": \"Analytics\",\n      \"urls\": [\"https://www.google-analytics.com/...\"]\n    }\n  ],\n  \"nextJsData\": {\n    \"hasNextData\": true,\n    \"pageProps\": {/* Server-side props */},\n    \"graphqlQueries\": [/* Found GraphQL patterns */],\n    \"apiEndpoints\": [/* Discovered API endpoints */],\n    \"dataStructure\": {/* Entity analysis */}\n  },\n  \"networkRequests\": [\n    {\n      \"url\": \"https://api.example.com/graphql\",\n      \"method\": \"POST\",\n      \"isGraphQL\": true,\n      \"graphQLQuery\": {/* Parsed query */}\n    }\n  ],\n  \"metadata\": {/* SEO and page metadata */}\n}\n```\n\n## 🎯 Use Cases\n\n### Framework Migrations\n- **React → Next.js**: Analyze current React app structure and data flow\n- **Vue → Nuxt.js**: Understand component architecture and state management\n- **Legacy → Modern**: Map existing functionality to modern framework patterns\n\n### API Migrations\n- **REST → GraphQL**: Discover existing API patterns and data relationships\n- **Monolith → Microservices**: Map current service boundaries and dependencies\n- **Data Architecture**: Understand current data structures and entity relationships\n\n### Third-Party Audits\n- **Service Inventory**: Complete catalog of external integrations\n- **Performance Impact**: Identify heavy third-party dependencies\n- **Security Review**: Map data sharing with external services\n\n## 🔧 Technical Architecture\n\n### Components\n- **Content Script** (`content.js`): DOM analysis, asset discovery, Next.js data extraction\n- **Background Service Worker** (`background.js`): Network request interception, data storage\n- **Popup Interface** (`popup.js`, `popup.html`): User controls and status display\n- **DevTools Panel** (`devtools-panel.js`): Advanced network monitoring\n\n### Permissions Required\n- `activeTab` - Access current page content\n- `webRequest` - Network traffic interception\n- `downloads` - Save analysis files\n- `scripting` - Content script injection\n- `storage` - Temporary data storage\n- `tabs` - Page reload functionality\n- `debugger` - Advanced network monitoring\n\n### Browser Compatibility\n- **Chrome**: Fully supported (Manifest V3)\n- **Edge**: Compatible with Chromium-based versions\n- **Firefox**: Requires Manifest V2 adaptation (planned)\n\n### Project Structure\n```\nwebsite-migration-analyzer/\n├── manifest.json           # Extension configuration\n├── popup.html             # Main UI interface\n├── popup.js               # UI logic and controls\n├── background.js          # Service worker (network monitoring)\n├── content.js             # DOM analysis and SSR extraction\n├── devtools.js            # DevTools integration\n├── devtools-panel.js      # Advanced network monitoring\n├── local-analyzer.js      # Alternative analysis engine\n├── css/                   # Stylesheets\n├── icons/                 # Extension icons\n└── ai/decisions/          # Technical documentation\n```\n\n## 🛠️ Development\n\n### Prerequisites\n- Chrome Browser (for testing)\n- Basic knowledge of Chrome Extension APIs\n- Understanding of web development concepts\n\n### Local Development\n1. Make changes to source files\n2. Reload extension in `chrome://extensions/`\n3. Test on various websites\n4. Check console logs for debugging\n\n### Contributing\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our contributing guidelines:\n\n- **Bug Reports**: Use GitHub issues with detailed reproduction steps\n- **Feature Requests**: Describe the use case and expected behavior\n- **Code Contributions**: Follow existing code style and include tests\n- **Documentation**: Help improve README and inline documentation\n\n### Development Priorities\n1. Firefox/Safari compatibility (Manifest V2 support)\n2. Improved GraphQL schema introspection\n3. Advanced data relationship mapping\n4. Custom analysis rule configuration\n5. Batch analysis for multiple pages\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Chrome DevTools Protocol documentation\n- Next.js team for SSR architecture insights\n- GraphQL community for query parsing techniques\n- Open source contributors and testers\n\n## 📞 Support\n\n- **Issues**: [GitHub Issues](https://github.com/yourusername/website-migration-analyzer/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/yourusername/website-migration-analyzer/discussions)\n- **Documentation**: See `ai/decisions/` for technical deep-dives\n\n---\n\n**Built for developers migrating websites and applications to modern frameworks.**\n\nThis tool provides the comprehensive analysis needed to understand existing architectures and plan successful migrations to Next.js, Nuxt.js, or other modern frameworks with GraphQL APIs.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonsv%2Fchrome-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flyonsv%2Fchrome-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flyonsv%2Fchrome-builder/lists"}