chrometools-mcp 3.1.6 → 3.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,178 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Interactivity Detection Test</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ padding: 20px;
11
+ max-width: 800px;
12
+ margin: 0 auto;
13
+ }
14
+ .section {
15
+ margin: 30px 0;
16
+ padding: 20px;
17
+ border: 1px solid #ccc;
18
+ border-radius: 8px;
19
+ }
20
+ h2 {
21
+ margin-top: 0;
22
+ color: #333;
23
+ }
24
+ .test-item {
25
+ margin: 10px 0;
26
+ padding: 10px;
27
+ background: #f0f0f0;
28
+ border-radius: 4px;
29
+ }
30
+ .clickable-div {
31
+ cursor: pointer;
32
+ padding: 10px;
33
+ background: #4CAF50;
34
+ color: white;
35
+ border-radius: 4px;
36
+ display: inline-block;
37
+ }
38
+ .hover-div {
39
+ padding: 10px;
40
+ background: #2196F3;
41
+ color: white;
42
+ border-radius: 4px;
43
+ display: inline-block;
44
+ }
45
+ .hover-div:hover {
46
+ background: #0b7dda;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body>
51
+ <h1>🧪 Interactivity Detection Test Suite</h1>
52
+
53
+ <!-- 1. Standard Interactive Elements -->
54
+ <div class="section">
55
+ <h2>1️⃣ Standard Interactive Elements</h2>
56
+ <div class="test-item">
57
+ <button id="standard-button">Standard Button</button>
58
+ </div>
59
+ <div class="test-item">
60
+ <a href="#test" id="standard-link">Standard Link</a>
61
+ </div>
62
+ <div class="test-item">
63
+ <input type="text" id="standard-input" placeholder="Standard Input">
64
+ </div>
65
+ <div class="test-item">
66
+ <select id="standard-select">
67
+ <option>Option 1</option>
68
+ <option>Option 2</option>
69
+ </select>
70
+ </div>
71
+ </div>
72
+
73
+ <!-- 2. JavaScript Event Listeners -->
74
+ <div class="section">
75
+ <h2>2️⃣ Elements with JS Event Listeners</h2>
76
+ <div class="test-item">
77
+ <div id="click-listener" class="clickable-div">DIV with Click Listener</div>
78
+ </div>
79
+ <div class="test-item">
80
+ <span id="mousedown-listener" class="clickable-div">SPAN with Mousedown Listener</span>
81
+ </div>
82
+ <div class="test-item">
83
+ <p id="multiple-listeners" class="clickable-div">P with Multiple Listeners (click, mousedown, mouseup)</p>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- 3. React-style Synthetic Events (inline onclick) -->
88
+ <div class="section">
89
+ <h2>3️⃣ Inline Event Handlers</h2>
90
+ <div class="test-item">
91
+ <div onclick="alert('Clicked!')" class="clickable-div">DIV with onclick attribute</div>
92
+ </div>
93
+ <div class="test-item">
94
+ <span onmousedown="console.log('mousedown')" class="clickable-div">SPAN with onmousedown attribute</span>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- 4. Pointer Cursor Elements -->
99
+ <div class="section">
100
+ <h2>4️⃣ Elements with cursor: pointer</h2>
101
+ <div class="test-item">
102
+ <div class="clickable-div" style="cursor: pointer;">DIV with cursor:pointer (no JS)</div>
103
+ </div>
104
+ <div class="test-item">
105
+ <span style="cursor: pointer; padding: 5px; background: #FF9800; color: white; border-radius: 4px;">
106
+ SPAN with cursor:pointer (no JS)
107
+ </span>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- 5. Hover Effects (CSS only) -->
112
+ <div class="section">
113
+ <h2>5️⃣ Elements with CSS :hover Effects</h2>
114
+ <div class="test-item">
115
+ <div class="hover-div">DIV with :hover CSS (no JS)</div>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- 6. Contenteditable -->
120
+ <div class="section">
121
+ <h2>6️⃣ Contenteditable Elements</h2>
122
+ <div class="test-item">
123
+ <div contenteditable="true" style="border: 1px solid #999; padding: 10px; min-height: 50px;">
124
+ Editable DIV - type here!
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- 7. Complex Nested Interactive Elements -->
130
+ <div class="section">
131
+ <h2>7️⃣ Nested Interactive Elements</h2>
132
+ <div class="test-item">
133
+ <div id="parent-clickable" class="clickable-div">
134
+ Parent DIV with click listener
135
+ <button id="nested-button" style="margin-left: 10px;">Nested Button</button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- 8. False Positives Check -->
141
+ <div class="section">
142
+ <h2>8️⃣ Non-Interactive Elements (Should NOT be detected)</h2>
143
+ <div class="test-item">
144
+ <p>Regular paragraph - not interactive</p>
145
+ </div>
146
+ <div class="test-item">
147
+ <div style="padding: 10px; background: #ddd;">Regular DIV - not interactive</div>
148
+ </div>
149
+ <div class="test-item">
150
+ <span>Regular SPAN - not interactive</span>
151
+ </div>
152
+ </div>
153
+
154
+ <script>
155
+ // Add event listeners to test elements
156
+ document.getElementById('click-listener').addEventListener('click', function() {
157
+ console.log('Click listener triggered');
158
+ });
159
+
160
+ document.getElementById('mousedown-listener').addEventListener('mousedown', function() {
161
+ console.log('Mousedown listener triggered');
162
+ });
163
+
164
+ const multiListener = document.getElementById('multiple-listeners');
165
+ multiListener.addEventListener('click', () => console.log('click'));
166
+ multiListener.addEventListener('mousedown', () => console.log('mousedown'));
167
+ multiListener.addEventListener('mouseup', () => console.log('mouseup'));
168
+
169
+ document.getElementById('parent-clickable').addEventListener('click', function(e) {
170
+ if (e.target === this) {
171
+ console.log('Parent clicked');
172
+ }
173
+ });
174
+
175
+ console.log('✅ Test page loaded successfully');
176
+ </script>
177
+ </body>
178
+ </html>