MCP/playwright-mcp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: add react-devtools-demo extension artifacts from testing session

Browse Source 
Generated during browser_install_popular_extension testing to verify
Chrome extension functionality works correctly.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ryan Malloy 2025-08-22 00:03:28 -06:00
parent b480bc9328
commit 7d97fc3e3b
8 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
react-devtools-demo/background.js vendored Normal file
View File

@ -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);
}
});

8
react-devtools-demo/devtools.html Normal file
View File

@ -0,0 +1,8 @@
<!DOCTYPE html>
<html>
<head>
<script src="devtools.js"></script>
</head>
<body>
</body>
</html>

12
react-devtools-demo/devtools.js vendored Normal file
View File

@ -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');
}
);

51
react-devtools-demo/hook.js vendored Normal file
View File

@ -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');
}
}
})();

10
react-devtools-demo/inject.js vendored Normal file
View File

@ -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);

39
react-devtools-demo/manifest.json Normal file
View File

@ -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"
}
}

47
react-devtools-demo/panel.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
padding: 20px;
background: #f5f5f5;
}
.panel {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.react-logo {
color: #61dafb;
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="panel">
<div class="react-logo">⚛️ React DevTools (Demo)</div>
<h3>React Component Tree</h3>
<p>This is a demo version of React DevTools running in Playwright MCP!</p>
<div id="component-tree">
<ul>
<li>🔵 App
<ul>
<li>📦 Header</li>
<li>📦 Main
<ul>
<li>🔗 Link</li>
<li>📝 Content</li>
</ul>
</li>
<li>📦 Footer</li>
</ul>
</li>
</ul>
</div>
<p><strong>Status:</strong> Extension loaded and working in Playwright MCP session!</p>
</div>
</body>
</html>

57
react-devtools-demo/popup.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 300px;
padding: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
background: linear-gradient(135deg, #61dafb 0%, #20232a 100%);
color: white;
margin: 0;
}
.header {
text-align: center;
margin-bottom: 15px;
}
.logo {
font-size: 32px;
margin-bottom: 8px;
}
.title {
font-size: 16px;
font-weight: bold;
}
.status {
background: rgba(255,255,255,0.1);
padding: 12px;
border-radius: 8px;
margin-bottom: 10px;
}
.info {
font-size: 12px;
text-align: center;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">⚛️</div>
<div class="title">React DevTools Demo</div>
</div>
<div class="status">
<strong>✅ Extension Active</strong>
<br><br>
React DevTools demo is running in your Playwright MCP session.
<br><br>
Navigate to a React app to see it in action!
</div>
<div class="info">
Powered by Playwright MCP<br>
Chrome Extension Support
</div>
</body>
</html>