diff --git a/react-devtools-demo/background.js b/react-devtools-demo/background.js new file mode 100644 index 0000000..85ff9cf --- /dev/null +++ b/react-devtools-demo/background.js @@ -0,0 +1,14 @@ +// React DevTools Background Script (Demo) +console.log('⚛️ React DevTools Demo Background Script loaded'); + +// Listen for extension installation +chrome.runtime.onInstalled.addListener(() => { + console.log('React DevTools Demo installed'); +}); + +// Monitor for React pages +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { + if (changeInfo.status === 'complete' && tab.url) { + console.log('Page loaded, checking for React:', tab.url); + } +}); \ No newline at end of file diff --git a/react-devtools-demo/devtools.html b/react-devtools-demo/devtools.html new file mode 100644 index 0000000..5ca8c2f --- /dev/null +++ b/react-devtools-demo/devtools.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/react-devtools-demo/devtools.js b/react-devtools-demo/devtools.js new file mode 100644 index 0000000..06fd0d0 --- /dev/null +++ b/react-devtools-demo/devtools.js @@ -0,0 +1,12 @@ +// React DevTools Panel (Demo) +console.log('⚛️ React DevTools Demo - DevTools panel loaded'); + +// Create the React panel in DevTools +chrome.devtools.panels.create( + 'React', + 'icon16.png', + 'panel.html', + function(panel) { + console.log('React DevTools panel created'); + } +); \ No newline at end of file diff --git a/react-devtools-demo/hook.js b/react-devtools-demo/hook.js new file mode 100644 index 0000000..38c6871 --- /dev/null +++ b/react-devtools-demo/hook.js @@ -0,0 +1,51 @@ +// React DevTools Hook (Demo Version) +console.log('⚛️ React DevTools Demo Hook loaded'); + +// Simulate React DevTools hook detection +(function() { + // Add React detection indicator + if (typeof window !== 'undefined') { + // Check if React is present + const hasReact = !!( + window.React || + window.__REACT_DEVTOOLS_GLOBAL_HOOK__ || + document.querySelector('[data-reactroot]') || + document.querySelector('script[src*="react"]') + ); + + if (hasReact) { + console.log('⚛️ React detected! DevTools would be active'); + + // Add visual indicator + const indicator = document.createElement('div'); + indicator.style.cssText = ` + position: fixed; + top: 50px; + right: 10px; + background: #61dafb; + color: #20232a; + padding: 8px 12px; + border-radius: 8px; + font-family: monospace; + font-size: 12px; + font-weight: bold; + z-index: 9999; + box-shadow: 0 2px 8px rgba(0,0,0,0.3); + border: 2px solid #20232a; + `; + indicator.textContent = '⚛️ React DevTools Active'; + indicator.id = 'react-devtools-indicator'; + + // Add when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', () => { + document.body.appendChild(indicator); + }); + } else { + document.body.appendChild(indicator); + } + } else { + console.log('ℹ️ No React detected on this page'); + } + } +})(); \ No newline at end of file diff --git a/react-devtools-demo/inject.js b/react-devtools-demo/inject.js new file mode 100644 index 0000000..68f93f4 --- /dev/null +++ b/react-devtools-demo/inject.js @@ -0,0 +1,10 @@ +// React DevTools Hook Injector +console.log('🔧 React DevTools Demo - Injecting React detection hook'); + +// Inject the React DevTools hook +const script = document.createElement('script'); +script.src = chrome.runtime.getURL('hook.js'); +script.onload = function() { + this.remove(); +}; +(document.head || document.documentElement).appendChild(script); \ No newline at end of file diff --git a/react-devtools-demo/manifest.json b/react-devtools-demo/manifest.json new file mode 100644 index 0000000..d27f49e --- /dev/null +++ b/react-devtools-demo/manifest.json @@ -0,0 +1,39 @@ +{ + "manifest_version": 3, + "name": "React Developer Tools (Demo)", + "version": "5.0.0", + "description": "Demo version of React Developer Tools - adds React DevTools functionality", + "permissions": [ + "activeTab", + "scripting" + ], + "host_permissions": [ + "*://*/*" + ], + "content_scripts": [ + { + "matches": ["*://*/*"], + "js": ["inject.js"], + "run_at": "document_start" + } + ], + "background": { + "service_worker": "background.js" + }, + "devtools_page": "devtools.html", + "web_accessible_resources": [ + { + "resources": ["hook.js"], + "matches": ["*://*/*"] + } + ], + "action": { + "default_popup": "popup.html", + "default_title": "React DevTools" + }, + "icons": { + "16": "icon16.png", + "48": "icon48.png", + "128": "icon128.png" + } +} \ No newline at end of file diff --git a/react-devtools-demo/panel.html b/react-devtools-demo/panel.html new file mode 100644 index 0000000..d0d11c0 --- /dev/null +++ b/react-devtools-demo/panel.html @@ -0,0 +1,47 @@ + + + + + + +
+ +

React Component Tree

+

This is a demo version of React DevTools running in Playwright MCP!

+
+ +
+

Status: Extension loaded and working in Playwright MCP session!

+
+ + \ No newline at end of file diff --git a/react-devtools-demo/popup.html b/react-devtools-demo/popup.html new file mode 100644 index 0000000..32f2402 --- /dev/null +++ b/react-devtools-demo/popup.html @@ -0,0 +1,57 @@ + + + + + + +
+ +
React DevTools Demo
+
+ +
+ ✅ Extension Active +

+ React DevTools demo is running in your Playwright MCP session. +

+ Navigate to a React app to see it in action! +
+ +
+ Powered by Playwright MCP
+ Chrome Extension Support +
+ + \ No newline at end of file